<!DOCTYPE html>
<html lang=
"zh_CN"
>
<head>
<meta charset=
"UTF-8"
>
<title>五子棋</title>
<script src=
"https://code.jquery.com/jquery-3.3.1.js"
></script>
</head>
<body>
<canvas id=
"canvas"
width=
"400"
height=
"400"
></canvas>
<script>
(
function
() {
let canvas = document.getElementById(
"canvas"
);
let context = canvas.getContext(
"2d"
);
context.beginPath();
for
(let i = 0; i < 19; i++) {
context.moveTo(10 + i * 20, 10);
context.lineTo(10 + i * 20, 370);
context.moveTo(10, 10 + i * 20);
context.lineTo(370, 10 + i * 20);
}
context.stroke();
})();
let blorwh = 0;
let matrix =
new
Array(19);
for
(let i = 0; i < 19; i++){
matrix[i] =
new
Array(19);
for
(let j = 0; j < 19; j++){
matrix[i][j] = 0;
}
}
$(
"#canvas"
).click((event) => {
blorwh = !blorwh;
console.log(event.offsetX);
let canvas = document.getElementById(
"canvas"
);
let context = canvas.getContext(
"2d"
);
let arcPosX, arcPosY;
let mtxPosX, mtxPosY;
for
(let x = 0; x < 19; x++){
if
(Math.
abs
(event.offsetX - (10 + x * 20)) < 10){
arcPosX = 10 + x * 20;
mtxPosX = x;
}
if
(Math.
abs
(event.offsetY - (10 + x * 20)) < 10){
arcPosY = 10 + x * 20;
mtxPosY = x;
}
}
if
(matrix[mtxPosX][mtxPosY] == 0) {
context.beginPath();
if
(blorwh) {
context.fillStyle =
"white"
;
context.arc(arcPosX, arcPosY, 10, 0, Math.PI * 2, false);
context.stroke();
matrix[mtxPosX][mtxPosY] = 1;
}
else
{
context.fillStyle =
"black"
;
context.arc(arcPosX, arcPosY, 10, 0, Math.PI * 2, false);
matrix[mtxPosX][mtxPosY] = 2;
}
context.fill();
}
if
(matrix[mtxPosX - 1][mtxPosY] == matrix[mtxPosX][mtxPosY] &&
matrix[mtxPosX - 2][mtxPosY] == matrix[mtxPosX][mtxPosY] &&
matrix[mtxPosX -3][mtxPosY] == matrix[mtxPosX][mtxPosY] &&
matrix[mtxPosY - 4][mtxPosY] == matrix[mtxPosX][mtxPosY]){
if
(matrix[mtxPosX][mtxPosY] == 1){
alert(
"白方获胜"
);
}
else
{
alert(
"黑方获胜"
);
}
}
})
</script>
</body>
</html>