0
点赞
收藏
分享

微信扫一扫

来简单做个五子棋

八怪不姓丑 2022-03-17 阅读 83
javascriptcss3csshtml5前端

简易五子棋判断及棋盘制作

© BaiG 2022. All rights reserved.

整体思路：

首先先使用 JavaScript 生成 15*15 棋盘
按下后生成棋子
每次生成棋子后判断：棋子是否连续5颗

代码+制作过程：

var ended = false;
// 用来判断是否可以继续放下棋子
var zi = 0;
// 棋盘上有的棋子数量
var color = 'black';
// 当前下棋方颜色 ['black' / 'white;]
var colorNum = 1;
// 颜色号码 [1 / 2]
var qipan = $('#qipan');
// 获取要生成棋盘的 div

<div class="center" id="qipan">
</div>
<div class="infor">
    <h1 id="xiaqifang">当前下棋方：黑子</h1>
    <h1 id="dinkezi">第0颗子</h1>
</div>

// make 15*button.col_btn 15 * div.raw
for (var i = 0; i < 15; i++) { // 15 横行
    var raw = $('<div class="raw"></div>');
    for (var j = 0; j < 15; j++) { // 15 纵行
        var col_btn = $('<button class="col_btn"></button>');
        col_btn.attr('id', i + '-' + j);
        col_btn.attr('onclick', 'chess(this)');
        raw.append(col_btn);
        /* 在每个纵行上生成按钮
           class 是 col_btn
           id 是 y坐标-x坐标
           同时生成 onclick 事件
           按下时触发函数：chess 并将元素作为参数传入
           ( chess(element) )
        */
    }
    qipan.append(raw);
}

var chess_arr = [
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ],
    [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ]
];

arr = [];
// make arr = [[0*15]*15]
for(var i = 0; i < 15; i++){
    arr[i] = [];
    for(var j = 0; j < 15; j++){
        arr[i][j] = 0;
    }
}

加入style前：
Image
加入style后：
Image

 :root {
    --qizi-width: 40px; /*棋子的大小*/
}

.col_btn {
    height: 45px; /*每一格大小*/
    width: 45px;
    margin: 0;
    border-radius: none;
    border: 1px solid black;
    background: burlywood;
}

.col_btn:hover {
    background: url(chess_tips.png); 
    /*当用户鼠标悬停在格子上时显示图片 chess_tips.png (箭头) */
    background-size: cover;
    /*保证图片不会超出大小而无法显示*/
}

.raw {
    display: flex;
    /*让每一格之间没有空隙*/
}

.center { /*置中*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid black;
}

.circle_black { /*黑棋*/
    position: relative;
    top: 60%; /* 放置在交点 */
    left: 60%;
    height: var(--qizi-width);
    width: var(--qizi-width);
    margin: 0;
    border-radius: 50%;
    background: black;
    box-shadow: white 0 0 10px;
}

.circle_white { /*白棋*/
    position: relative;
    top: 60%;
    left: 60%;
    height: var(--qizi-width);
    width: var(--qizi-width);
    margin: 0;
    border-radius: 50%;
    background: white;
    box-shadow: black 0 0 10px;
}

.cover { /*当某方胜利后
会生成一个 div.cover 挡住用户不让其鼠标触碰棋盘*/
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
}

.infor {
    z-index: 99;
    position: absolute;
}

<script src="https://xchuangc.github.io/messagejs/message.js"></script>
<script>
    startXmessage();
</script>

Image

Image

