diff --git a/games/game.css b/games/game.css
new file mode 100644
index 0000000..3269ee9
--- /dev/null
+++ b/games/game.css
@@ -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;
+    
+    
+}
diff --git a/games/game.html b/games/game.html
new file mode 100644
index 0000000..d26fab6
--- /dev/null
+++ b/games/game.html
@@ -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>
\ No newline at end of file
diff --git a/games/gamejs.js b/games/gamejs.js
new file mode 100644
index 0000000..6914112
--- /dev/null
+++ b/games/gamejs.js
@@ -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;
+    }
+}
