JavaScript五子棋简单

最新推荐文章于 2023-10-26 00:17:00 发布

踏马红尘

最新推荐文章于 2023-10-26 00:17:00 发布

阅读量574

点赞数

分类专栏： HTML5 文章标签： JavaScript html5

本文链接：https://blog.csdn.net/u010217654/article/details/93883030

版权

JavaScript五子棋简单

html 代码

<body>
    <main class="gobang-box">
        <h2>五子棋</h2>
        <div id="gobang" class="gobang"></div>

        <p id="orderHint" class="order-hint">默认黑色先下</p>
    </main>
</body>

画棋盘

/**
 * 画棋盘
 *
 * @param {*} n 棋盘交叉点总数 n*n
 */
function drawGobang(n) {

    for (let i = 0; i < n; i++) {
        piecesArr[i] = [];
        for (let j = 0; j < n; j++) {
            piecesArr[i][j] = '0';


            let chunk = document.createElement('div');

            // 添加 data-id 属性 方便识别
            chunk.setAttribute('data-id', 'chess_' + i + '_' + j);
            chunk.classList.add('chunk')
            // 棋盘边界特出处理
            if (i == 0) {
                chunk.classList.add('top')
            }
            if (i == n - 1) {
                chunk.classList.add('bottom')
            }
            if (j == 0) {
                chunk.classList.add('left')
            }

最低0.47元/天解锁文章

踏马红尘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript五子棋简单

JavaScript五子棋简单demohtml 代码<body> <main class="gobang-box"> <h2>五子棋</h2> <div id="gobang" class="gobang"></div> <p id="orderHint" c...
复制链接

扫一扫

专栏目录