var chess = function(element) {
    if (!ended) { // 没有完结的时候
        if (document.getElementById(element.id).innerHTML == '') {
        	// 如果该格子是空的
            $(`#${element.id}`).append(`<div class="circle_${color}"></div>`);
            // 创建棋子
            chess_arr[element.id.split('-')[0]][element.id.split('-')[1]] = colorNum;
			// 向 chess_arr 添加类似坐标的东西
			
			// 黑子走完变白子，很正常吧
            if (color === 'black') {
                color = 'white';
                colorNum = 2;
            } else {
                color = 'black';
                colorNum = 1;
            }
            zi++;
            // 添加已经走了的棋子个数
            $('#xiaqifang').html(`当前下棋方：${color === 'black' ? '黑子' : '白子'}`);
            // 设置为：当前下棋方：黑/白
            $('#dinkezi').html(`第${zi}颗子`);
            if (win(chess_arr)) {
                return;
            }
            // 判断输赢
        } else {
            message('该位置已有棋子！');
            // 如果该格子不是空的，那么就弹出信息
        }
    }
}

function end(m) {
    message(m);
    ended = true;
    $('#qipan').append(`<div class="cover">当前胜利方：${m.split('子赢了')[0]}<br>下子数：${zi}颗子</div>`);
}

输赢判断：

function win(arr){ // 传入棋盘：chess_arr 为参数
	var count_black = 0;
    var count_white = 0;
    // 初始化
}

// 横向
for (var i = 0; i < 15; i++) {
    for (var j = 0; j < 15; j++) {
        if ((arr[i][j] == 1) && (arr[i][j] == arr[i][j + 1])) {
        	// 寻找连着的黑子
            count_black++;
        } else if ((arr[i][j] == 2) && (arr[i][j] == arr[i][j + 1])) {
	        // 寻找连着的白子
            count_white++;
        }
        if (count_black == 4) {
            end('黑子赢了');
            return true;
        } else if (count_white == 4) {
            end('白子赢了');
            return true;
        }
        //判断
    }
}
count_black = 0;
count_white = 0;

(arr[i][j] == 1) && (arr[i][j] == arr[i][j + 1])

arr[i][j] == 1 判断是否是黑子
arr[i][j] == arr[i][j + 1] 判断下一格和自己是不是一样的

// 纵向
for (var i = 0; i < 15; i++) {
    for (var j = 0; j < 15; j++) {
        if ((arr[i][j] == 1) && (arr[i][j] == arr[i + 1][j])) {
            count_black++;
        } else if ((arr[i][j] == 2) && (arr[i][j] == arr[i + 1][j])) {
            count_white++;
        }
        if (count_black == 4) {
            end('黑子赢了');
            return true;
        } else if (count_white == 4) {
            end('白子赢了');
            return true;
        }
    }
}
count_black = 0;
count_white = 0;

// 斜向
for (var i = 0; i < 15; i++) {
    for (var j = 0; j < 15; j++) {
        if ((arr[i][j] == 1) && (arr[i][j] == arr[i + 1][j + 1])) {
            count_black++;
        } else if ((arr[i][j] == 2) && (arr[i][j] == arr[i + 1][j + 1])) {
            count_white++;
        }
        if (count_black == 4) {
            end('黑子赢了');
            return true;
        } else if (count_white == 4) {
            end('白子赢了');
            return true;
        }
    }
}
for (var i = 0; i < 15; i++) {
    for (var j = 0; j < 15; j++) {
        if ((arr[i][j] == 1) && (arr[i][j] == arr[i - 1][j + 1])) {
            count_black++;
            console.log(count_black);
        } else if ((arr[i][j] == 2) && (arr[i][j] == arr[i - 1][j + 1])) {
            count_white++;
        }
        if (count_black == 4) {
            end('黑子赢了');
            return true;
        } else if (count_white == 4) {
            end('白子赢了');
            return true;
        }
    }
}
count_black = 0;
count_white = 0;

Image
Image
Image
Image
Image
Image
Image

Image
这样算赢。。。

(arr[i][j] == 1) && (arr[i][j] == arr[i][j + 1]) 变成：

(arr[i][j] == 1) && (arr[i][j] == arr[i][j + 1]) && (arr[i][j] == arr[i][j + 2]) && (arr[i][j] == arr[i][j + 3]) && (arr[i][j] == arr[i][j + 4])

