JS简易实现五子棋游戏(三)

已于 2023-10-18 19:53:38 修改
阅读量686 收藏 9
点赞数 1
分类专栏： JS实践 文章标签： html5 css3 javascript
于 2023-03-01 02:10:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46514047/article/details/129272541
版权
本文介绍了一款使用JavaScript编写的双人五子棋游戏的改进版，增加了悔棋功能，并对页面效果进行了调整。玩家可以通过点击按钮进行悔棋操作，同时展示了游戏的HTML结构、CSS样式以及JavaScript代码实现。此外，文中还提供了弹窗提示功能，增强了用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、简介

本篇为对 JS实现双人五子棋简易游戏(上) 进行补充，添加了悔棋的功能，并修改部分页面效果。

若想实现人机的游戏方式可以看之前：JS实现五子棋单人双人简易游戏(下) 。

二、效果

三、代码

  1. index.html
<!DOCTYPE HTML>
<html>

<head>
    <title> 五子棋 </title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="stylesheet" href="./css/popup.css">
</head>

<body>

    <div class="centre">
        <canvas id='canvas' class="canvas" width='450' height='450'></canvas>
        <button id="btnNew" class='btn'>新游戏</button>
        <button id='btnClean' class="btn btnClean">悔棋</button>
        <p class="txtClean">tip</p>
    </div>

    <!-- popup -->
    <div id="popup">
        <div class="pop">
            <!-- popup-header -->
            <div class="popup-header">
                <p>tip</p>
                <span id="btnClose" class="close">&times;</span>
            </div>
            <!-- popup-content -->
            <div class="popup-content">
                <p id="popup-txt" ></p>
                <button id="consent">Yes</button>
                <button id="dissent">No</button>
            </div>
            <!-- popup-footer -->
            <div class="popup-footer"></div>
        </div>
    </div>

</body>

<script src="./js/tool.js"></script>
<script src="./js/popup.js"></script>

</html>
  1. style.css

body{
    margin: 0;
    background-color: #eee;
}

.centre{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.canvas{
    display: block; /* 块元素 */
    margin: 20px auto;
    background-color: #946136;
}

.btn{
    position: relative;
    margin: 15px 5px;
    width: 100px;
    height: 35px;
    font-size: 16px;
    color: #000000;
    background-color: #ffffff;
    border-radius:10px; /* 按钮圆角 */
    border: none; /* 按钮边框 */
    box-shadow: 1px 2px 2px #000000; /* 按钮添加阴影 */
}

.btn:hover {/* 按钮鼠标悬停 */
    color: #000000;
    cursor: pointer; /* 显示的光标的类型 */
    box-shadow: 1px 5px 5px #ccc; /* 按钮添加阴影 */
    border: 1px solid #000000; /* 按钮边框 */
}

.btn:active {/* 按钮鼠标点击 */
    border: none; /* 按钮边框 */
    transform: translateY(4px);/*对按钮进行移动*/
}

.txtClean{
    padding: 8px;
    display: inline;  /* 行内元素 */
    border: 2px solid #000000;
}
  1. popup.css

#popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.5);
}

#popup .pop {
    width: 300px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: animate 0.01s;
}

.pop .popup-header {
    height: 42px;
    background: white;
    color: #000;
    line-height: 45px;
    border-bottom: 1px solid #000000;
}

.pop .popup-header p {
    display: inline-block;
    margin: 0;
    position: absolute;
    left: 12px;
}

.pop .popup-header .close {
    position: absolute;
    right: 18px;
    font-size: 20px;
    cursor: pointer;
}

.pop .popup-content {
    background: white;
    height: 90px;
    text-align: center;
}

.pop .popup-content p {
    margin: 0;
    padding: 10px;
}

.pop .popup-content button{
    margin: 10px;
    float: right;
    width: 36px;
    height: 24px;
    color: #000000;
    background-color: #ffffff;
    border-radius: 2px; 
    border: 1px solid #000000; 
    box-shadow: 1px 2px 2px #ccc; 
    cursor: pointer; /* 显示的光标的类型 */
}

.pop .popup-footer {
    position: relative;
    height: 25px;
    background: white;
    border-top: 1px solid #000000;
}

/*添加动画*/
@keyframes animate {
    from {
        top: 0;
        opacity: 0
    }

    to {
        top: 50%;
        opacity: 1
    }
}
  1. tool.js

