js 五子棋(无ai，仅判断胜负)

最新推荐文章于 2023-08-22 17:18:44 发布
最新推荐文章于 2023-08-22 17:18:44 发布
阅读量4.1k 收藏
点赞数
分类专栏： html js css 文章标签： function div class button xhtml 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andycode/article/details/7493643
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>五子棋</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{margin:0 auto;padding: 0;width:600px;height:600px; text-align:center}
        .top{width:600px;height:55px;}
        .middle{width:600px;height:490px;}
        .left{width:110px;height:480px;float:left;}
        #right{width:480px;height:480px;float:left;padding:10px 0px 0px 10px; background-color:#CCC;}
        #b1{width:450px;height:450px;z-index:1;margin: 10px 10px;position:absolute;}
        #z2{width:480px;height:480px;z-index:2; display:none;position:absolute;}
        #z2 span.wb{ background:url(imgs/wb.gif) no-repeat;}
        #z2 span.bb{background:url(imgs/bb.gif) no-repeat;}
        .bottom{width:600px;height:55px;}
    </style>
    <script src="js/JScriptLib.js" type="text/javascript"></script><!-- 文章js常用类 -->
    <script type="text/javascript">
        var flag = 0;
        var w = [];
        var b = [];
        var chesscount = 1;
        //开始游戏
        function startGame() {
            drawGameBack();//画棋盘
            drawGameFlag();//棋子占位
            showCurrent("白方");
        }
        function drawGameBack() {
            var b1 = JScriptLib.$("b1", 0);
            var divwh = JScriptLib.$("chessboard", 0).value;
            var divcount = 15*15;
            divwh = divwh + "px";
            b1.style.borderTop = "#000 solid 1px";
            b1.style.borderRight = "#000 solid 1px";
            var _div = []
            for (i = 0; i < divcount; i++) {
                _div[i] = document.createElement("div");
                _div[i].className = "div"
                _div[i].style.width = divwh;
                _div[i].style.height = divwh;
                _div[i].style.borderBottom = "#000 solid 1px";
                _div[i].style.borderLeft = "#000 solid 1px";
                _div[i].style.styleFloat = "left";
                b1.appendChild(_div[i]);
            }
        }
        //span 宽高固定 20 px
        function drawGameFlag() {
            var z2 = JScriptLib.$("z2", 0);
            z2.style.display = "block";
            var spanwh = 20;
            var spancount = 16*16;
            spanwh = spanwh + "px";
            var _span = [];
            for (i = 0; i < spancount; i++) {
                _span[i] = document.createElement("span");
                _span[i].className = "span";
                _span[i].style.width = spanwh;
                _span[i].style.height = spanwh;
                _span[i].style.margin = "0px 10px 10px 0px";
                _span[i].style.styleFloat = "left";
                _span[i].style.cursor = "pointer";//设置鼠标样式
                _span[i].title=parseInt(i%16)+"-"+parseInt(i/16);//获取坐标（x,y）
                z2.appendChild(_span[i]);
            }
            showPieces();//添加事件
        }
        function showPieces() {
            var piece = z2.getElementsByTagName("span");
            for (var i = 0; i < piece.length; i++) {
                piece[i].onclick = function() {
                    play(this);
                }
            }
        }
        //开始下子
        function play(obj) {
            if (obj != null) {
                if (obj.className != "wb" && obj.className != "bb") {
                    var index = obj.title;
                    if (flag == 0) {
                        obj.className = "wb"
                        w.push(index);
                        if (isWin(index)) {
                            chesscount = 1;
                            alert("白方胜！");
                            cancelGame();
                        } else {
                            //var xindex = index.split("-");
                            //w[parseInt(xindex[0])][parseInt(xindex[1])] = "白";
                            flag = 1;
                            showCurrent("黑方");
                        }
                    } else {
                        obj.className = "bb"
                        b.push(index);
                        if (isWin(index)) {
                            chesscount = 1;
                            alert("黑方胜！");
                            cancelGame();
                        } else {
                            flag = 0;
                            showCurrent("白方");
                        }
                    }
                }
            }
        }
        //判断是否获胜
        function isWin(currentindex) {
            var win = false;
            var x;
            var y;
            var temp = currentindex.split("-");
            x = parseInt(temp[0]);
            y = parseInt(temp[1]);
            if (flag == 0) {//白方
                //垂直
                if (winArithmetic(x, y, w, 0) == 5) {
                    return win = true;
                }
                //水平
                if (winArithmetic(x, y, w, 1) == 5) {
                    return win = true;
                }
                //45度
                if (winArithmetic(x, y, w, 2) == 5) {
                    return win = true;
                }
                //135度
                if (winArithmetic(x, y, w, 3) == 5) {
                    return win = true;
                }
            } else {//黑方
                //垂直
                if (winArithmetic(x, y, b, 0) == 5) {
                    return win = true;
                }
                //水平
                if (winArithmetic(x, y, b, 1) == 5) {
                    return win = true;
                }
                //45度
                if (winArithmetic(x, y, b, 2) == 5) {
                    return win = true;
                }
                //135度
                if (winArithmetic(x, y, b, 3) == 5) {
                    return win = true;
                }
            }
            return win;
        }
        //0=垂直（y变化） 1=水平（x变化） 2=45度和3=135度（x,y都变化）
        function winArithmetic(x, y, objarr, direction) {
            var strtemp = getStr(x, y, 1, direction); //(changepoint + 1).toString() + "-" + fixedpoint;
            if (objarr.toString().indexOf(strtemp) != -1) {//正方1 继续判断
                chesscount = 2;
                strtemp = getStr(x, y, 2, direction); //(changepoint + 2).toString() + "-" + fixedpoint;
                //正方2 继续判断
                if (objarr.toString().indexOf(strtemp) != -1) {
                    chesscount = 3;
                    strtemp = getStr(x, y, 3, direction); //(changepoint + 3).toString() + "-" + fixedpoint;
                    //正方3 继续判断
                    if (objarr.toString().indexOf(strtemp) != -1) {
                        chesscount = 4;
                        strtemp = getStr(x, y, 4, direction); //(changepoint + 4).toString() + "-" + fixedpoint;
                        //正方4 继续判断
                        if (objarr.toString().indexOf(strtemp) != -1) {//正方5 返回
                            return chesscount = 5;
                        } else {//正方4，反方判断
                            strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
                            if (objarr.toString().indexOf(strtemp) != -1) {//正方4 反方1 返回
                                return chesscount = 5;
                            }
                        }
                    } else {//正方3 反方判断
                        strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
                        if (objarr.toString().indexOf(strtemp) != -1) {
                            chesscount = 4;  //正方3 反方1 共4
                            strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
                            //正方3 反方1 共4 反方判断
                            if (objarr.toString().indexOf(strtemp) != -1) {
                                return chesscount=5;
                            }
                        }
                    }
                } else {//正方2 反方判断
                    strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
                    if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方1 共3 继续反方判断
                        chesscount = 3;
                        strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
                        if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方2 共4 继续反方判断
                            chesscount = 4;
                            strtemp = getStr(x, y, -3, direction); //(changepoint - 3).toString() + "-" + fixedpoint;
                            if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方3 共5 返回
                                return chesscount=5;
                            }
                        }
                    }
                }
            } else {//正方1 反方判断
                strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
                if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方1 共2 继续反方判断
                    chesscount = 2;
                    strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
                    if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方2 共3 继续反方判断
                        chesscount = 3;
                        strtemp = getStr(x, y, -3, direction); //(changepoint - 3).toString() + "-" + fixedpoint;
                        if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方3 共4 继续反方判断
                            chesscount = 4;
                            strtemp = getStr(x, y, -4, direction); //(changepoint - 4).toString() + "-" + fixedpoint;
                            if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方4 共5 返回
                                return chesscount=5;
                            }
                        }
                    }
                }
            }
            return chesscount;
        }
        function getStr(x, y, changeindex,direction) {
            var str = "";
            switch (direction) {
                case 0: //垂直 y变化
                    str = x + "-" + (y + changeindex).toString();
                    break;
                case 1: //水平 x变化
                    str = (x + changeindex).toString() + "-" + y;
                    break;
                case 2: //2=45度（正方 x加y加）
                    str = (x + changeindex).toString() + "-" + (y + changeindex).toString();
                    break;
                case 3: //3=135度（正方 x加y减）
                    str = (x + changeindex).toString() + "-" + (y - changeindex).toString();
                    break;
            }
            return str;
        }
        function showCurrent(info) {
            JScriptLib.$("showinfo", 0).innerHTML = "当期执子为：<font color=red>" + info + "</font>";
        }
        function cancelGame() {
            var b1 = JScriptLib.$("b1", 0);
            b1.innerText = "";
            b1.style.border = "none";
            JScriptLib.$("z2", 0).innerText = "";
            chesscount = 1;
            w = [];
            b = [];
            flag = 0;
        }
    </script>