这样的话就不会发生刚刚的情况了

Image
其他几个也是一样的改改

function win(arr) {
    var count_black = 0;
    var count_white = 0;
    // 横向
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 15; j++) {
            if ((arr[i][j] == 1) && (arr[i][j] == arr[i][j + 1]) && (arr[i][j] == arr[i][j + 2]) && (arr[i][j] == arr[i][j + 3]) && (arr[i][j] == arr[i][j + 4])) {
                count_black++;
            } else if ((arr[i][j] == 2) && (arr[i][j] == arr[i][j + 1]) && (arr[i][j] == arr[i][j + 2]) && (arr[i][j] == arr[i][j + 3]) && (arr[i][j] == arr[i][j + 4])) {
                count_white++;
            }
            if (count_black == 4) {
                end('黑子赢了');
                return true;
            } else if (count_white == 4) {
                end('白子赢了');
                return true;
            }
        }
    }
    count_black = 0;
    count_white = 0;
    // 纵向
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 15; j++) {
            if ((arr[i][j] == 1) && (arr[i][j] == arr[i + 1][j]) && (arr[i][j] == arr[i + 2][j]) && (arr[i][j] == arr[i + 3][j]) && (arr[i][j] == arr[i + 4][j])) {
                count_black++;
            } else if ((arr[i][j] == 2) && (arr[i][j] == arr[i + 1][j]) && (arr[i][j] == arr[i + 2][j]) && (arr[i][j] == arr[i + 3][j]) && (arr[i][j] == arr[i + 4][j])) {
                count_white++;
            }
            if (count_black == 4) {
                end('黑子赢了');
                return true;
            } else if (count_white == 4) {
                end('白子赢了');
                return true;
            }
        }
    }
    count_black = 0;
    count_white = 0;
    // 斜向
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 15; j++) {
            if ((arr[i][j] == 1) && (arr[i][j] == arr[i + 1][j + 1]) && (arr[i][j] == arr[i + 2][j + 2]) && (arr[i][j] == arr[i + 3][j + 3]) && (arr[i][j] == arr[i + 4][j + 4])) {
                count_black++;
            } else if ((arr[i][j] == 2) && (arr[i][j] == arr[i + 1][j + 1]) && (arr[i][j] == arr[i + 2][j + 2]) && (arr[i][j] == arr[i + 3][j + 3]) && (arr[i][j] == arr[i + 4][j + 4])) {
                count_white++;
            }
            if (count_black == 4) {
                end('黑子赢了');
                return true;
            } else if (count_white == 4) {
                end('白子赢了');
                return true;
            }
        }
    }
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 15; j++) {
            if ((arr[i][j] == 1) && (arr[i][j] == arr[i - 1][j + 1])) {
                count_black++;
                console.log(count_black);
            } else if ((arr[i][j] == 2) && (arr[i][j] == arr[i - 1][j + 1])) {
                count_white++;
            }
            if (count_black == 4) {
                end('黑子赢了');
                return true;
            } else if (count_white == 4) {
                end('白子赢了');
                return true;
            }
        }
    }
    count_black = 0;
    count_white = 0;
}

这就变正常了

整个project我放在github上了：
https://github.com/wbaigei/JavaScript-WuZiQi

举报

相关推荐

Java五子棋

爬虫tcp/ip网络协议

五子棋游戏

javascript原型模式前端开发语言css

【江鸟中原】——简单五子棋

i++传统文化连线游戏开发

pyhton-五子棋

pythonopencvYOLO开发语言目标检测计算机视觉图像处理

稀疏数组（五子棋)

蓝桥杯算法javaSystem二维数组代码人生

五子棋（c++）

c++排序算法开发语言

React 实现五子棋

react.jsjavascript前端

python实现五子棋

LineciidePython后端开发

五子棋项目总结

c++开发语言后端

Python ❀ 制作简单的五子棋游戏

python五子棋游戏竖向Python编程语言
0 条评论