var canvas = document.querySelector('#canvas');//获取画布元素
var btnNew = document.querySelector('#btnNew');//获取按钮元素
var btnClean = document.querySelector('#btnClean');//获取悔棋按钮
var ctx = canvas.getContext('2d');//获取绘制环境
var chesscolor = ['BLACK','WHITE'];//落子颜色
var step = 0;//记录当前步数
var flag = true;//记录游戏状态
var maparr = [];//记录棋盘状态
var chessXY = [, ];//记录落棋坐标
var txtClean = document.querySelector('.txtClean'); //tip文本
var popup = document.querySelector("#popup"); //弹窗
var btnClose = document.querySelector("#btnClose"); //弹窗关闭按钮
var popupContent = document.querySelector('.popup-content'); //弹窗主体
var popupTxt = document.querySelector('#popup-txt'); //弹窗文本
var consent = document.querySelector("#consent"); //弹窗确认按钮
var dissent = document.querySelector("#dissent"); //弹窗取消按钮
var numClean = 3; //悔棋次数

//检测棋子方向
var mode = [
    [1,0],//水平
    [0,1],//垂直 
    [1,1],//左上右下
    [1,-1]//右上左下
];

//绘制文字
ctx.font="70px Arial";
ctx.fillText('Start Game!',40,235);

//开始新游戏
btnNew.onclick = function(){    
    consent.style.visibility="visible"; //显示弹窗按钮
    dissent.style.visibility="visible"; //显示弹窗按钮
    btnClose.style.visibility = "hidden"; //隐藏弹窗关闭按钮
    popupTxt.innerHTML = "本局是否允许悔棋？"; //修改弹窗文本
    popupContent.style = "height: 90px;"; //修改弹窗高度
    popup.style.display = "block"; //显示弹窗
    startGame();
    cleanChessBoard();
    drawChessBoard();    
};
//悔棋按钮
btnClean.onclick = function(){    
    if(!flag){//判断游戏是否结束
        consent.style.visibility="hidden"; //隐藏弹窗按钮
        dissent.style.visibility="hidden"; //隐藏弹窗按钮
        btnClose.style.visibility="visible"; //显示弹窗关闭按钮
        popupTxt.innerHTML = "Game Over!"; //修改弹窗文本
        popupContent.style = "height: 45px;"; //修改弹窗高度
        popup.style.display = "block"; //显示弹窗            
        return;            

    }else if(numClean != 0){//判断能否悔棋
        cleanChessBoard();
        drawChessBoard();
        cleanChess(chessXY);
    }else{ //悔棋次数为0
        consent.style.visibility="hidden"; //隐藏弹窗按钮
        dissent.style.visibility="hidden"; //隐藏弹窗按钮
        btnClose.style.visibility="visible";
        popupTxt.innerHTML = "Can't do this!"; //修改弹窗文本
        popupContent.style = "height: 45px;";
        popup.style.display = "block";    
        return;
    }        
};

checkchess(canvas);

//开始游戏
function startGame(){
    //记录棋盘状态
    for(var i=0;i<14;i++){
        maparr[i] = [];
        for(var j=0;j<14;j++){
            maparr[i][j] = 0;                
        }    
    }
    flag = true;
    step = 0;
    numClean = 3;
}

//绘制棋盘
function drawChessBoard(){
    for(var i=1;i<15;i++){/*绘制路径*/
        ctx.moveTo(30*i,30);
        ctx.lineTo(30*i,420);
        ctx.moveTo(30,30*i);
        ctx.lineTo(420,30*i);                
    }
    ctx.stroke();/* 绘制(轮廓) */
    ctx.beginPath();/* 提笔 */
}

//清除棋盘
function cleanChessBoard(){
    ctx.fillStyle = '#946136';
    ctx.fillRect(0, 0, canvas.width, canvas.height);    
}

