The UI of the man-machine war of the fingers

Recently made a one-finger chess demo, a good summary today, later use.

It is mainly divided into UI part and AI part

The UI part is mainly divided into the drawing board and drawing pieces flowchart as follows

First create a canvas on the page

<canvas id= "Chess" width= "450px" height= "450px" ></canvas>

View Code

Start JS section

Step One: Initialize a series of work + picture background

varme =true  //SunspotsvarChessboardarr = []//Checkerboard Intersection PointvarChess = document.getElementById (' chess '))varCTX = Chess.getcontext (' 2d ') for(vari = 0;i < 15;i++) {Chessboardarr[i]= []     for(varj = 0;j < 15;j++) {Chessboardarr[i][j]= 0}}ctx.strokestyle= ' #bfbfbf '//Checkerboard Lines//Draw watermark Here you need to draw the board after the picture is drawn or the background map will cover the board .varLogo =NewImage () logo.src= '.. /public/chess/images/whitebg.png 'Logo.onload=function() {ctx.drawimage (logo,0,0,450,450) Drawchessboard ()//Draw the Board}

View Code

Step Two: Draw the Board

var function () {    for (var i = 0; i < i++) {        //  Draw horizontal        //< /c11> 15 is the edge of the checkerboard White  30 is the size of a lattice        ctx.lineto (+ i * 30,435)        ctx.stroke (        )/ /  draw longitudinal line        Ctx.moveto (15,15 + i *)        Ctx.lineto (435,15 + i *)        Ctx.stroke ()    }}

View Code

Step three: Draw pieces

The createradialgradient (X1,Y1,R1,X2,Y2,R2) function of the canvas is used to draw the pieces, the first three parameters represent the origin and the radius, and the next three parameters are the origin and radius of the second circle.

Gradient.addcolorstop (0, ' #0a0a0a ')//indicates the color of the first circle
Gradient.addcolorstop (1, ' #636766 ')//indicates the color of the second circle

//I,j represents the index of the current pawn, me means black or whitevarOneStep =function(I, J, me) {//draw a piece draw a circle need to start the pathCtx.beginpath () Ctx.arc (+ I * 30,15 + j * 30,13,0,2 *Math.PI) Ctx.closepath ()//to draw a piece's gradient    varGradient = ctx.createradialgradient (+ i * 30-2,15 + J * 30-2,13,15 + i * 30-2,15 + J * 30-2,0)    if(Me) {//Black ChessGradient.addcolorstop (0, ' #0a0a0a ') Gradient.addcolorstop (1, ' #636766 ')    }Else{//White ChessGradient.addcolorstop (0, ' #d1d1d1 ') Gradient.addcolorstop (1, ' #f9f9f9 ')} Ctx.fillstyle=gradient Ctx.fill ()}

View Code

Step four: When clicking on the intersection of the chessboard, draw the pieces

1. Use E.offsetx, e.offsety to get the offset of the current click position relative to the canvas origin

2. Calculate the checkerboard coordinates relative to the canvas origin i,j

3. Determine whether the current Chessboard[i][j] has a pawn, there is no pawn to draw

4. Use the value of me to determine whether to draw black or white

Chess.onclick =function(e) {varCHESSX =E.offsetxvarChessY =e.offsetyvari = Math.floor (CHESSX/30)//because the chessboard is white 15px pieces radius 15px so the points within the 30px range are drawn pieces    varj = Math.floor (Chessy/30)    //Draw Pieces    //No pawn to Lazi .    if(Chessboardarr[i][j] = = 0) {onestep (i,j,me)if(Me) {//SunspotsCHESSBOARDARR[I][J] = 1         }Else{//White sonCHESSBOARDARR[I][J] = 2} me=!me;//change the color of a piece after painting            }}    

View Code

Okay, now the simple fingers of the game have been realized ....

Unknown AI how, please listen to tell

The UI of the man-machine war of the fingers