来简单做个五子棋

已于 2022-03-17 12:33:08 修改
阅读量1.3k 收藏 1
点赞数 1
分类专栏： HTML CSS JS 文章标签： javascript css3 css html5 前端
于 2022-03-17 12:31:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yenoxin/article/details/123538218
版权
HTML 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏
JS
3 篇文章 0 订阅
订阅专栏

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

由于本人对五子棋不是特别熟悉，就勉强自己做了个。
有什么做错了就请多包含或在评论区指正

© BaiG 2022. All rights reserved.

这个项目我做了快一个下午，脑细胞估计死的七七八八了！
项目使用 GitHub Copilot 加快进度
点赞加关注！！
先写的代码有点小问题看到最后

整体思路：

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

代码+制作过程：

var ended = false;
// 用来判断是否可以继续放下棋子
var zi = 0;
// 棋盘上有的棋子数量
var color = 'black';
// 当前下棋方颜色 ['black' / 'white;]
var colorNum = 1;
// 颜色号码 [1 / 2]
var qipan = $('#qipan');
// 获取要生成棋盘的 div
HTML
<div class="center" id="qipan">
</div>
<div class="infor">
    <h1 id="xiaqifang">当前下棋方：黑子</h1>
    <h1 id="dinkezi">第0颗子</h1>
</div>
生成 15*15 棋盘
// 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);
}
创建一个 array 以便之后判断胜利用
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;
    }
}
美化

使用 css 对棋盘进行美化

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

CSS：

 :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>

