JS+Canvas Realization of Gobang Game
- 2021-08-06 20:50:14
- OfStack
In this paper, we share the specific code of JS + Canvas to realize 5 sub-chess games for your reference. The specific contents are as follows
Layout + Style Part Code:
<style type='text/css'>
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
cursor: pointer;
}
.btn-wrap {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-wrap div {
margin: 0 10px;
}
div>span {
display: inline-block;
padding: 10px 20px;
color: #fff;
background-color: #EE82EE;
border-radius: 5px;
cursor: pointer;
}
div.unable span {
background: #D6D6D4;
color: #adacaa;
}
#result-wrap {
text-align: center;
}
</style>
<h3 id="result-wrap">--5 Sub-chess --</h3>
<canvas id="chess" width="450px" height="450px"></canvas>
<div class="btn-wrap">
<div id='restart' class="restart">
<span> Start over </span>
</div>
<div id='goback' class="goback unable">
<span> Regret chess </span>
</div>
<div id='return' class="return unable">
<span> Revoke regret chess </span>
</div>
</div>
js partial code:
<script>
var over = false;
var me = true; // I
var _nowi = 0, _nowj = 0; // Record the coordinates of playing chess
var _compi = 0, _compj = 0; // Record the coordinates of the computer's current chess game
var _myWin = [], _compWin = []; // Record me, the computer wins
var backAble = false, returnAble = false;
var resultTxt = document.getElementById('result-wrap');
var chressBord = [];// Chessboard
for (var i = 0; i < 15; i++) {
chressBord[i] = [];
for (var j = 0; j < 15; j++) {
chressBord[i][j] = 0;
}
}
// Statistical array of winning methods
var myWin = [];
var computerWin = [];
// Winning 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 wins
// Horizontal 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[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++;
}
}
// Positive slash winning method
for (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++;
}
}
// Backslash winning method
for (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++;
}
}
// debugger;
for (var i = 0; i < count; i++) {
myWin[i] = 0;
_myWin[i] = 0;
computerWin[i] = 0;
_compWin[i] = 0;
}
var chess = document.getElementById("chess");
var context = chess.getContext('2d');
context.strokeStyle = '#bfbfbf'; // Border color
var backbtn = document.getElementById("goback");
var returnbtn = document.getElementById("return");
window.onload = function () {
drawChessBoard(); // Draw a chessboard
}
document.getElementById("restart").onclick = function () {
window.location.reload();
}
// Me, play chess
chess.onclick = function (e) {
if (over) {
return;
}
if (!me) {
return;
}
// Regret chess function is available
backbtn.className = backbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
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; // I have taken my place
for (var k = 0; k < count; k++) { // Add all the possible wins 1
if (wins[i][j][k]) {
// debugger;
myWin[k]++;
_compWin[k] = computerWin[k];
computerWin[k] = 6;// It is impossible for the opponent to win this position
if (myWin[k] == 5) {
// window.alert(' You win ');
resultTxt.innerHTML = ' Congratulations, you won! ';
over = true;
}
}
}
if (!over) {
me = !me;
computerAI();
}
}
}
// Regret chess
backbtn.onclick = function (e) {
if (!backAble) { return; }
over = false;
me = true;
// resultTxt.innerHTML = 'o( - )o In regret chess ';
// Undo regret chess function is available
returnbtn.className = returnbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
// I, regret chess
chressBord[_nowi][_nowj] = 0; // I have taken my place Restore
minusStep(_nowi, _nowj); // Destroy chess pieces
for (var k = 0; k < count; k++) { // Reduce all the possible wins 1
if (wins[_nowi][_nowj][k]) {
myWin[k]--;
computerWin[k] = _compWin[k];// The opponent may win this position
}
}
// Computer's corresponding regret chess
chressBord[_compi][_compj] = 0; // Computer, occupied position Restore
minusStep(_compi, _compj); // Destroy chess pieces
for (var k = 0; k < count; k++) { // Reduce all the possible wins 1
if (wins[_compi][_compj][k]) {
computerWin[k]--;
myWin[k] = _myWin[i];// The opponent may win this position
}
}
resultTxt.innerHTML = ' Intelligence puzzle 5 Sub-chess ';
returnAble = true;
backAble = false;
}
// Revoke regret chess
returnbtn.onclick = function (e) {
if (!returnAble) { return; }
// I, cancel the regret chess
chressBord[_nowi][_nowj] = 1; // I have taken my place
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;// It is impossible for the opponent to win this position
}
if (myWin[k] == 5) {
resultTxt.innerHTML = ' Congratulations, you won! ';
over = true;
}
}
// The computer revokes the corresponding regret chess
chressBord[_compi][_compj] = 2; // Computer, occupied position
oneStep(_compi, _compj, false);
for (var k = 0; k < count; k++) { // Reduce all the possible wins 1
if (wins[_compi][_compj][k]) {
computerWin[k]++;
_myWin[k] = myWin[k];
myWin[k] = 6;// It is impossible for the opponent to win this position
}
if (computerWin[k] == 5) {
resultTxt.innerHTML = ' The computer won, continue to refuel! ';
over = true;
}
}
returnbtn.className += ' ' + 'unable';
returnAble = false;
backAble = true;
}
// 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 (myWin[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; // Computers occupy positions
for (var k = 0; k < count; k++) {
if (wins[u][v][k]) {
computerWin[k]++;
_myWin[k] = myWin[k];
myWin[k] = 6;// It is impossible for the opponent to win this position
if (computerWin[k] == 5) {
resultTxt.innerHTML = ' The computer won, continue to refuel! ';
over = true;
}
}
}
if (!over) {
me = !me;
}
backAble = true;
returnAble = false;
var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');
if (!hasClass) {
returnbtn.className += ' ' + 'unable';
}
}
// Drawing chessboard
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();
}
}
// Draw chess pieces
var oneStep = function (i, j, me) {
context.beginPath();
context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// Draw a circle
context.closePath();
// Gradual change
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();
}
// Destroy chess pieces
var minusStep = function (i, j) {
// Erase the circle
context.clearRect((i) * 30, (j) * 30, 30, 30);
// Redraw the grid around the circle
context.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();
}
</script>
More interesting classic game implementation topics, share with you:
C + + Classic games summary
python Classic Games Summary
python Tetris Game Collection
JavaScript classic games can't stop playing
javascript Classic Games Summary