//落子机制
function checkchess(canvas){
    canvas.addEventListener('click',function(e){
        //棋子坐标
        var px = Math.floor((e.offsetX+15)/30)-1;
        var py = Math.floor((e.offsetY+15)/30)-1;

        chessXY[0] = px;chessXY[1] = py;

        //判断游戏是否结束
        if(!flag){
            consent.style.visibility="hidden"; //隐藏弹窗按钮
            dissent.style.visibility="hidden"; //隐藏弹窗按钮            
            btnClose.style.visibility="visible";
            popupTxt.innerHTML = "Game Over!";
            popupContent.style = "height: 45px;";
            popup.style.display = "block";            
            return;
        }
        //检测是否在棋盘上落子
        if((px+1)*30==0 || (py+1)*30==0 || (px+1)*30==450 || (py+1)*30==450){
            return;
        }

        if(maparr[px][py] == 0){
            //落子
            drawchess((px+1)*30,(py+1)*30,chesscolor[step%2]);
            //记录落子颜色
            maparr[px][py] = chesscolor[step%2];
            //检测哪方胜负
            for(var i=0;i<mode.length;i++){
                checkwin(px,py,chesscolor[step%2],mode[i]);
            }
            step++;
        }
    });
}

//悔棋机制
function cleanChess(chessXY){
    //修改棋盘状态
    for(var x=0;x<14;x++){
        for(var y=0;y<14;y++){
            if(maparr[x][y] != 0){
                if(x==chessXY[0] && y==chessXY[1]){
                    maparr[x][y] = 0;    
                    --step;
                    --numClean;
                    txtClean.innerHTML = `tip:本局允许悔棋,剩余 <samp style="color: red;">`+numClean+`</samp> 次`;
                    continue;
                } 
                drawchess((x+1)*30,(y+1)*30,maparr[x][y]);    
            }
    
        }    
    }
}

//绘制棋子
function drawchess(x,y,color){//传入颜色,位置,绘制棋子
    ctx.fillStyle = color;//填充颜色
    ctx.arc(x,y,15,0,Math.PI*2,false);//画圆: 圆心 半径 弧度 逆时针
    ctx.fill();//填充
    //ctx.stroke();
    ctx.beginPath();//提笔    
}

//输赢机制
function checkwin(x,y,color,mode){//状态: 黑 白 没赢    
    var count = 0;//记录个数
    for(var i=1;i<5;i++){
        if(maparr[x+i*mode[0]]){
            if(maparr[x+i*mode[0]][y+i*mode[1]] == color){
                count++;
            }else{
                break;
            }
        }
        
    }
    for(var i=1;i<5;i++){
        if(maparr[x-i*mode[0]]){
            if(maparr[x-i*mode[0]][y-i*mode[1]] == color){
                count++;
            }else{
                break;
            }
        }
    }
    
    //判断个数是否达到胜利个数    
    if(count >= 4){
        consent.style.visibility="hidden"; //隐藏弹窗按钮
        dissent.style.visibility="hidden"; //隐藏弹窗按钮
        btnClose.style.visibility = "visible";
        popupTxt.innerHTML = color + " WIN !";
        popupContent.style = "height: 45px;";
        popup.style.display = "block";            
        ctx.font="70px Arial";
        ctx.fillText("Game Over!",40,235);
        flag = false;//游戏结束
    }

}
  1. popup.js

window.onload = function () {
    var txtClean = document.querySelector('.txtClean');
    var consent = document.querySelector("#consent");
    var dissent = document.querySelector("#dissent");
    var btnClose = document.querySelector("#btnClose");
    var popup = document.querySelector("#popup");

    btnClose.onclick = function () {
        popup.style.display = "none"; // 关闭popup
    }

    consent.onclick = function () {
        popup.style.display = "none";
        txtClean.innerHTML = `tip:本局允许悔棋,剩余 <samp style="color: red;">3</samp> 次`;
        btnClean.disabled = false;
    }

    dissent.onclick = function () {
        popup.style.display = "none";
        txtClean.innerHTML = "tip:本局不允许悔棋";
        btnClean.disabled = true;
    }

}

四、结语

感兴趣的话可以点进来在线试下效果如何 五子棋 )

