You cannot use HTTP protocol If you try to create chat applications or multiple games. Because you will need real-time changes and HTTP protocol close the connection after the request and create a new connection every request and respond.
In this case, you will use WebSocket. WebSocket is bidirectional when the connection between client and server the connection will be alive until the client or server terminates it.
There are many libraries to work with this protocol like socket.io. at this article, we will make an online multiple x-o using socket.io and node.js.
the ground
x-o is made of 9 blocks we will use a grid and every block will be div id for every block will represent the position. Assume the 9 blocks are a 3×3 matrix.
<div id="cont" >
<h1 id="turn"></h1>
<h1 class="player" id="player1">player1(x): <p class="score" id="score1"></p></h1>
<h1 class="player" id="player2">player2(o): <p class="score" id="score2"></p></h1>
<div class="continer ">
<div class="box" id="0-0" ></div>
<div class="box" id="0-1" ></div>
<div class="box" id="0-2" ></div>
<div class="box" id="1-0" ></div>
<div class="box" id="1-1" ></div>
<div class="box" id="1-2" ></div>
<div class="box" id="2-0" ></div>
<div class="box" id="2-1" ></div>
<div class="box" id="2-2" ></div>
</div>
</div>
<div id="loadbox" class="boxc" >
<div id="load" >
</div>
<p>wait player to play with him </p>
</div>
<div id="disconnect" class="boxc" >
<p>your friend disconnect</p>
<input id="newg1" type="button" value="new game" class=" btn-success" />
</div>
<div id="endbox" class="boxc">
<p id="plname" style="text-align: center;">wait player to play with him </p>
<br/>
<div style="text-align:center">
<input id="newg" type="button" value="new game" class=" btn-success" />
<input id="reg" type="button" value="retrygame" class=" btn-success" />
</div>
</div>
<div id="wretry" class="boxc" >
<p id="want" style="text-align: center;">the another player want to play again with you </p>
<br/>
<div style="text-align:center">
<input id="yes" type="button" value="yes" class=" btn-success" />
<input id="no" type="button" value="no" class=" btn-danger" />
</div>
<br/>
</div> <style>
.box{
height: 150px;
width:150px;
background-color: aquamarine;
text-align: center;
font-size: 75px;
}
#cont{
width:500px;
margin:0 auto;
}
.continer{
display:grid;
grid-gap: 15px;
grid-template-columns: auto auto auto;
}
.score{
display:inline-block;
}
.player{
display:inline-block;
margin-left: 50px;
margin-top: 0;
}
#getname{
text-align:center;
padding-top: 250px;
padding-bottom: 250px
}
.boxc{
box-shadow: 0 8px 16px 0 #A6EEF7 ;
background-color: cornsilk;
font-size:20px;
border: solid black;
width:50%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
top:40%;
right:0%;
}
#cont,#endbox,#wretry,#disconnect{
display: none;
}
#btn{
margin-bottom: 5px;
}
#load{
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #4af307;
width: 120px;
height: 120px;
margin:0 auto;
animation: load 2s linear infinite;
}
@keyframes load {
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Initialize
we will make three arrays. array for a row, array for a column, and array for a cross. we have three rows of the array for each row so the row array’s length is three and also for each column. for cross, there are only 2.
let reg=document.getElementById("reg");
let newg=document.getElementById("newg");
let newg1=document.getElementById("newg1");
let no=document.getElementById("no");
let yes=document.getElementById("yes");
let wretry=document.getElementById("wretry");
let endbox=document.getElementById("endbox");
let loadbox=document.getElementById("loadbox");
let cont=document.getElementById("cont");
let disconnect=document.getElementById("disconnect");
let winnerp=document.getElementById("plname");
let score1=document.getElementById("score1");
let score2=document.getElementById("score2");
let turn=document.getElementById("turn");
let playernum=0;
let playerrole=0;
let rowofbox={
"0":0,
"1":0,
"2":0
}
let columnofbox={
"0":0,
"1":0,
"2":0
}
let crossofbox={
"0":0,
"1":0
}
let gameover=false;
let winner="";
checkhappen=false
function alertwinner(text){
console.log("here")
console.log(text)
endbox.style.display='block';
winnerp.innerHTML=text;
}
function retrygame(){
playerrole=0
wretry.style.display="none";
endbox.style.display='none';
loadbox.style.display='none';
disconnect.style.display='none';
rowofbox={
"0":0,
"1":0,
"2":0
}
columnofbox={
"0":0,
"1":0,
"2":0
}
crossofbox={
"0":0,
"1":0
}
gameover=false;
winner=""
boxes=document.getElementsByClassName("box")
for(box of boxes){
box.innerHTML=""
box.data=false
}
}
function check(number,ch,player,score){
if( number == ch){
gameover=true
checkhappen=true
winner=player
score.innerHTML=Number(score.innerHTML)+1
//alert(`${winner} is win`)
alertwinner(`${winner} is win`)
//retrygame()
return true
}
return false
}
function endgame(box,m){
if(m==0){
var finish=3
var add=1
var player="player1"
var score=score1
}else{
var finish=-3
var add=-1
var player="player2"
var score=score2
}
row=box.id[0]
column=box.id[2]
if(row == column){
crossofbox["0"]+=add
if(row=="1"){
crossofbox["1"]+=add
}
}
else if(box.id=="2-0" || box.id=="0-2"){
crossofbox["1"]+=add
}
rowofbox[row]+=add
columnofbox[column]+=add
let arr=[crossofbox["0"],
crossofbox["1"],
rowofbox[row],
columnofbox[column]]
for (const ch of arr){
c=check(ch,finish,player,score);
if(c){
break;
}
}
}
function game(box){
if(!box.data && !gameover && box.className=="box"){
if(playerrole%2==0){
box.innerHTML="x"
endgame(box,0)
}
else{
box.innerHTML="o"
endgame(box,1)
}
if(checkhappen){
checkhappen=false
}else{
playerrole++
if(playerrole%2==playernum){
turn.innerHTML="your turn"
}else{
turn.innerHTML="wait your turn"
}
box.data=true
}
if(playerrole>=9){
alert(`draw`)
gameover=true
//retrygame()
}
}
}
newg.onclick=()=>{
location.reload();
}
newg1.onclick=()=>{
location.reload();
}
let continer=document.getElementsByClassName("continer")[0];
in this code, we initialize the game and write the algorithm to determine who is the winner. at the endgame function, there are two parameters (m) parameter is 0 or 1 if 0 that means player 1 played. the parameter box is the block which clicked by the player.
when clicking the block this function will run if the block is in row 1 and column 2 that means column[2[ and row[1] values will change if player 1 then will add 1 if player 2 then will add -1 if the value I and position in column or row or cross array is 3 or -3 that means one of the two players is the winner if 3 that mean player 1 if -3 that mean player 2.
we will talk about the back end in the next article
