Self-written HTML5 Canvas + JavaScript Gobang

See some once only irrigation of netizens, after learning the front end, has been able to write a download volume of thousands of tens of thousands of script, style, to help the public, become popular people, feel full of envy. I also want to learn the front-end technology, become popular AH. So on the whim, began to learn the front-end knowledge, and write down this little exercise.

The basic idea is this:

1. Use canvas to draw a chessboard or chess piece.

2. Save the Checkerboard state with a two-dimensional array.

3. Set a flag to identify the Lazi order.

4. When clicked, detects if there is a pawn in the current click position in the array, if it exists, it is not lazi; If the game is finished, it is not lazi.

5. Lazi, the array is updated, and the current Lazi is in the row, column, top left-right, bottom left-right four-direction checkerboard state written to a one-dimensional array to determine whether the new Lazi formed five sub-alignments.

6. If a five-sub-alignment is formed, it prompts for victory and ends the game, instead, the exchange order continues the game.

：

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/994049/201610/994049-20161030150249968-1611849664. PNG "style=" border:0px; "/>

The code is as follows:

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:0px; "/>

  1 <! doctype html>  2 
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:0px; "/>
L 

Self-written HTML5 Canvas + JavaScript Gobang