<!DOCTYPE html>
< html xmlns="http:///1999/xhtml">
< head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
margin: 10px;
}
</style>
<script type="text/javascript">
var canvas;
var context;
var isWhite = true;//Set whether it is the turn of white chess
var isWell = false;//Set whether the chessboard wins in this game. If you win, you can't leave again
var img_b = new Image();
img_b.src = "images/";//White chess picture
var img_w = new Image();
img_w.src = "images/";//Black chess picture
var chessData = new Array(15);//This two-dimensional array is used to save the board information. Initialize 0 as unwritten, 1 as white as white as black as black as
for (var x = 0; x < 15; x++) {
chessData[x] = new Array(15);
for (var y = 0; y < 15; y++) {
chessData[x][y] = 0;
}
}
function drawRect() {//The function is called after the page is loaded and the chessboard is initialized
canvas = ("canvas");
context = ("2d");
for (var i = 0; i <= 640; i += 40) {//Draw the line of the chessboard
();
(0, i);
(640, i);
();
();
();
(i, 0);
(i, 640);
();
();
}
}
function play(e) {//Occurs when the mouse is clicked
var x = parseInt(( - 20) / 40);// Calculate the area where the mouse clicks. If (65, 65), then the position where (1, 1) is clicked
var y = parseInt(( - 20) / 40);
if (chessData[x][y] != 0) {//Judge whether the position has been dropped by
alert("You can't play chess in this position");
return;
}
if (isWhite) {
isWhite = false;
drawChess(1, x, y);
}
else {
isWhite = true;
drawChess(2, x, y);
}
}
function drawChess(chess, x, y) {//The parameter is, chess (1 is white, 2 is black), array position
if (isWell == true) {
alert("It's over, please refresh if you need to play again");
return;
}
if (x >= 0 && x < 15 && y >= 0 && y < 15) {
if (chess == 1) {
(img_w, x * 40 + 20, y * 40 + 20);//Draw white chess
chessData[x][y] = 1;
}
else {
(img_b, x * 40 + 20, y * 40 + 20);
chessData[x][y] = 2;
}
judge(x, y, chess);
}
}
function judge(x, y, chess) {//Judge whether the chessboard has won in this game
var count1 = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
//Judgement left and right
for (var i = x; i >= 0; i--) {
if (chessData
[y] != chess) {
break;
}
count1++;
}
for (var i = x + 1; i < 15; i++) {
if (chessData
[y] != chess) {
break;
}
count1++;
}
//Upgrade and bottom judgment
for (var i = y; i >= 0; i--) {
if (chessData[x]
!= chess) {
break;
}
count2++;
}
for (var i = y + 1; i < 15; i++) {
if (chessData[x]
!= chess) {
break;
}
count2++;
}
//Judgement on the upper left and lower right
for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
if (chessData
[j] != chess) {
break;
}
count3++;
}
for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
if (chessData
[j] != chess) {
break;
}
count3++;
}
//Judge the upper right and lower left
for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
if (chessData
[j] != chess) {
break;
}
count4++;
}
for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
if (chessData
[j] != chess) {
break;
}
count4++;
}
if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
if (chess == 1) {
alert("White chess wins");
}
else {
alert("Black chess wins");
}
isWell = true;//The chessboard has been won in setting this game, so you can't leave again
}
}
</script>
< /head>
< body onload="drawRect()">
<div>
<canvas width="640" onmousedown="play(event)" height="640">Your browser does not support HTML5 canvas, please use the google chrome browser to open it.
</canvas>
</div>
< /body>
< /html>