Game 5 for js, css3 + js

: No image is used. All images are made of js + css. The interface is implemented, and the function is not implemented yet. Js: varconfig {row: 16, row rank: 16, column white: 112, white black: 113, black overtime: 1000*60, timeout gam

 

:

I didn't use any images, all of which were made by js + css.

The interface is implemented, and the function is not implemented yet.

Js:

 

Var config = {row: 16, // row rank: 16, // column white: 112, // white black: 113, // black overtime: 1000*60, // timeout gameState: 0, // 0 not started, 1. in progress, 2 pause in progress margin: 5, // the margin of each pawn is 5 pixels colorSign: 0, // color tag}; $ (function () {initGame () ;}); // initialize the game function initGame () {createView (); $ (. block ). click (function () {eventCLick ($ (this) ;}// create a checker function createView () {var html =

; For (var I = 0; I ; For (var k = 0; k ; // Html + = I +-+ k; html + =;} html + = ; $ (Document. body ). append (html); // create a block var width = $ (. box table ). width (); var single = (width/config. row ). toFixed (0); var leftMargin = (single/2 ). toFixed (0); var x = parseInt (leftMargin); var y = parseInt (leftMargin); // create a chess box for (var I = 0; I ; Box = box. replace ($ {h}, single-config.margin); box = box. replace ($ {w}, single-config.margin); box = box. replace ($ {x}, x + (config. margin/2) + 1); box = box. replace ($ {y}, y + (config. margin/2); $ (. box ). append (box); x + = parseInt (single);} y + = parseInt (single); x = parseInt (leftMargin);} // click the pawn function eventCLick (target) {if (config. colorSign = 0) {$ (target ). addClass (focus-black);} else {$ (target ). addClass (focus-white );}}
CSS and HTML: