五子棋原生JavaScript分享

最新推荐文章于 2024-06-13 14:30:24 发布
最新推荐文章于 2024-06-13 14:30:24 发布
阅读量357 收藏 5
点赞数 1
分类专栏： 小游戏 文章标签： javascript js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AN27xy/article/details/109529287
版权

1.HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
    <title>五子棋</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            border-spacing: 0px;
            border: 1px solid #3c3c3c;
            background-color: #e1e1e2;
            margin: auto;
        }
        
        .piece {
            border-spacing: 0px;
            border: 1px solid;        
        }
    </style>

</head>

<body>
    <script type="text/javascript" src="./Gobang.js"></script>
</body>

</html>

2.JavaScript部分

var ScreenWidth = {
    documentWidth: 500,
    containerWidth: 400, // 容器默认宽度
    cellWidth: 20  // 单元格宽度
}
if (document.documentElement.clientWidth < 500) {
    ScreenWidth.documentWidth = document.documentElement.clientWidth;
    ScreenWidth.containerWidth = ScreenWidth.documentWidth * 0.8;
    ScreenWidth.cellWidth = ScreenWidth.containerWidth * 0.05;
}
//常量
var reg = /\d{1,2}/g;
var white = []; // 放白子
var black = []; // 放黑子
var tempKey = false; // 判断是走黑子还是白子
var notOver = true; // 判断游戏是否结束
var tips = "白棋走"; // 提示走棋
var count = 0;//相连的个数
var bv = false; // 黑棋胜利
var wv = false; // 白棋胜利 
var yCanWin = [];// 同一竖元素存放的数组
var xCanWin = [];// 同一横元素存放的数组
var xyCanWin = [];// 同一正斜存放的数组
var yxCanWin = [];// 同一反斜存放的数组
// 用计时器监听是否胜利
var time = setInterval(function () {
    if (bv) {
        tips = "黑棋胜利";
        document.getElementsByTagName("span")[0].innerText = tips;
        for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
            document.getElementsByClassName("pieceBox")[i].onclick = null;
        }
        clearInterval(time);
    }
    if (wv) {
        tips = "白棋胜利";
        document.getElementsByTagName("span")[0].innerText = tips;
        for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
            document.getElementsByClassName("pieceBox")[i].onclick = null;
        }
        clearInterval(time);
    }
}, 100);
newGame();// 开始游戏
function newGame() {
    if (document.getElementsByTagName("table").length) {
        for (var i = 0; i < document.getElementsByTagName("table").length; i++) {
            document.getElementsByTagName("table")[i].remove();
        }
    }
    // 初始化以下内容
    bgInit();
    pieceInit();
    spanFn();
    white = [];
    black = [];
    tempKey = false;
    notOver = true;
    tips = "白棋走";
    count = 0;
    bv = false;
    xCanWin = [];
    yCanWin = [];
    xyCanWin = [];
    yxCanWin = [];
}

function spanFn() {
    var span = document.createElement("span");
    document.body.insertBefore(span, document.getElementsByTagName("script")[0]);
    span.innerText = tips;
}
// 棋盘初始化
function bgInit() {
    var table = document.createElement("table");
    table.className = "box"
    for (var y = 0; y < 20; y++) {
        var tr = document.createElement("tr");
        for (var x = 0; x < 20; x++) {
            var td = "<td class='box-" + y + "-" + x + "' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid #9c9c9c'></td>";
            tr.innerHTML += td;
        }
        table.appendChild(tr);
    }
    document.body.insertBefore(table, document.getElementsByTagName("script")[0]);
}

// 棋子初始化
function pieceInit() {
    var table = document.createElement("table");
    table.className = "piece"
    table.style = "position: absolute; top: 0; left:50%; margin-left:-" + (ScreenWidth.containerWidth + 42) / 2 + "px";
    for (var y = 0; y < 20; y++) {
        var tr = document.createElement("tr");
        for (var x = 0; x < 20; x++) {
            var td = "<td class='piece-" + y + "-" + x + " pieceBox' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid transparent;border-radius: 50%;'></td>";
            tr.innerHTML += td;
        }
        table.appendChild(tr);
    }
    document.body.insertBefore(table, document.getElementsByTagName("script")[0]);
}

// 走棋
for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
    document.getElementsByClassName("pieceBox")[i].onclick = function () {
        if (tempKey) {
            this.style.backgroundColor = "#000";// 黑子
            tempKey = false;
            black.push(this.className.match(reg));
            victory(black, 0);//判断黑棋胜利与否
            if (notOver) {
                tips = tipsGo(tempKey);
                document.getElementsByTagName("span")[0].innerText = tips;
            }
        } else {
            this.style.backgroundColor = "#fff";// 白子
            tempKey = true;
            white.push(this.className.match(reg));
            victory(white, 1);//判断白棋胜利与否
            if (notOver) {
                tips = tipsGo(tempKey);
                document.getElementsByTagName("span")[0].innerText = tips;
            }
        }
        this.onclick = null;// 点击之后取消点击事件
    }
}

// 提示走黑还是走白
function tipsGo(tempKey) {
    if (tempKey) {
        return "黑棋走";
    } else {
        return "白棋走";
    }
}

/**
 *判断各种赢的方式
 *x代表很坐标，y代表纵坐标
 *1.竖赢，就是x值相同，取y值排序后比较
 *2.横赢，就是y值相同，取x值排序后比较
 *3.正斜赢，x+y相同的值，取x或y排序后比较
 *4.反斜赢，x-y相同的值，取x或y排序后比较
 */
function victory(target, c) {
    if (target.length >= 5) {
        // 1.竖赢yCanWin
        for (var i = 0; i < target.length; i++) {
            for (var j = 0; j < target.length; j++) {
                if (target[j][1] == target[i][1]) {
                    yCanWin.push(target[j]);//把x相同的值放入数组yCanWin
                }
            }
            yWin(yCanWin, c);
            yCanWin = [];
        }
        // 2.横赢xCanWin
        for (var m = 0; m < target.length; m++) {
            for (var n = 0; n < target.length; n++) {
                if (target[n][0] == target[m][0]) {
                    xCanWin.push(target[n]);//把y相同的值放入数组xCanWin
                }
            }
            xWin(xCanWin, c);
            xCanWin = [];
        }
        // 3.正斜赢xyCanWin（左下到右上）
        for (var a = 0; a < target.length; a++) {
            for (var b = 0; b < target.length; b++) {
                if (parseInt(target[b][0]) + parseInt(target[b][1]) == parseInt(target[a][0]) + parseInt(target[a][1])) {
                    xyCanWin.push(target[b])
                }
            }
            yWin(xyCanWin, c);
            xyCanWin = [];
        }
        // 4.反斜赢yxCanWin（左上到右下）
        for (var v = 0; v < target.length; v++) {
            for (var w = 0; w < target.length; w++) {
                if (parseInt(target[w][0]) - parseInt(target[w][1]) == parseInt(target[v][0]) - parseInt(target[v][1])) {
                    yxCanWin.push(target[w])
                }
            }
            xWin(yxCanWin, c);
            yxCanWin = [];
        }
    }
}
// 棋的竖赢条件(棋的正斜赢条件)
function yWin(yCanWin, c) { // c = 0代表黑子 c = 1代表白子
    var sortArray = [];//排序数组   
    for (var i = 0; i < yCanWin.length; i++) {
        sortArray.push(yCanWin[i][0]);
    }
    sortArray.sort(function (x, y) {
        return x - y;
    });
    // 数组排序后，前数和后数加一相比(注意数值类型的转换)
    for (var j = 0; j < sortArray.length; j++) {
        if (sortArray[j + 1]) {
            if (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) {
                count++; // 每有一个连续则加一，一次不连续就清零
                if (count == 4 && c == 0) {
                    bv = true;
                    notOver = false;// 游戏结束
                    return;
                } else if (count == 4 && c == 1) {
                    wv = true;
                    notOver = false;
                    return;
                }
            } else {
                count = 0;
            }
        }
    }
    count = 0;
}
// 棋的横赢条件(棋的反斜赢条件)
function xWin(xCanWin, c) {
    var sortArray = [];
    for (var i = 0; i < xCanWin.length; i++) {
        sortArray.push(xCanWin[i][1]);
    }
    sortArray.sort(function (x, y) {
        return x - y;
    });
    for (var j = 0; j < sortArray.length; j++) {
        if (sortArray[j + 1]) {
            if (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) {
                count++;
                if (count == 4 && c == 0) {
                    bv = true;
                    notOver = false;
                    return;
                } else if (count == 4 && c == 1) {
                    wv = true;
                    notOver = false;
                    return;
                }
            } else {
                count = 0;
            }
        }
    }
    count = 0;
}

编写不易，尤其是判断条件想了好一会，点赞关注，谢谢老爷们！

AN27Xy
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
原生JavaScript实现五子棋（直接上代码干货点赞收藏拿走）
lin123_00的博客
06-15 1641
HTML页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no"> <title>五子棋</title> &lt
原生Javascript实现五子棋
qq_41961383的博客
08-26 3526
原生Javascript实现五子棋
原生js实现 五子棋
anhuyong5631的博客
04-26 212
先初始化棋盘 HTML: <!--棋盘--> <div class="grid"></div> CSS： /*棋盘*/ .grid{ position: relative; width: 762px; height: 762px; background-image: url('./image/timg.jpg');...
原生JavaScript+canvas实现五子棋游戏_值得一看
见贤思齐焉，见不贤内自省
05-15 1331
五子棋 最下面是详细代码加注释 首先需要一个画布 我们需要一个一个棋盘 <canvas id="canvas"></canvas> let canvas = document.getElementById('canvas') let ctx = canvas.getContext('2d') let redP = document.getElementsByClassName('redP')[0] let blackP = document.getElemen
原生js-五子棋游戏
weixin_44038355的博客
12-11 816
html: &amp;lt;body&amp;gt; &amp;lt;h2&amp;gt;五子棋游戏&amp;lt;/h2&amp;gt; &amp;lt;div id=&quot;box&quot;&amp;gt; &amp;lt;div id=&quot;box01&quot;&amp;gt;&amp;lt;/div&amp;gt;
JavaScript 实例 | 使用原生 JS 写五子棋
Lunaqi的博客
07-27 1164
通过制作五子棋实例 掌握作用域、原型、闭包、多态等 前端基础知识点的应用 前端开发者们 一起来看看吧 前言 听说这是一道腾讯的面试题，可能网上已经有不少答案了，晚上没事看到这道题就自己做了下。逻辑很简单，考虑到是面试题，使用了 ES6 的语法。本文介绍下核心逻辑跟部分代码。 代码请至这里下载 domo 请点击这里查
原生JavaScript实现五子棋游戏
01-18
本文实例为大家分享了JavaScript实现五子棋游戏的具体代码，供大家参考，具体内容如下 1.HTML部分 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport ...
【JavaScript源代码】原生JavaScript实现简单五子棋游戏.docx
12-30
原生JavaScript实现简单五子棋游戏 　本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码，供大家参考，具体内容如下　HTML页面　注释都很明确了，大家好好学习。　<!DOCTYPE ...
用于练习的原生js五子棋
10-04
妖妖新手，用于练习。
基于Javascript的对战五子棋设计源码
04-07
系统设计旨在为用户提供一个纯原生Javascript和CSS实现的五子棋游戏，支持人机对战、悔棋、认输和AI先手等特色功能，界面设计大方漂亮。此项目可作为学习和练手之用，AI走子算法有待改进，有兴趣的开发者可以进行...
js原生五子棋小游戏
11-02
纯js文本编写的五子棋，可以悔棋，人机对战，该文本纯属分享，代码有什么不规范的地方请指点，大神多多指教
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 390
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 545
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1415
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 573
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1261
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 801
Vue在表单校验中trigger属性指定何时触发校验规则
vue3 防止按钮的连续点击（连点）
最新发布
MtangEr的博客
06-13 277
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
javascript五子棋
10-12
好的，我可以为您提供一些关于 JavaScript 实现五子棋的思路。 首先，我们需要创建一个棋盘，可以使用 HTML 的 table 元素来实现。然后，我们需要编写 JavaScript 代码来处理用户的点击事件，并在棋盘上显示出棋子...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值