简单入门五子棋代码html+css+javascript实现
今天为了测试某AI工具，尝试生成了五子棋代码，代码非常简单，适合入门级小白练手。
把代码中的bug调试通过后贴出来了，供一些入门的小朋友参考。
代码中没有实现任何算法部分，比如胜利判断、机器人对决等功能还没有开发的
但是每次落子会后自动换手，没有悔棋，胜负全靠自己判断。
先上一张图看看效果：
代码部分的注释生成的还算可以理解，略有基础的都能看懂，首先贴上index.html文件的代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="store">
<canvas id="board"></canvas>
</div>
<div>
<button type="button" onClick="location.reload()">重新开始</button>
</div>
<script src="app.js"></script>
</body>
</html>
样式文件style.css文件代码如下：
body {
display: flex;
justify-content: left;
align-items: left;
height: 100vh;
background-color: #f0f0f0;
position: relative;
}
canvas {
border: 1px solid #000;
position: relative;
top: 0;
left: 0;
z-index: 10;
width: 450px;
height: 450px;
}
button {
margin: 20px;
}
.black {
background: url(hei.jpg);
}
.white {
background: url(bai.jpg);
}
#store div{
position: absolute;
z-index: 100;
}
脚本文件app.js的代码如下：
const canvas = document.getElementById('board');
const store = document.getElementById("store");
const ctx = canvas.getContext('2d');
const gridSize = 30;
const grid = 15;
var current = 'white';
canvas.width = gridSize * grid;
canvas.height = gridSize * grid;
const getCellAt = (x, y) => {
return document.getElementById(`cell-${x}-${y}`);
};
const initBoard = () => {
// 绘制棋盘
for (let i = 0; i < grid; i++) {
for (let j = 0; j < grid; j++) {
ctx.fillStyle = '#eee';
ctx.fillRect(i * gridSize, j * gridSize, gridSize, gridSize);
ctx.strokeStyle = '#000';
ctx.strokeRect(i * gridSize, j * gridSize, gridSize, gridSize);
}
}
// 为每个格子创建一个div元素
const cells = [];
for (let i = 0; i < grid; i++) {
cells[i] = [];
for (let j = 0; j < grid; j++) {
const cell = document.createElement('div');
cell.style.width = gridSize + 'px';
cell.style.height = gridSize + 'px';
cell.style.left = i * gridSize + 'px';
cell.style.top = j * gridSize + 'px';
cell.id = `cell-${i+1}-${j+1}`;
cell.classList = "abc";
store.appendChild(cell);
cells[i][j] = cell;
}
}
// 示例：访问cells[2][3]的id
console.log(`The id of cell (2, 3) is: ${cells[2][3].id}`);
};
const drawStone = (x, y, color) => {
ctx.beginPath();
ctx.arc(x * gridSize, y * gridSize, gridSize / 2 - 5, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
};
const onClick = (event) => {
const x = Math.round(event.clientX / gridSize);
const y = Math.round(event.clientY / gridSize);
console.log(`The id of click (x, y) is: ` + x + ' , ' + y);
const cell = getCellAt(x, y);
if (cell.classList.contains('black') || cell.classList.contains('white')) {
alert('此处已有棋子');
return;
}
cell.classList.add(current);
if (current=='white') {
current = 'black';
}else{
current = 'white';
}
};
window.onload = function() {
initBoard();
store.addEventListener('click', onClick);
};
另外还需要两张黑子和白子的图片，hei.jpg和bai.jpg大小为30px30px即可，用画图工具画圆或者方块都可以的。
黑子：hei.jpg 
白子：bai.jpg
如果不愿意自己编辑图片，也可以把样式文件中black和white的背景图地址改为如下：
.black {
background: url(https://img2023.cnblogs.com/blog/33087/202312/33087-20231227102312001-1747310739.jpg);
}
.white {
background: url(https://img2023.cnblogs.com/blog/33087/202312/33087-20231227102328608-1635636606.jpg);
}
文件全部放在同一个目录下即可，如下图：
