HTML小游戏五子棋（附源码）

已于 2024-03-05 02:04:55 修改
阅读量1.2w 收藏 191
点赞数 32
分类专栏： 游戏 文章标签： html css javascript
于 2022-11-27 00:14:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75482500/article/details/128059490
版权

步骤：首先在桌面新建一个文本文档，然后把完整代码复制进去，保存并关闭。接着把文件的后缀改为html，双击即可看到游戏界面。

https://www.xiuzunyun.com/carticon-default.png?t=N7T8https://www.xiuzunyun.com/cart

效果：
点击一个格子就可以下棋了，你下完一步AI会自动下，加油！

如果不使用一些技巧，还是很难战胜计算机的，快去试试吧。

完整源码： 

<!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>
        <h3 id="result-wrap">--AI五子棋--</h3>
        <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>

玖疯子
关注
  • 32
    点赞
  • 踩
  • 191
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
专栏目录
前端技术搭建五子棋游戏（内含源码）
官方推荐
07-06 5万+
基于HTML、CSS、JS前端基础技术搭建人机五子棋游戏；
Html网页小游戏源代码
爱编程的鱼的博客
04-12 1303
【代码】Html网页小游戏源代码。
html小游戏--纯页面html小游戏贪吃蛇（基础版）
nanZhaiXiaoLang的博客
02-24 1万+
直接复制到一个页面就行了 代码如下： <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta charset="UTF-8"> <meta name="keywords" content="贪吃蛇"> <meta name="Description" content="这是一个初学者用来学习的小游戏"> <style type="text/cs
(附源码)HTML+JavaScript+Canvas编写2D小游戏
qq_43059415的博客
06-16 1284
（附源码）使用HTML+JavaScript+Canvas编写2D小游戏。第一次写文章，可能有些地方存在问题，如有不对的地方也请帮忙指出，谢谢。
html做的小游戏,41个用HTML5制作完成的游戏作品
weixin_32129187的博客
05-30 9599
了解的人都应该知道HTML5有大量的动画和交互功能，完全可以用来完成一些游戏类的操作，今天收集分享：41个用HTML5制作完成的游戏作品，希望其中有你喜欢和需要的，或者可以给你带来灵感的。1-Pirateslovedaisies2-Torus3-Blobby4-Blinkwang5-space pirat killer6-Agent 8 ball7-sketch out8-Manic Space ...
Html贪吃蛇游戏 手把手（简易版）
qq_44640575的博客
03-29 1941
游戏最终效果的样子，其实并不难，组成部分有游戏区域，蛇，食物,重新开始按钮、游戏规则。
html五子棋游戏（附源码）
热门推荐
皮小孩的博客
01-18 1万+
html+css+js实现五子棋人机对战，有完整源码。
html实现扫雷小游戏(附源码)
xcLeigh
11-17 7415
html实现扫雷小游戏(附源码)，html扫雷小游戏，仿制windows xp系统自带的扫雷应用的网页版，使用html+js+css实现。实现了应用版扫雷的基本功能。
html-五子棋小游戏-源码
09-07
总结起来，"html-五子棋小游戏-源码"是一个利用HTML5、JavaScript以及CSS3技术实现的在线五子棋游戏。通过解压并运行，用户不仅可以直接体验游戏，还可以学习和研究源码，了解这些Web技术如何构建一个完整的交互式...
五子棋微信网页小游戏源代码
06-02
【五子棋微信网页小游戏源代码】是一款专为手机微信平台设计的HTML5小游戏，它提供了丰富的游戏体验，用户可以直接在微信内置的浏览器中进行游玩，无需下载安装额外的应用程序。这款源代码对于想要学习微信小游戏...
五子棋小游戏HTML5
07-24
在本项目中，我们讨论的是一个基于HTML5技术开发的五子棋小游戏。这款小游戏具有基本的五子棋规则，并提供了重新开始和撤销操作的功能，为玩家提供了方便且有趣的在线体验。下面将详细介绍HTML5五子棋小游戏的相关...
五子棋小游戏HTML5源码.zip
10-09
【五子棋小游戏HTML5源码.zip】是一个包含HTML5技术实现的五子棋小游戏的源代码包。这个源码提供了完整的五子棋游戏逻辑，适用于网页开发学习者或者想要制作简单网页游戏的开发者。HTML5是现代网页开发的核心技术之...
【HTML】iframe
小秀的博客
07-24 442
标签是 HTML 中的⼀个元素，⽤于在当前 HTML ⽂档中嵌⼊另⼀个 HTML ⽂档。它可以在⼀个 HTML ⻚⾯中嵌⼊另⼀个 HTML ⻚⾯或其他类型的⽂档，⽐如 PDF ⽂件或视频⽂件。其中 src 属性指定要嵌⼊的⽂档的 URL，可以是⼀个 HTML ⻚⾯、⼀个 PDF ⽂件或⼀个视频⽂件等等。通过设置 width 和 height 属性可以指定。
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3389
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 1129
iframe 预览邮件 + 打印邮件 + 模拟滚动条
初识HTML文件，创建自己的第一个网页！
2301_79959126的博客
07-24 1068
本文旨在初步介绍HTML（超文本标记语言），帮助读者理解HTML中的相关术语及概念，并使读者在完成本文的阅读后可以快速上手编写一个属于自己的简易网页。
python五子棋小游戏的源码
05-22
以下是一个简单的 Python 五子棋小游戏的源码： ```python import numpy as np BOARD_SIZE = 15 # 棋盘大小 EMPTY = 0 # 空棋子 BLACK = 1 # 黑棋子 WHITE = 2 # 白棋子 class Board: def __init__(self): self.board = np.zeros((BOARD_SIZE, BOARD_SIZE), dtype=int) self.current_player = BLACK def place(self, x, y): if self.board[x][y] == EMPTY: self.board[x][y] = self.current_player self.current_player = WHITE if self.current_player == BLACK else BLACK return True else: return False def check_win(self): for i in range(BOARD_SIZE): for j in range(BOARD_SIZE): if self.board[i][j] != EMPTY: # 横向 if j <= BOARD_SIZE - 5: if self.board[i][j] == self.board[i][j+1] == self.board[i][j+2] == self.board[i][j+3] == self.board[i][j+4]: return self.board[i][j] # 纵向 if i <= BOARD_SIZE - 5: if self.board[i][j] == self.board[i+1][j] == self.board[i+2][j] == self.board[i+3][j] == self.board[i+4][j]: return self.board[i][j] # 左上到右下 if i <= BOARD_SIZE - 5 and j <= BOARD_SIZE - 5: if self.board[i][j] == self.board[i+1][j+1] == self.board[i+2][j+2] == self.board[i+3][j+3] == self.board[i+4][j+4]: return self.board[i][j] # 右上到左下 if i >= 4 and j <= BOARD_SIZE - 5: if self.board[i][j] == self.board[i-1][j+1] == self.board[i-2][j+2] == self.board[i-3][j+3] == self.board[i-4][j+4]: return self.board[i][j] return EMPTY class Game: def __init__(self): self.board = Board() def start(self): while True: self.print_board() x, y = input(f"请 {self.board.current_player} 玩家下棋（x,y）：").split(',') x, y = int(x), int(y) if 0 <= x < BOARD_SIZE and 0 <= y < BOARD_SIZE: if self.board.place(x, y): winner = self.board.check_win() if winner != EMPTY: self.print_board() print(f"{winner} 玩家获胜！") break else: print("此处已经有棋子了，请重新下棋！") else: print("坐标范围不正确，请重新输入！") def print_board(self): print(" ", end="") for i in range(BOARD_SIZE): print(i, end=" ") print() for i in range(BOARD_SIZE): print(i, end=" ") for j in range(BOARD_SIZE): if self.board.board[i][j] == BLACK: print("●", end=" ") elif self.board.board[i][j] == WHITE: print("○", end=" ") else: print("+", end=" ") print() if __name__ == '__main__': game = Game() game.start() ``` 使用方法： - 下载源码并保存到本地； - 在终端或命令行窗口中进入源码所在目录； - 输入 `python gomoku.py` 命令运行程序； - 根据提示输入坐标下棋。 注意：此程序为简单版本，可能存在一些小问题，欢迎大家提出改进意见。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玖疯子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值