</head>
<body>
<!------- 头部开始 ------->
<div class="top">五子棋
<p id="showinfo"></p>
</div>
<!--头部结尾-->
<div class="middle">
<!------- 左边开始 ------->
<div class="left">
<h4>五子棋设置</h4>
<ul>
<li>棋盘大小
    <select id="chessboard">
    <option value="29">30*30</option>
    </select>
</li>
<li>棋子大小
    <select>
    <option>20px</option>
    </select>
</li>
<li><input type="button" value="开始游戏" οnclick="startGame();" /></li>
<li><input type="button" value="重置设置" οnclick="cancelGame();" /></li>
</ul>
</div>
<!-- 左边结尾 -->
<!-------- 右边开始 -------->
<div id="right">
<div id="b1"></div>
<div id="z2"></div>
</div>
<!--右边结尾 -->
</div>
<!--中部内容结尾-->
<!-------- 底部开始 -------->
<div class="bottom">版权</div>
<!-- 底部结尾 -->
</body>
</html>

 

andycode
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js前端五子棋，直接运行，带Ai功能
01-13
在本项目中，"js前端五子棋，直接运行，带Ai功能" 是一个使用JavaScript在前端实现的五子棋游戏。这个应用的核心亮点在于它不仅提供了用户交互的界面，而且具备人工智能（Ai）对战的功能，使得玩家可以与计算机进行...
用js实现五子棋
安静的对折的专栏
01-11 861
思路： 1、先用canvas画五子棋的棋盘 2、获取鼠标点击的位置 3、根据鼠标点击的位置判断，并画棋子 4、根据下的棋子判断是否赢了 * { padding: 0; margin: 0; } canvas { margin: 10p
js实现五子棋落子，判定结果
最新发布
wwtx2048的博客
08-22 300
黑子先行不可让子上下、左右、右上左下、左上右下,四个方向有一个方向连成5子即获胜。
五子棋（C语言）
Running Snail
12-04 2200
【问题描述】 已知两人分别执白棋和黑棋在一个围棋棋盘上下五子棋，若同一颜色的棋子在同一条横行、纵行或斜线上连成5个棋子，则执该颜色棋子的人获胜。编写程序读入某一时刻下棋的状态，并判断是否有人获胜。 输入的棋盘大小是19×19，用数字0表示空位置（即没有棋子），用数字1表示该位置下了一白色棋子，用数字2表示该位置下了一黑色棋子。假设同一颜色的棋子在同一条横行、纵行或斜线上连成的棋子个数不会超过5个，...
JS五子棋
天予不洗头的博客
02-14 2456
推荐在HBuilder上写 本文实例为大家分享了js实现五子棋的具体代码，供大家参考，具体内容如下 思路： 1、先用canvas画五子棋的棋盘 2、获取鼠标点击的位置 3、根据鼠标点击的位置判断，并画棋子 4、根据下的棋子判断是否赢了 代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset...
五子棋 输赢判断算法
windchen1000的专栏
06-07 2万+
我们以一个二位数组表示五子棋，通过x、y坐标，表示一个棋子的位置。 1、基本原理： 五子棋判断输赢，其实就是一个二维坐标上，判断上下、左右、两个45度直线，是否有五个相同的直连棋子。 2、判断时机： 一般情况下，我们可以通过遍历棋盘的每个点，从这个点出发，判断是否有五连子。但是实际上，我们并不需要这样做，因为我们在落子时，肯定当前其他地方没有五连子。我们要做的，就是从当前落子的位置判断，4...
proj五子棋AI电脑对战（creator js）
04-15
【proj五子棋AI电脑对战（creator js）】是一个基于JavaScript实现的五子棋游戏项目，使用了creator 2.0.9版本。这个项目的特点在于它包含了AI机器人对战的功能，允许玩家与计算机进行智能对弈。下面将详细阐述该...
人工智能基础 AI五子棋源代码JavaScript
09-29
在本项目中，"人工智能基础 AI五子棋源代码JavaScript" 是一个基于JavaScript实现的人工智能（AI）与用户进行五子棋对弈的应用。这个项目对于初学者来说，是理解AI原理和JavaScript编程的一个很好的实践案例。我们将...
H5+C3+JS实现五子棋游戏（AI篇）
10-17
在本文中，我们将详细探讨如何使用H5、C3和JS来实现五子棋游戏中的AI部分。本文的目标是为有兴趣的读者提供一份具有参考价值的实现方法，其中包含完整的代码实例，这些实例可以作为开发五子棋游戏AI的指导。 首先，...
五子棋AI算法-极大极小值搜索算法代码实现
11-03
2. JavaScript逻辑：JavaScript负责处理游戏逻辑，包括落子、判断胜负、调用AI算法进行决策等。在五子棋AI的实现中，JavaScript将调用极大极小值搜索算法并执行Alpha Beta剪枝，生成最优落子位置。 3. 用户交互：...
五子棋胜负判断代码
11-23
利用python代码实现五子棋胜负判定
五子棋游戏判断输赢
06-29
这是一个五子棋的小游戏，可以通过鼠标触摸技术完成下棋操作，并弹出对话框判断输赢
JS——五子棋
weixin_64948861的博客
05-12 754
一、js运用 示例：用js代码来进行页面的描绘，画图，判断，以及循环判断 二、使用步骤 1.引入库 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } canvas{ margin: 0 auto; /
【汇智学堂】-JS菜鸟版手机小游戏（五子棋游戏之一---准确落下棋子）
weixin_39593940的博客
03-19 632
<!--菜鸟H5游戏入门-五子棋游戏--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=...
用javascript实现五子棋(一)
从零开始的博客
10-04 2万+
大学毕业进了公司学了几个月的web开发,只会用jquery做事,但是又不甘心,又想要深入的学习一下js,但是无论怎么学都感觉自己抓不到要领。于是决定通过写js游戏来锻炼一下自己。 一、游戏背景画面 既然是锻炼js能力，用图片当背景怎么行，这里我选择了html5的canvas标签来绘制五子的整个背景，html代码如下 五子棋游戏 后台的绘制背
五子棋算法判断输赢
热门推荐
南瓜灯cc
07-06 3万+
五子棋相信大部分人都玩过，至少应该听说过。（五子棋源码） 简述一下规则：当在棋盘的横行或竖行或斜行（左斜与右斜）有五个及以上连续的棋子的时候，则为赢。 分析一下五子棋的算法，当下一个棋子的时候（对应相应的棋盘应该有一个坐标），应该判断下的棋子的横行，横行或竖行或斜行（左斜与右斜）是否满足连续棋子的个数大于等于5个，每次下一个棋子的时候都应该有所判断，每次都应该对4个大的方向（横行，竖行，左斜，...
五子棋判输赢方法一 ：
m0_63808944的博客
12-04 2304
可以很容易的看出五子棋连城5子即为获胜，其中一共有八个方向需要去计算，如下图所示： 分别为：东西南北，东北，东南，西南，西北八个方向； （1）定义一个 int count用来定义是否有5个相同颜色的棋子相邻的连成一条直线。 （2）：东方向，可以很容易看出往右的时候，只有X的坐标改变，而Y坐标没有发生改变这可以很容易的得等式关系int i=x+1；数组arr1[i][y]=arr[x][y];(i++); 同理往左()向西，Y值不变，i=x-1;arr[i][y]==arr..
Android五子棋游戏开发：人机对弈与胜负判断
6. **胜负判断**：当一方形成五子连线时，游戏结束。需要编写函数检查每步棋的上下左右和对角线方向，看是否有连续的五个相同颜色的棋子。 7. **程序调试与优化**：在编写代码过程中，需要不断进行单元测试和整体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值