这个项目里我用小插件效果自己看吧 MessageJS

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>`);
}

当某方胜利后，会执行 end() 函数

输赢判断：

1. 判断横向是否连续连成5颗

思路：

找到 xy 轴中第一颗黑子的坐标
如果第一颗黑子的 x+1 也是黑子，那么count_black++;
如果第一颗白子的 x+1 也是白子，那么count_white++;
当count_black 或者 count_white 是等于四
执行 end(‘x子赢了’);
如果没有子是横向连着的，那就将 count_xxxxx 设为零。

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;

颜色代码：0 = 空气；1 = 黑子；2 = 白子

来看核心判断代码：

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

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

连在一起就是如果第一颗子是黑子并且下一颗子也是黑子的话：
count_black++;

白子也一样，只不过颜色代码换成了 2

1. 判断纵向是否连续连成5颗

思路：

找到 xy 轴中第一颗黑子的坐标
如果第一颗黑子的 y+1 也是黑子，那么count_black++;
如果第一颗白子的 y+1 也是白子，那么count_white++;
当count_black 或者 count_white 是等于四
执行 end(‘x子赢了’);
如果没有子是纵向连着的，那就将 count_xxxxx 设为零。

思路基本一样，只不过 x+1 变成了 y+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;

思路一样我就不写备注了哈

1. 判断斜向是否连续连成5颗

思路：

找到 xy 轴中第一颗黑子的坐标
如果第一颗黑子的 y+1 x+1 或者 y-1 x+1 也是黑子，那么count_black++;
如果第一颗白子的 y+1 x+1 或者 y-1 x+1 也是白子，那么count_white++;
当count_black 或者 count_white 是等于四
执行 end(‘x子赢了’);
如果没有子是斜向连着的，那就将 count_xxxxx 设为零。

这个要写两个for，分别判断从左上到右下，和从右上到左下。

// 斜向
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

Bug 解决

Image
这样算赢。。。

每两颗子连在一起，就 +1。但是我们要 5 颗子连着。

(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
其他几个也是一样的改改

改完之后的 win() 函数。

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

MIT license

使用此开源程序时，请 标明 作者信息：
作者：BaiG，出处：https://blog.csdn.net/yenoxin

AReTrnA
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
python实现简单的五子棋游戏
12-17
本文实例为大家分享了python实现五子棋游戏的具体代码，供大家参考，具体内容如下 # -*- coding:utf-8 -*- ... # 创建一个tk对象,窗口 self.window = Tk() # 窗口名称 self.window.title('五子棋
python制作简单五子棋游戏
09-19
主要为大家详细介绍了python制作简单五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
C语言实践----五子棋（附源代码及思路讲解）
热门推荐
weixin_61866141的博客
07-26 6万+
用C语言设计五子棋小游戏，棋盘符号┌┬┐├┼┤└ ┴ ┘。了解五子棋下棋过程1、在菜单界面选择对战方式、进行上一局或退出游戏2、绘制棋盘、棋子3、执黑子的玩家先落子，然后双方轮流落子4、判断胜负或平局5、退出游戏 ...
html实现五子棋游戏
路在前方
10-31 5260
实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px
copilot自动生成代码（刷题神器）
fangjial的博客
04-05 3423
copilot使用
Vue实现单机五子棋（附源码）
sclarkca56的博客
06-06 1584
Vue 实现 单子五子棋
『牛角书』鸿蒙小游戏
weixin_51605555的博客
12-15 401
经典小游戏
一个自己做的简单五子棋游戏
05-24
一个自己做的简单五子棋游戏一个自己做的简单五子棋游戏一个自己做的简单五子棋游戏
一个简单的android五子棋
08-04
简单的android五子棋实现300多行代码
wuziqi.rar_五子棋简单
09-21
本程序是一个简单的MFC工程，实现的是五子棋游戏
五子棋插件1.0.0.2版
12-19
RTX 五子棋插件 五子棋插件1.0.0.2版
网络五子棋的实现
07-27
NULL 博文链接：https://kinedy.iteye.com/blog/737857
自制五子棋（完美学习班）
06-18
自制五子棋（完美学习班）本程序里面的棋盘是用程序画的，功能齐全非常适合学习！
Appinventor2 游戏 ----俄罗斯方块_源码
01-21
aia源码--Appinventor2 游戏--俄罗斯方块
c++mfc自制五子棋
03-02
根据网上的一些算法思想，自制简单的五子棋程序，有人人模式和人机模式，机器的搜索树的深度为10，界面较为简单，用vs mfc制作
简单五子棋app
oyang_hesu的博客
09-15 1847
最近升级android3.0，弄了好久才搞定= = 下面是关于写五子棋app的一些想法和总结。 一、自定义View的创建 why? 写五子棋重要的是先创建一个自定义VIew来画出棋盘线和棋子。 how? 1.先在java/main里面新建一个View:wuziqiPanel，使其extends View，注意构造方法。 2.在布局里面新建自定义View的标签，高宽暂时为 warpCo...
inventor2五子棋游戏apk_五子棋大师2中文版游戏
weixin_34664586的博客
12-24 1198
五子棋大师2中文版是一款经典好玩的五子棋游戏，计有世界比赛和区域比赛两种形态。无论何种比赛形态，玩家均必须和电脑控制的几位对手进行比赛，求取最佳名次，以打入排行榜。电脑控制的对手棋力和棋风各有不同，但整体而言，电脑对手的棋力均不低，适合喜欢五子棋游戏的玩家来玩。游戏规则(1)对局双方各执一色棋子。(2)空棋盘开局。(3)黑先、白后，交替下子，每次只能下一子。(4)棋子下在棋盘的空白点上，棋子下定后...
简易五子棋的详细制作
01-18
超详细的五子棋制作，让你学习五子棋毫无压力。java编写
Appinventor2 游戏源码--仿像素鸟
01-21
四天下来的成果，绝对原创 Appinventor2 游戏源码--仿像素鸟
一个简单的asp五子棋
最新发布
03-28
1. 首先，需要一个棋盘，可以用一个二维数组来表示。 2. 然后，需要两个玩家，可以用两个不同的颜色来表示棋子。 3. 每当一个玩家下棋时，需要将棋子放在棋盘上，并检查是否有五个连续的棋子。 4. 如果有五个连续...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值