HTML实现五子棋小游戏

最新推荐文章于 2023-01-12 16:11:10 发布
最新推荐文章于 2023-01-12 16:11:10 发布
阅读量437 收藏 5
点赞数 1
文章标签： html javascript css
原文链接：https://blog.csdn.net/qq_44731019/article/details/109586730
版权

话不多说，直接上代码

<!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: #fff;
                background-color: #EE82EE;
                border-radius: 5px;
                cursor: pointer;
            }
            div.unable span { 
                background: #D6D6D4; 
                color: #adacaa;
            }
            #result-wrap {text-align: center;}
        </style>
    </head>
    <body>
        <canvas id="chess" width="450px" height="450px"></canvas>
        <div class="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" charset="utf-8">
            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>

跨时空思念ღ
关注
HTML制作五子棋
emptyset的博客
09-17 675
/ window.webtools-static-lert('你赢了');k++){ // 将可能赢的情况都减1。k++){ // 将可能赢的情况都减1。
html五子棋游戏
01-17
用html+canvas+js写的五子棋游戏，黑白棋可以轮流落子。文件内包含双人版和人机版，人机版运用到了一些智能算法。可直接在chrome上运行。
html实现五子棋游戏
路在前方
10-31 6240
实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px
Javascript和HTML5 利用canvas构建 Web五子棋游戏程序设计【图文说明】
weixin_33994429的博客
12-09 960
  HTML5 利用canvas构建 Web五子棋游戏程序设计 这只是一个简单的javascript和HTML5小程序，没有实现人机对战。 五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子，数组元素值为1表示该元素对应的落子点有白棋子，数组元素值为2表示该元素对应的落子点有黑棋子；  判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二...
HTML写一个五子棋小游戏
weixin_48274491的博客
01-12 1005
五子棋
Html实现五子棋小游戏
最新发布
04-29
HTML实现五子棋小游戏是一个利用前端技术构建的互动娱乐项目，主要依赖于HTML、CSS和JavaScript这三种核心技术。下面将详细介绍HTML在实现五子棋游戏中的应用及其相关知识点。 一、HTML基础知识 HTML（HyperText ...
html-五子棋小游戏-源码
09-07
【HTML五子棋小游戏】是一种基于纯Web技术开发的在线娱乐项目，主要利用HTML、JavaScript（简称JS）以及HTML5的一些特性实现。这个小游戏无需安装任何客户端，只需将压缩包解压后在浏览器中打开，就能立即体验到...
NodeJs+HTML5+Web Socket实现五子棋小游戏
01-29
NodeJs+HTML5+Web Socket实现五子棋小游戏 1.npm install 2. nodemon/node index.js 问题解决方法：因为将node_modules一起上传了，大家如果不能启动可以删掉node_modules，然后在npm install就ok了。
HTML5网页版五子棋小游戏源码下载.zip
08-30
HTML5网页版五子棋小游戏源码下载是一个包含所有必要组件和资源的压缩包，用于构建一个纯HTML5实现的在线五子棋游戏。这款小游戏可以让用户在网页上与电脑或者其他玩家对战，体验五子棋的乐趣。源码通常包括HTML、...
五子棋小游戏HTML5
07-24
在本项目中，我们讨论的是一个基于HTML5技术开发的五子棋小游戏。这款小游戏具有基本的五子棋规则，并提供了重新开始和撤销操作的功能，为玩家提供了方便且有趣的在线体验。下面将详细介绍HTML5五子棋小游戏的相关...
HTML5五子棋游戏
12-02
这是一款HTML5实现的五子棋游戏源码，不仅游戏画面非常华丽，而且可以自己设置难度，另外还可以选择人机对战还是人人对战，这款HTML5五子棋游戏绝对称得上HTML5游戏中的极品！另外，对于研究HTML5游戏开发的朋友来说，这款HTML5五子棋游戏源码也是绝佳的参考
用HTML5写的五子棋游戏
10-11
比较简单地实现了五子棋游戏，两人轮流下，判断胜负。
html实现五子棋
02-10
使用html和css实现五子棋 /**五子棋 * 思路： * 1.棋盘设置：使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件：当页面被点击时，获取点击的x,y像素点,根据此像素点进行判断，再在合适位置绘制黑白棋子，黑子棋子均是使用canvas绘制的 * 3.保存落子记录：将数据存入一个二维数组，x和y表是落子坐标，1为白棋，2为黑棋，0代表此处无棋子，只有没有棋子的才能落子 * 4.判断输赢：每次落子后以此坐标分别向左右，上下，右下，右上进行判断，设参数count，遇到同色棋子+1，遇到空格或不同色棋子终止，当count=5时，游戏结束 * 20150930 */ /**全局参数初始化
五子棋html版（源码）
04-05
五子棋html5版，喜欢可以试试
JS网页游戏五子棋源码.html
10-23
JS五子棋，界面简洁美观，适合学习JavaScript游戏编程，五子棋游戏是一款很益智的游戏，很多朋友都喜欢！鼠标点击网格节点即可开始下棋。
html实现五子棋游戏,纯JS实现五子棋游戏兼容各浏览器(附源码)
weixin_30468419的博客
06-02 1037
纯JS五子棋(各浏览器兼容)效果图：HTML代码五子棋.wrapper {width: 600px;position: relative;}/* 棋盘 */div.chessboard {margin: 30px 0 0 50px;width: 542px;background: url(http://sandbox.runjs.cn/uploads/rs/102/r2dy3tyw/chessbo...
HTML5实现的五子棋游戏
GBin1中文互联
11-07 331
    在线演示1  
实训第一天-------五子棋游戏
LLJ960786372的博客
07-03 2725
五子棋游戏 style="border: 2px solid #abcabc">     作者：offline     时间：2017-07-03     描述：使用js代码控制游戏逻辑     --> //获取canvas的标签 var ChessCanvas = document.getElementById("myCanvas"); //获取画布 v
基于HTML5的五子棋游戏
qq_39395252的博客
07-03 1089
夏日炎炎，迎来了我们暑期实训。老师教我们做关于HTML5的五子棋游戏。我的内心是痛苦的，第一天温度高达37度。不过还是学到了一些东西。下面就是今天的收获。非完整代码。        五子棋游戏           style="border: 2px solid #abcabc">          作者：offline      时间：2017-07-03
用HTML打造五子棋小游戏教程
资源摘要信息:"Html实现五子棋小游戏" 知识点一：Html基础 Html（超文本标记语言）是一种用于创建网页的标准标记语言。在实现五子棋小游戏时，Html主要用于构建游戏的界面。Html中常用的标签包括（定义文档的头部...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值