Native JS + Canvas implements wuziqi game instances, canvas wuziqi

Native JS + Canvas implements wuziqi game instances, canvas wuziqi

I. Functional Modules

First, let's take a look at the current results:

Online experience: https://wj704.github.io/five_game.html

The main functional modules are:

1. Man-Machine combat
2. Regret
3. revoke the regret Function

Ii. Code explanation

2.1 Man-Machine combat function implementation

As you can see, the horizontal and vertical positions of the Board are 15*15, and the canvas is used to draw the Board:

// Draw the checker var drawChessBoard = function () {for (var I = 0; I <15; I ++) {context. moveTo (15 + I * 30, 15); context. lineTo (15 + I * 30,435); context. stroke (); context. moveTo (15, 15 + I * 30); context. lineTo (435, 15 + I * 30); context. stroke ();}}

After knowing the number of grids, Let's first look at the number of winning methods of wuziqi:

// Win array var wins = []; for (var I = 0; I <15; I ++) {wins [I] = []; for (var j = 0; j <15; j ++) {wins [I] [j] = [] ;}} var count = 0; // total number of winning Methods // crossline winning method for (var I = 0; I <15; I ++) {for (var j = 0; j <11; j ++) {for (var k = 0; k <5; k ++) {wins [I] [j + k] [count] = true ;} count ++ ;}/// vertical line winning method for (var I = 0; I <15; I ++) {for (var j = 0; j <11; j ++) {for (var k = 0; k <5; k ++) {wins [j + k] [I] [count] = true ;} count ++ ;}/// forward slash wins (var I = 0; I <11; I ++) {for (var j = 0; j <11; j ++) {for (var k = 0; k <5; k ++) {wins [I + k] [j + k] [count] = true ;} count ++ ;}/// backlash wins (var I = 0; I <11; I ++) {for (var j = 14; j> 3; j --) {for (var k = 0; k <5; k ++) {wins [I + k] [j-k] [count] = true ;} count ++ ;}}

According to the definition of the total number of wins, the arrays of computers and wins are respectively saved:

  for(var i = 0; i < count; i++){        myWin[i] = 0;        _myWin[i] = 0;        computerWin[i] = 0;        _compWin[i] = 0;   }

Then people start playing chess:

 

// Me, playing chess. onclick = function (e) {if (over) {// return;} if (! Me) {return;} var x = e. offsetX; var y = e. offsetY; var I = Math. floor (x/30); var j = Math. floor (y/30); _ nowi = I; _ nowj = j; if (chressBord [I] [j] = 0) {oneStep (I, j, me ); chressBord [I] [j] = 1; // me, occupied position for (var k = 0; k <count; k ++) {// Add 1 if (wins [I] [j] [k]) {myWin [k] ++; _ compWin [k] = computerWin [k]; // prepare computerWin [k] = 6 for repentance; // This position cannot win if (myWin [k] = 5) {resultTxt. innerHTML = 'Congratulations, You win! '; Over = true ;}} if (! Over) {me =! Me; computerAI () ;}// the regret function is available in backbtn. className = backbtn. className. replace (new RegExp ("(\ s | ^) unable (\ s | $ )"),"");}

The oneStep () method is as follows:

// Draw the pawn var oneStep = function (I, j, me) {// debugger; context. beginPath (); context. arc (15 + I * 30, 15 + j * 30, 13, 0, 2 * Math. PI); // circle context. closePath (); // gradient var gradient = context. createRadialGradient (15 + I * 30 + 2, 15 + j * 30-2, 13, 15 + I * 30 + 2, 15 + j * 30-2, 0 ); if (me) {gradient. addColorStop (0, '# 0a0a0a'); gradient. addColorStop (1, '#636766');} else {gradient. addColorStop (0, '# d1d1d1'); gradient. addColorStop (1, '# f9f9f9');} context. fillStyle = gradient; context. fill ();}

Next, let's take a look at how computers play chess. Specifically, let's look at the computerAI () method:

// Computer chess var computerAI = function () {var myScore = []; var computerScore = []; var max = 0; var u = 0, v = 0; for (var I = 0; I <15; I ++) {myScore [I] = []; computerScore [I] = []; for (var j = 0; j <15; j ++) {myScore [I] [j] = 0; computerScore [I] [j] = 0 ;}} for (var I = 0; I <15; I ++) {for (var j = 0; j <15; j ++) {if (chressBord [I] [j] = 0) {for (var k = 0; k <count; k ++) {if (wins [I] [j] [k]) {if (myWi N [k] = 1) {myScore [I] [j] + = 200;} else if (myWin [k] = 2) {myScore [I] [j] + = 400;} else if (myWin [k] = 3) {myScore [I] [j] + = 2000 ;} else if (myWin [k] = 4) {myScore [I] [j] + = 10000;} if (computerWin [k] = 1) {computerScore [I] [j] + = 220;} else if (computerWin [k] = 2) {computerScore [I] [j] + = 420 ;} else if (computerWin [k] = 3) {computerScore [I] [j] + = 2100;} else if (computerWin [k] = 4) {computerScore [I] [J] + = 20000 ;}}if (myScore [I] [j]> max) {max = myScore [I] [j]; u = I; v = j;} else if (myScore [I] [j] = max) {if (computerScore [I] [j]> computerScore [u] [v]) {u = I; v = j ;}} if (computerScore [I] [j]> max) {max = computerScore [I] [j]; u = I; v = j;} else if (computerScore [I] [j] = max) {if (myScore [I] [j]> myScore [u] [v]) {u = I; v = j ;}}}_ compi = u; _ compj = v; oneStep (u, v, false); chressBord [U] [v] = 2; // The computer occupies the position for (var k = 0; k <count; k ++) {if (wins [u] [v] [k]) {computerWin [k] ++; _ myWin [k] = myWin [k]; myWin [k] = 6; // This position cannot win if (computerWin [k] = 5) {resultTxt. innerHTML = 'o (strong □strong) o, the computer won, continue to cheer! '; Over = true ;}} if (! Over) {me =! Me ;}}

Based on the corresponding weight, the computer should be located.

2.2 regret

I want to mention that, for the moment, I can only regret it. The main key points of the repentance function are: 1. Destroy the pawns just now; 2. Restore the previously irretrievable status; check the specific code:

// Regret backbtn. onclick = function (e) {if (! BackAble) {return;} over = false; me = true; // me, regret chressBord [_ nowi] [_ nowj] = 0; // me, reset minusStep (_ nowi, _ nowj) in occupied position; // destroy the pawns for (var k = 0; k <count; k ++) {// subtract 1 if (wins [_ nowi] [_ nowj] [k]) {myWin [k] --; computerWin [k] = _ compWin [k]; // This position may win} // The computer's regret chressBord [_ compi] [_ compj] = 0; // computer, restoring minusStep (_ compi, _ compj); // destroy the pawns for (var k = 0; k <count; k ++) {// subtract 1 if (wins [_ compi] [_ compj] [k]) {computerWin [k] --; myWin [k] = _ myWin [I]; // The other party may win at this position} resultTxt. innerHTML = '-- Puzzle wuziqi --'; returnAble = true; backAble = false; // you can use the returnbtn function to revoke repentance. className = returnbtn. className. replace (new RegExp ("(\ s | ^) unable (\ s | $ )"),"");}

MinusStep () is the method for destroying pawns. Let's take a look at how they are destroyed.

// Destroy the pawn var minusStep = function (I, j) {// erase the circle context. clearRect (I) * 30, (j) * 30, 30, 30); // re-draw the grid context around the circle. beginPath (); context. moveTo (15 + I * 30, j * 30); context. lineTo (15 + I * 30, j * 30 + 30); context. moveTo (I * 30, j * 30 + 15); context. lineTo (I + 1) * 30, j * 30 + 15); context. stroke ();}

First, use clearRect () to erase the circle, and then re-draw the grid around the circle. Pay attention to the corresponding position. It takes some time.

2.3 revoking the regret Function

It is equivalent to restoring the status before repentance. The code is relatively simple:

// Revoke the repentance returnbtn. onclick = function (e) {if (! ReturnAble) {return;} // I, revoke regret chressBord [_ nowi] [_ nowj] = 1; // I, occupied by oneStep (_ nowi, _ nowj, me); for (var k = 0; k <count; k ++) {if (wins [_ nowi] [_ nowj] [k]) {myWin [k] ++; _ compWin [k] = computerWin [k]; computerWin [k] = 6; // This location cannot win} if (myWin [k] = 5) {resultTxt. innerHTML = 'Congratulations, you have won! '; Over = true ;}/// the computer revokes the corresponding regret chressBord [_ compi] [_ compj] = 2; // The computer occupies the oneStep (_ compi, _ compj, false); for (var k = 0; k <count; k ++) {if (wins [_ compi] [_ compj] [k]) {computerWin [k] ++; _ myWin [k] = myWin [k]; myWin [k] = 6; // This location cannot win} if (computerWin [k] = 5) {resultTxt. innerHTML = 'o (strong □strong) o, the computer won, continue to cheer! '; Over = true ;}} returnbtn. className + = 'unable'; returnAble = false; backAble = true ;}

So far, these three functions have been simply completed.

Iii. Summary

The key points of the game are: 1. How many winning methods are available? 2. How to determine whether the game has won? 3. computer chess algorithms. Here, we skillfully use the Array Storage win method to determine whether or not we have won the game. By comparing weights, we can calculate the computer's position to play the game.

Canvas is used in the process. I have learned how to draw a line, draw a circle, and learn how to clear a circle.
Note how to add and delete classes for elements using native Js.

Finally put the code on github, address: https://github.com/wj704/wj704.github.io/blob/master/five_game.html

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.