jrtechs
/
jrtechs-Club-Panda
mirror of https://github.com/jrtechs/Club-Panda.git
1
0
Fork 0
Code Issues 0 Releases 0 Wiki Activity
Browse Source

Add files via upload 

A simple Xo (Tic Tac Tao) game
pull/6/head
Dokkar Rachid Reda 6 years ago
committed by GitHub
parent
07bd68c6ec
commit
9aa60485bf
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 201 additions and 0 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +41
    -0
      games/game.css
  2. +51
    -0
      games/game.html
  3. +109
    -0
      games/gamejs.js

+ 41
- 0
games/game.css View File

@ -0,0 +1,41 @@
.playerDiv{
width: 450px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin-left: 32.5%;
margin-bottom: 5%;
}
.player{
width: 200px;
height: 60px;
font-size: 20px;
font-family: monospace;
color: brown;
margin: 5px;
background: #ccc;
border: none;
float: left;
}
.main{
width: 490px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin-left: 30%;
margin-top: 5%;
}
.btn{
width: 150px;
height: 150px;
background: #ccc;
border: none;
margin: 5px;
font-size: 1px;
color: brown;
}

+ 51
- 0
games/game.html View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Xo game</title>
<link rel="stylesheet" type="text/css" href="game.css">
</head>
<body>
<div class="playerDiv">
<div class="player">
<h3 style="margin-left: 25px;"> Player 1:</h3>
</div>
<div class="player">
<h3 style="margin-left: 25px;"> Player 2:</h3>
</div>
</div>
<br>
<div class="main" id="main">
<div class="row" >
<button class="btn" id="0">x</button>
<button class="btn" id="1">x</button>
<button class="btn" id="2">x</button>
</div>
<div class="row" >
<button class="btn" id="3">x</button>
<button class="btn" id="4">x</button>
<button class="btn" id="5">x</button>
</div>
<div class="row" >
<button class="btn" id="6">x</button>
<button class="btn" id="7">x</button>
<button class="btn" id="8">x</button>
</div>
</div>
-->
<script src="gamejs.js"></script>
</body>
</html>

+ 109
- 0
games/gamejs.js View File

@ -0,0 +1,109 @@
var btns = document.querySelectorAll('button');
var score=document.getElementsByClassName("player");
var XO = 'x';
var win1=0;
var win2=0;
var NoOneWon=0;
var player=[];
var AI=[];
for(i = 0; i<btns.length; i++){
btns[i].onclick = function(){
if( ! this.classList.contains('unclickable')){
player.push(this.attributes.id);
this.textContent = XO;
this.style.fontSize = '20px';
this.classList.add('unclickable');
NoOneWon++;
if(XO==='x'){
XO = 'o';
}else{XO = 'x';}
if(checkWinner(player)){alert('palyer 1 won'); init();
win1++;
score[0].firstElementChild.textContent = "player 1: "+win1;
}
againstAi(); //error at the last click of the 1st playerX but doesn't matter :/
NoOneWon++;
if(NoOneWon==9){
alert('no One Won :|');init();
}
}//onclick end
}
}
function againstAi(){
var emptyList= new Array();
for(i = 0; i<btns.length ; i++){
if( ! btns[i].classList.contains('unclickable')){
emptyList.push(btns[i]);
}
}
/*for(i = 0; i<emptyList.length ; i++){
console.log(emptyList[i]);
}*/
//random btn
var random=Math.floor(Math.random() *emptyList.length);
AI.push(emptyList[random].attributes.id);
emptyList[random].textContent=XO
emptyList[random].style.fontSize = '20px';
emptyList[random].classList.add('unclickable');
// console.log(random);
if(XO==='x'){
XO = 'o';
}else{XO = 'x';}
if(checkWinner(AI)){alert('player 2 won ');init();
win2++;
score[0].firstElementChild.textContent = "player 1: "+win2;
}
}//againstAi end
function checkWinner(playerX){
if((playerX.indexOf( btnId( 0 ) ) !=-1 && playerX.indexOf( btnId( 1 ) ) !=-1 && playerX.indexOf( btnId( 2 ) ) !=-1) ){
//console.log(playerX.indexOf( btnId( 5 ) ) !=-1)
return true;
}
else if((playerX.indexOf( btnId( 3 ) ) !=-1 && playerX.indexOf( btnId( 4 ) ) !=-1 && playerX.indexOf( btnId( 5 ) ) !=-1)){
return true;
}
else if((playerX.indexOf( btnId( 6 ) ) !=-1 && playerX.indexOf( btnId( 7 ) ) !=-1 && playerX.indexOf( btnId( 8 ) ) !=-1)){
return true;
}
else if((playerX.indexOf( btnId( 0 ) ) !=-1 && playerX.indexOf( btnId( 3 ) ) !=-1 && playerX.indexOf( btnId( 6 ) ) !=-1)){
return true;
}
else if((playerX.indexOf( btnId( 1 ) ) !=-1 && playerX.indexOf( btnId( 4 ) ) !=-1 && playerX.indexOf( btnId( 7 ) ) !=-1)){
return true;
}
else if((playerX.indexOf( btnId( 2 ) ) !=-1 && playerX.indexOf( btnId( 5 ) ) !=-1 && playerX.indexOf( btnId( 8 ) ) !=-1)){
return true;
}
else if((playerX.indexOf( btnId( 0 ) ) !=-1 && playerX.indexOf( btnId( 4 ) ) !=-1 && playerX.indexOf( btnId( 8 ) ) !=-1)){
return true;
}
else if((playerX.indexOf( btnId( 2 ) ) !=-1 && playerX.indexOf( btnId( 4 ) ) !=-1 && playerX.indexOf( btnId( 6 ) ) !=-1)){
return true;
}
else{return false;}
}
function btnId(a){
return btns[a].attributes.id;
}
function init(){
for(i = 0 ; i<9 ; i++){
btns[i].style.fontSize='1px';
btns[i].textContent="x" // just an initialisation :)
if(btns[i].classList.contains('unclickable')){btns[i].classList.remove('unclickable');}
player=[];
AI=[];
NoOneWon=0;
}
}

Write Preview
Loading…
Cancel
Save