小猿圈前端编写JS五子棋游戏

最新推荐文章于 2023-06-11 19:16:24 发布
最新推荐文章于 2023-06-11 19:16:24 发布
阅读量125 收藏 1
点赞数
文章标签： 前端 javascript ViewUI
原文链接：https://juejin.im/post/5cd13dfd51882535c90e94af
版权

前段时间发的飞机大战的游戏很多小伙伴都私聊让再做个游戏，今天小猿圈web前端讲师为大家分享的是JS五子棋的游戏，想玩的小伙伴记得自己运行一下呦。


JS五子棋游戏代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>五子棋</title>
        <style type="text/css">
            canvas {
                display: block;
                margin: 50px auto;
                box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
                cursor: pointer;
            }
            #btn-wrap {
                display: flex;
                flex-direction: row;
                justify-content: center;
            }
            #btn-wrap div {
                margin: 0 10px;
            }
            div>span {
                display: inline-block;
                padding: 10px 20px;
                color: #FFFFFF;
                background-color: #EE82EE;
                border-radius: 5px;
                cursor: pointer;
            }
            div.unable span {
                background: #D6D6D4;
                color: #ADACAA;
            }
            #result-wrap {
                text-align: center;
            }
        </style>


    </head>
    <body>
        <h3 id="result-wrap">三人行慕课（www.3mooc.com）——五子棋</h3>
        <canvas id="chess" width="450px" height="450px"></canvas>
        <div id="btn-wrap">
            <div id="restart" class="restart">
                <span>重新开始</span>
            </div>
            <div id="goback" class="goback unable">
                <span>悔棋</span>
            </div>
            <div id="return" class="return unable">
                <span>撤销悔棋</span>
            </div>
        </div>
        <script type="text/javascript">
            var over = false;
            var me = true;  //我
            var _nowi = 0, _nowj = 0; //记录自己下棋的坐标
            var _compi = 0, _compj = 0; //记录计算机当前下棋的坐标
            var _myWin = [], _compWin = []; //记录我，计算机赢的情况
            var backAble = false, returnAble = false;
            var resultTxt = document.getElementById("result-wrap");
            var chressBord = []; //棋盘
            for (var i = 0; i < 15; i++) {
                chressBord[i] = [];
                for (var j = 0; j < 15; j++) {
                    chressBord[i][j] = 0;
                }
            }
            //赢法的统计数组
            var myWin = [];
            var computerWin = [];
            //赢法数组
            var wins = [];
            for (var i = 0; i < 15; i++) {
                wins[i] = [];
                for (var j = 0; j < 15; j++) {
                    wins[i][j] = [];
                }
            }
            var count = 0; //赢法总数
            //横线赢法
            for (var i = 0; i < 15; i++) {
                for (var j = 0; j <11; j++) {
                    for (var k = 0; k < 5; k++) {
                        wins[i][j+k][count] = true;
                    }
                    count++;
                }             
            }
            //竖线赢法
            for (var i = 0; i < 15; i++) {
                for (var j = 0; j <11; j++) {
                    for (var k = 0; k < 5; k++) {
                        wins[j+k][i][count] = true;
                    }
                    count++;
                }             
            }
            //正斜线赢法
            for (var i = 0; i < 11; i++) {
                for (var j = 0; j <11; j++) {
                    for (var k = 0; k < 5; k++) {
                        wins[i+k][j+k][count] = true;
                    }
                    count++;
                }             
            }
            //反斜线赢法
            for (var i = 0; i < 11; i++) {
                for (var j = 14; j > 3; j--) {
                    for (var k = 0; k < 5; k++) {
                        wins[i+k][j-k][count] = true;
                    }
                    count++;
                }             
            }
            // debugger;
            for (var i = 0; i < count; i++) {
                myWin[i] = 0;
                _myWin[i] = 0;
                computerWin[i] = 0;
                _compWin[i] = 0;
            }
            var chess = document.getElementById("chess");
            var context = chess.getContext('2d');
            context.strokeStyle = '#bfbfbf';    //边框颜色
            var backbtn = document.getElementById("goback");
            var returnbtn = document.getElementById("return");
            window.onload = function() {
                drawChessBoard(); // 画棋盘
            }
            document.getElementById("restart").onclick = function(){
                window.location.reload();
            }
            // 我，下棋
            chess.onclick = function(e){
                if(over){
                    return;
                }
                if(!me){
                    return;
                }
                // 悔棋功能可用
                backbtn.className = backbtn.className.replace(new
                RegExp("(\\s|^)unable(\\s|$)")," ");
                var x = e.offsetX;
                var y = e.offsetY;
                var i = Math.floor(x / 30);
                var j = Math.floor(y / 30);
                _nowi = i;
                _nowj = j;
                if(chressBord[i][j] == 0){
                    oneStep(i,j,me);
                    chressBord[i][j] = 1; //我，已占位置 

                    for (var k = 0; k < count; k++) { // 将可能赢的情况都加1
                        if(wins[i][j][k]){
                            // debugger;
                            myWin[k]++;
                            _compWin[k] = computerWin[k];
                            computerWin[k] = 6; //这个位置对方不可能赢了
                            if(myWin[k] == 5){
                                // window.alert('你赢了');
                                resultTxt.innerHTML = '恭喜，你赢了！';
                                over = true;
                            }
                        }
                    }
                    if(!over){
                        me = !me;
                        computerAI();
                    }
                }
            }
            // 悔棋
            backbtn.onclick = function(e){
                if(!backAble) { return;}
                over = false;
                me = true;
                // resultTxt.innerHTML = 'o(╯□╰)o，悔棋中';
                // 撤销悔棋功能可用
                returnbtn.className = returnbtn.className.replace( new
                RegExp("(\\s|^)unable(\\s|$)")," ");
                // 我，悔
                chressBord[_nowi][_nowj] = 0; //我，已占位置 还原
                minusStep(_nowi, _nowj); //销毁棋子

                for (var k = 0; k < count; k++) { // 将可能赢的情况都减1
                    if(wins[_nowi][_nowj][k]){
                        myWin[k]--;
                        computerWin[k] = _compWin[k]; //这个位置对方可能赢
                    }
                }
                // 计算机相应的悔棋
                chressBord[_compi][_compj] = 0; //计算机，已占位置 还原
                minusStep(_compi, _compj);//销毁棋子

                for (var k = 0; k < count; k++) {// 将可能赢的情况都减1
                    if(wins[_compi][_compj][k]){
                        computerWin[k]--;
                        myWin[k] = _myWin[i];//这个位置对方可能赢
                    }
                }
                resultTxt.innerHTML = '--益智五子棋--';
                returnAble = true;
                backAble = false;
            }
            // 撤销悔棋
            returnbtn.onclick = function(e){
                if(!returnAble){ return;}
                // 我，撤销悔棋
                chressBord[_nowi][_nowj] = 1;//我，已占位置
                oneStep(_nowi,_nowj,me);
                for (var k = 0; k < count; k++) {
                    if(wins[_nowi][_nowj][k]){
                        myWin[k]++;
                        _compWin[k] = computerWin[k];
                        computerWin[k] = 6;//这个位置对方不可能赢
                    }
                    if(myWin[k] == 5){
                        resultTxt.innerHTML = '恭喜，你赢了！';
                        over = true;
                    }
                }
                // 计算机撤销相应的悔棋
                chressBord[_compi][_compj] = 2;//计算机，已占位置
                oneStep(_compi,_compj,false);
                for (var k = 0; k < count; k++) {// 将可能赢的情况都减1
                    if(wins[_compi][_compj][k]){
                        computerWin[k]++;
                        _myWin[k] = myWin[k];
                        myWin[k] = 6;//这个位置对方不可能赢
                    }
                    if(computerWin[k] == 5){
                        resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';
                        over = true;
                    }
                }
                returnbtn.className += '' + 'unable';
                returnAble = false;
                backAble = true;
            }

            // 计算机下棋
            var computerAI = function(){
                var myScore = [];
                var computerScore = [];
                var max = 0;
                var u =0, v = 0;
                for (var i = 0; i < 15; i++) {
                    myScore[i] = [];
                    computerScore[i] = [];
                    for (var j = 0; j < 15; j++) {
                        myScore[i][j] = 0;
                        computerScore[i][j] = 0;
                    }
                }
                for (var i = 0; i < 15; i++) {
                    for (var j = 0; j < 15; j++) {
                        if(chressBord[i][j] == 0){
                            for (var k = 0; k < count; k++) {
                                if(wins[i][j][k]){
                                    if(myWin[k] == 1){
                                        myScore[i][j] += 200;
                                    }else if(myWin[k] == 2){
                                        myScore[i][j] += 400;
                                    }
                                    else if(myWin[k] == 3){
                                        myScore[i][j] += 2000;
                                    }
                                    else if(myWin[k] == 4){
                                        myScore[i][j] += 10000;
                                    }

                                    if(computerWin[k] == 1){
                                        computerScore[i][j] += 220;
                                    }else if(computerWin[k] == 2){
                                        computerScore[i][j] += 420;
                                    }
                                    else if(computerWin[k] == 3){
                                        computerScore[i][j] += 2100;
                                    }
                                    else if(computerWin[k] == 4){
                                        computerScore[i][j] += 20000;
                                    }
                                }                                 
                            }

                            if(myScore[i][j] > max){
                                max = myScore[i][j];
                                u = i;
                                v = j;
                            }else if(myScore[i][j] == max){
                                if(computerScore[i][j]>computerScore[u][v]){
                                    u = i;
                                    v = j;
                                }
                            }

                            if(computerScore[i][j] > max){
                                max = computerScore[i][j];
                                u = i;
                                v = j;
                            }else if(computerScore[i][j] == max){
                                if(myScore[i][j]>myScore[u][v]){
                                    u = i;
                                    v = j;
                                }
                            }
                        }
                    }
                }
                _compi = u;
                _compj = v;
                oneStep(u,v,false);chressBord[u][v] = 2; //计算机占据位置
                for (var k = 0; k < count; k++) {
                    if(wins[u][v][k]){
                        computerWin[k]++;
                        _myWin[k] = myWin[k];
                        myWin[k] = 6; //这个位置对方不可能赢了
                        if(computerWin[k] == 5){
                            resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';
                            over = true;
                        }
                    }
                }
                if(!over){
                    me = !me;
                }
                backAble = true;
                returnAble = false;
                var hasClass = new RegExp('unable').test('' +
                returnbtn.className + '');
                if(hasClass) {
                    returnbtn.className += '' + 'unable';
                }
            }     
            //绘画棋盘
            var drawChessBoard = function(){
                for (var i = 0; i < 15; i++) {
                    context.moveTo(15 + i * 30 , 15);
                    context.lineTo(15 + i * 30 , 435);
                    context.stroke();
                    context.moveTo(15 , 15 + i * 30);
                    context.lineTo(435 , 15 + i * 30);
                    context.stroke();
                }
            }
            //画棋子
            var oneStep = function(i,j,me) {
                context.beginPath();
                context.arc(15 +i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 画圆
                context.closePath();
                //渐变
                var gradient = context.createRadialGradient(15 + i * 30
                + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 -
                2, 0);
                if(me){
                    gradient.addColorStop(0,'#0a0a0a');
                    gradient.addColorStop(1,'#636766');
                }else{
                    gradient.addColorStop(0,'#d1d1d1');
                    gradient.addColorStop(1,'#f9f9f9')
                }
                context.fillStyle = gradient;
                context.fill();
            }
            //销毁棋子
            var minusStep = function(i,j){
                //擦除该圆
                context.clearRect((i) * 30, (j) * 30, 30, 30);
                // 重画该圆周围的格子
                context.beginPath();
                context.moveTo(15+i*30, j*30);
                context.lineTo(15+i*30, j*30 + 30);
                context.moveTo(i*30, j*30+15);
                context.lineTo((i+1)*30, j*30+15);

                context.stroke();
            }
        </script>
    </body>
</html>
复制代码

以上就是JS五子棋游戏的代码，如果有什么问题可以留言给小猿圈web前端讲师，遇到的问题可以直接私聊或者提问前端自学，看到会尽快帮大家解决的。


转载于:https://juejin.im/post/5cd13dfd51882535c90e94af

weixin_34262482
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于flask编写五子棋游戏（纯python）
10-24
功能：网页登陆、数据库验证、双人对战的五子棋小游戏。适用于想学习flask编写网站的初学者，是一个练手的小项目，容易看懂。前端涉及到HTML、css、JavaScript，后端涉及到数据库、python、flask。
js编写的五子棋游戏
10-21
通过研究这个JS编写的五子棋游戏，开发者不仅可以学习到JavaScript编程技巧，还能深入理解游戏逻辑和前端开发中的各种技术应用。这对于提升网页交互开发能力，尤其是游戏开发经验是非常有益的。
js中style.display=""无效的解决方法
10-25
主要介绍了js中style.display=""无效的解决方法,是js程序设计中非常常见的问题,需要的朋友可以参考下
span js增加display_JS效果日记（四）——关闭小广告
weixin_39798943的博客
12-18 79
JS效果日记（四）——关闭小广告简单易懂上代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } #box ...
js将控件隐藏及display属性
编程语言小筑
02-06 172
用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件...
javascript中的显示和隐藏（display属性）
热门推荐
wuxiaobingandbob的专栏
05-12 4万+
display             function hidetext()           {           var mychar = document.getElementById("con");          mychar.style.display="none"; //不显示，隐藏         }           function showtex
为什么css中添加了display:none其它js代码会失效？
weixin_34378922的博客
12-09 330
为什么80%的码农都做不了架构师？>>> ...
C语言编写的五子棋小游戏wuziqi.zip
最新发布
05-12
五子棋游戏想必大家都非常熟悉，游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战，则系统执黑棋，玩家自己执白棋。双方轮流下一棋，先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 ...
js前端五子棋，直接运行，带Ai功能
01-13
在本项目中，"js前端五子棋，直接运行，带Ai功能" 是一个使用JavaScript在前端实现的五子棋游戏。这个应用的核心亮点在于它不仅提供了用户交互的界面，而且具备人工智能（Ai）对战的功能，使得玩家可以与计算机进行...
原生js实现单机五子棋游戏
06-29
在本项目中，“原生js实现单机五子棋游戏”是一个基于JavaScript的简单游戏开发实例，主要展示了如何使用纯JavaScript编程语言来构建一个功能完备的五子棋游戏。五子棋是一种双人对弈的策略型棋类游戏，目标是在棋盘...
js document.getElementsByClassName(“xxx“).style.display
竹毛言己
10-14 3998
## 问题 有一个div标签，通过class拿到该标签后，想隐藏块的内容。 ```js document.getElementsByClassName("xxx").style.display = "none"; ``` 这样写结果发现不生效。 ## 分析 在浏览器里调试了一下，找到这个div，添加display: none可以隐藏该块的内容。这说明不是display: none的问题。 在console里面打印 `document.getElementsByClassName("xxx").st
JS通过display属性实现DOM元素动态显示和隐藏
m0_46814663的博客
05-01 1910
如果在开发过程中不适合使用display属性实现动态显示或隐藏的需求，可以看一下下面这篇文章，采用visiblity属性实现。前言：因为笔者在开发过程中涉及到表格内容需要根据不同显示不同的内容，部分。（实际上不能称为隐藏，页面根本不渲染该DOM元素），且不占用原来的空间，因此使用。属性来实现需求功能。
JS(二)——display属性
初叙
06-16 7347
display——控制显示 none：隐藏 block：显示
JS 控制div的可见和隐藏 display
weixin_50784508的博客
06-11 1688
【代码】JS 控制div的可见和隐藏 display。
关于JS 修改元素 display 属性问题
Sun~Neo
03-12 3万+
JS 修改元素 display 属性 当我们想要使用JS来控制元素 display 属性来使其显示或者隐藏时，需要将 display  属性作用在行间样式上， 并使用 ID 选择器，即  HTML &lt;div id="drop-box" style="display:none"&gt; JS  var dropBox = document.getElementById("dro...
javascript中display方法或者visibility隐藏元素实现的效果
异想实验室|Arduion|ESP8266|Micro Python|
10-26 2587
在前端开发html页面的时候，可以使用js中的修改元素的属性，达到隐藏元素，以及隐藏后的元素的显示的效果；需要修改元素的display方法或者visibility，两种方案实现的效果不同，可参考下图中的GIF动画；以上为，javascript中display方法或者visibility隐藏元素实现的效果全部代码；通过visibility进行隐藏后元素位置任然被占用。设置display隐藏后不占用原来的位置；
span加display:block才能显示
orichisonic的专栏
10-14 2118
display:block; 是让对象成为块级元素(比如a，span等) display有很多对象，具体可以参考http://www.w3school.com.cn/css/pr_class_display.asp 一般都是用display:none和display:block来控制层的显示
js 设置display显示时,样式发生改变
小吉子的开发记录小站
05-02 7956
今天利用js显示隐藏tr时,设置当display为block即显示时,样式发生了改变,原有样式不见了 后来在显示时,将display设置为''时,原样式就没有发生改变。记录一下日后研究。 function ShowKilnNO() { var processCd = cbxProcess.GetValue(); if (processCd ==
如何编写五子棋小游戏 JVA
07-27
要编写一个简单的五子棋小游戏，你可以按照以下步骤进行： 1. 创建一个新的Java项目并命名为"五子棋"。 2. 创建一个主类，例如"Main"类，作为程序的入口点。 3. 定义一个二维数组来表示棋盘，使用数字0表示空白位置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值