JavaScript简单五子棋（canvas）

原创

于 2019-06-28 09:24:50 发布 · 573 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #JavaScript #canvas

这篇博客介绍了如何使用JavaScript和HTML5的canvas元素来创建一个简单的五子棋游戏。内容包括HTML布局、棋盘绘制、下棋逻辑及获胜判断。通过4个方向检查连续同色棋子来实现胜利检测。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS 简单五子棋 canvas 版本

前面有写过一个 JavaScript 通过DOM操作的版本 JS五子棋

html代码

<body>
    <div class="bg" id="bg">
        <canvas id="myCanvas"></canvas>
    </div>
</body>

画棋盘

/**
 *初始化棋盘
 *
 * @param {*} canvas 画布
 * @param {*} canvasText 画笔
 * @param {*} n 
 */
function initChessboard(canvas, canvasText, n, s) {

    canvas.setAttribute('width', n * s + 60 + 'px');
    canvas.setAttribute('height', n * s + 60 + 'px')

    canvasText.strokeStyle = '#000';   // 画笔颜色
    for (let i = 0; i < n; i++) {

        canvasText.moveTo(30, i * s + 30);
        canvasText.lineTo(n * 30, i * s + 30);
        canvasText.stroke();

        canvasText.moveTo(i * s + 30, 30);
        canvasText.lineTo(i * s + 30, n * 30);
        canvasText.stroke();

        pieceArr[i] =