How to make black-and-white Gobang game by HTML5

This article mainly introduces how HTML5 makes black-and-white Gobang games, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

Js Code:

Define canvas and black and white chess variables

Var canvas

Var context

Var isWhite=true;// sets whether it is White's turn.

Var isWell=false;// sets whether the chessboard wins the game. If you win, you can't go any more.

Var img_b=new Image ()

Img_b.src= "images/b.png"; / / White picture

Var img_w=new Image ()

Img_w.src= "images/c.png"; / / Black Chess picture

A two-dimensional array of chessboards is used to store chessboard information

Var chessData=new Array (15); / / initialize 0 for those who have not walked, 1 for white, and 2 for black

For (var xerox

ChessData [x] = new Array (15)

For (var yawn0wity

ChessData [x] [y] = 0

}

}

Draw the line of the chessboard

For (var iTuno Bandi)

Context.beginPath ()

Context.moveTo (0memi)

Context.lineTo (640)

Context.closePath ()

Context.stroke ()

Context.beginPath ()

Context.moveTo (iPhone0)

Context.lineTo (iBI 640)

Context.closePath ()

Context.stroke ()

}

}

Judge the winning or losing of the chess game

If (count1 > = 5 | | count2 > = 5 | | count3 > = 5 | | count4 > = 5) {

If (chess==1) {

Alert ("White wins")

}

Else {

Alert ("Black wins")

}

IsWell=true;// has won the chessboard and can't go any more.

}

Html Code:

Your browser does not support HTML5 canvas, please use google chrome browser to open it.

Thank you for reading this article carefully. I hope the article "HTML5 how to make Gobang games in black and white" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!