简单入门五子棋代码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);
}