用JS编写一个简单的五子棋游戏
boolbirdm的博客
09-05 521
简单五子棋游戏，就像小时候课间在纸上玩的一样，我用的是js进行实现
和comate一起，用JavaScript实现一个简易版五子棋小游戏
沃和莱特的博客
05-08 1830
JavaScript复习篇，实现一个简单五子棋小游戏。
JS+canvas实现五子棋人机大战
weixin_33692284的博客
11-29 450
JS+canvas五子棋人机大战 1. 创建实例 function Gobang () { this.over = false; // 是否结束 this.player = true; // true:我 false:电脑 this.allChesses = []; // 所有棋子 this.existC...
前端JS实现五子棋小游戏
最新发布
2401_88691693的博客
04-14 1510
这是一个基于 HTML5、CSS 和 JavaScript 开发的五子棋网页游戏，同时结合了一个网页导航栏、背景音乐播放、视频展示等功能，整体页面设计围绕特定主题（从代码中 “别当欧尼酱了” 等元素推测）。网页主要由头部信息（包含标题、样式表链接等）、导航栏、游戏区域、背景相关元素（音乐、视频）以及用于实现游戏功能的 JavaScript 代码组成。这个网页通过 HTML 构建基本结构，CSS 实现样式美化，JavaScript 完成五子棋游戏的核心逻辑以及音乐播放等功能。
纯JS五子棋（各浏览器兼容）
iteye_8029的博客
04-24 340
纯JS五子棋（各浏览器兼容） 效果图： 代码下载：http://download.youkuaiyun.com/detail/guoxuepeng123/5293751 【纯JS扫雷游戏】：http://blog.youkuaiyun.com/guoxuepeng123/article/details/8848003 【纯JS坦克大战游戏】：http://blog.youkuaiyun.com/guoxue...
JavaScript应用：五子棋游戏实战开发
黑夜开发者的博客
08-10 3941
本篇文章介绍了如何使用JavaScript开发一个简单的五子棋游戏。通过绘制棋盘、实现开始按钮和游戏逻辑、处理用户交互、判断胜负和游戏结束等功能，我们完成了一个基本的五子棋游戏。当然，我们还可以对游戏进行优化和扩展，例如增加悔棋功能、提示下一步最佳落子位置等。JavaScript是一种非常强大和灵活的编程语言，可以用于开发各种类型的应用程序和游戏。希望通过这篇文章，你对使用JavaScript开发游戏有了更深入的了解。如果你对五子棋游戏开发还有任何问题或建议，欢迎在评论区留言讨论。
js五子棋游戏代码分享
weixin_30438813的博客
06-03 762
HTML代码 <canvas id="game"></canvas> CSS代码 * { margin: 0; padding: 0; } #game { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; box-shadow: -2px -2...
js-简易五子棋游戏
07-10
五子棋游戏的棋盘就是通过Canvas实现的，我们需要用JavaScript来控制Canvas绘制棋盘格线，以及棋子的落点。 2. **棋盘结构** 棋盘通常设定为15x15的网格，可以用二维数组来表示，每个元素代表一个棋盘位置，初始值...
基于Python的简易五子棋游戏设计源码
10-04
本项目是一款基于Python的简易五子棋游戏设计源码，整体结构包含90个文件，涵盖了从编程语言到网页前端技术的广泛应用。项目由20个pyc字节码文件组成，这些文件是Python源代码编译后的执行文件，有助于提高程序的...
JavaScript+Canvas实现五子棋简易游戏教程
在解析五子棋源码的过程中，我们可以从中学习到如何使用JavaScript和HTML5的Canvas元素来创建一...通过分析和学习五子棋源码，初学者可以加深对JavaScript和Canvas的理解，同时掌握一个完整游戏项目的设计和实现方法。
js原生五子棋小游戏
11-02
纯js文本编写的五子棋，可以悔棋，人机对战，该文本纯属分享，代码有什么不规范的地方请指点，大神多多指教
js实现五子棋
12-11
使用javaScript语言实现五子棋，操作界面使用Html5实现。简单易懂。
五子棋源码(js+canvas)
12-11
简易的五子棋小游戏 , 由原生JavaScript + canvas 开发, 适合初学者学习js 和canvas的应用!
JS实现五子棋源码全
05-07
搜索算法实现五子棋，是学习JS算法，JS游戏入门的好素材
js五子棋js五子棋
04-27
非常好的游戏源代码js五子棋
JavaSrcipt 五子棋
布伽思索
10-25 341
HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五子棋</title> <style> * { padding: 0; margin: 0; } body{ padding-top: 100px;
纯js简易五子棋
yh_zy的博客
02-08 1332
（代码较为简陋请见谅）这里单独拿出一个绘制好的黑色五子棋展示。
JavaScript游戏——五子棋
webbc的博客
11-01 2104
最近半个月一直在看深入的学习JavaScript，里面有很多重点和难点，比如闭包、词法分析、面向对象等。今天给大家分享一个由JavaScript编写的五子棋游戏，主要用到JavaScript的面向对象、事件委托、闭包等知识，还是挺有分量的，正好可以检测学习的成果。老规矩，先上图，再说话。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值