用JS编写一个简单的五子棋游戏

最新推荐文章于 2025-06-02 16:03:45 发布
原创 最新推荐文章于 2025-06-02 16:03:45 发布 · 604 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #游戏 #开发语言

最近学习了js之后就想着能不能编写出一个网页游戏。
正好想起了小时候课间经常和同桌一起玩的五子棋。

首先我这里用的是表格进行布局

 //构造表格的HTML代码
 var html = "<table cellspacing='0'>";

然后构造下棋的棋格

  //循环生成表格的行和列
      var size = 15;
      for(i=0;i<=size;i++){
        html += "<tr>";
        for(j=0;j<=size;j++){
          var tag= j + "_" + i;
          if(i==size||j==size)
            html += "<td></td>";
          else
            html += "<td><div tag='" + tag + "' class='chessCell'><div></td>";
        }
        html += "</tr>";
      }

注册下棋这个事件

规则是执黑先行，然后黑白交替着下。
这里我的思路是点击之后着色，着色之后就立马改变颜色属性的值，确保下一次着色是相反的颜色。

//注册落子事件
      var color = "black";
      $(".chessCell").on("click", function(){
        var cellItems = $(this).attr("tag").split("_");
        var x = cellItems[0], y = cellItems[1];
        var id = color + "_" + x + "_" + y;
        //this是触发了click事件的DOM元素，$(this)是将该元素转为jQuery对象
        $(this).html("<div id='" + id + "' class='" + color + "Chess'></div>");
        //原生JavaScript的写法，与上一行等价
        //this.innerHTML="<div class='chess'></div>";
        //判断胜负
        if(judgeWin(color))
          alert(color + " win!")
        //交换颜色
        if(color=="black")
          color="white";
        else
          color="black";
      });

最后就是判断输赢啦

这里就是运用简单的对每个方向是否有五个棋子进行判断。
最后返回赢家的颜色，在网页的对话框显示出来。

 //判断胜负
    var judgeWin = function (color){
      var isWin = false;
      $("." + color + "Chess").each(function (){
        //从棋子的id中拿到棋子的颜色和坐标
        var chessInfo = $(this).attr("id").split("_");
        var x = parseInt(chessInfo[1]), y = parseInt(chessInfo[2]);
        //判断右边是否五连
        if($("#" + color + "_" + (x + 1) + "_" + y).length > 0 &&
                $("#" + color + "_" + (x + 2) + "_" + y).length > 0 &&
                $("#" + color + "_" + (x + 3) + "_" + y).length > 0 &&
                $("#" + color + "_" + (x + 4) + "_" + y).length > 0)
          isWin = true;
        //判断下边是否五连
        if($("#" + color + "_" + x + "_" + (y + 1)).length > 0 &&
                $("#" + color + "_" + x + "_" + (y + 2)).length > 0 &&
                $("#" + color + "_" + x + "_" + (y + 3)).length > 0 &&
                $("#" + color + "_" + x + "_" + (y + 4)).length > 0)
          isWin = true;
        //判断右下是否五连
        if($("#" + color + "_" + (x + 1) + "_" + (y + 1)).length > 0 &&
                $("#" + color + "_" + (x + 2) + "_" + (y + 2)).length > 0 &&
                $("#" + color + "_" + (x + 3) + "_" + (y + 3)).length > 0 &&
                $("#" + color + "_" + (x + 4) + "_" + (y + 4)).length > 0)
          isWin = true;
        //判断左下是否五连
        if($("#" + color + "_" + (x - 1) + "_" + (y + 1)).length > 0 &&
                $("#" + color + "_" + (x - 2) + "_" + (y + 2)).length > 0 &&
                $("#" + color + "_" + (x - 3) + "_" + (y + 3)).length > 0 &&
                $("#" + color + "_" + (x - 4) + "_" + (y + 4)).length > 0)
          isWin = true;
        //如果已经赢了，就退出each函数
        //当回调函数返回false，each函数就退出（相当于循环语句的break）
        //当回调函数返回true，each函数继续循环（相当于循环语句的continue）
        if(isWin)
          return false;
      });
      return isWin;
    }

效果展示

棋盘样式

白子赢啦

下面就是期待已久的完整代码啦

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>五子棋</title>
  <style>
    #chessBoard td{
      border:#000000 solid;
      border-width:0px 0px 1px 1px;
      padding: 0px;
      height:20px;
      width:20px;
    }
    #chessBoard table{
      border:#000000 solid;
      border-width:1px 1px 0px 0px;
      background-image: url("wood.jpg");
    }
    .chessCell{
      position:relative;
      top:10px;
      left:10px;
      height: 20px;
      width: 20px;
    }
    .blackChess{
      height: 20px;
      width: 20px;
      background-color:black;
      border-radius:10px;
    }
    .whiteChess{
      height: 20px;
      width: 20px;
      background-color:white;
      border-radius:10px;
    }
  </style>
  <script src="js/jquery-3.1.1.min.js"></script>
  <script>
    $().ready(function (){
      //构造表格的HTML代码
      var html = "<table cellspacing='0'>";
      //循环生成表格的行和列
      var size = 15;
      for(i=0;i<=size;i++){
        html += "<tr>";
        for(j=0;j<=size;j++){
          var tag= j + "_" + i;
          if(i==size||j==size)
            html += "<td></td>";
          else
            html += "<td><div tag='" + tag + "' class='chessCell'><div></td>";
        }
        html += "</tr>";
      }
      html += "</table>";
      //将表格的HTML代码渲染到chessBoard中
      $("#chessBoard").html(html);
      //原生JavaScript的写法，与上一行等价
      //document.getElementById("chessBoard").innerHTML=html;
      //注册落子事件
      var color = "black";
      $(".chessCell").on("click", function(){
        var cellItems = $(this).attr("tag").split("_");
        var x = cellItems[0], y = cellItems[1];
        var id = color + "_" + x + "_" + y;
        //this是触发了click事件的DOM元素，$(this)是将该元素转为jQuery对象
        $(this).html("<div id='" + id + "' class='" + color + "Chess'></div>");
        //原生JavaScript的写法，与上一行等价
        //this.innerHTML="<div class='chess'></div>";
        //判断胜负
        if(judgeWin(color))
          alert(color + " win!")
        //交换颜色
        if(color=="black")
          color="white";
        else
          color="black";
      });
    });

    //判断胜负
    var judgeWin = function (color){
      var isWin = false;
      $("." + color + "Chess").each(function (){
        //从棋子的id中拿到棋子的颜色和坐标
        var chessInfo = $(this).attr("id").split("_");
        var x = parseInt(chessInfo[1]), y = parseInt(chessInfo[2]);
        //判断右边是否五连
        if($("#" + color + "_" + (x + 1) + "_" + y).length > 0 &&
                $("#" + color + "_" + (x + 2) + "_" + y).length > 0 &&
                $("#" + color + "_" + (x + 3) + "_" + y).length > 0 &&
                $("#" + color + "_" + (x + 4) + "_" + y).length > 0)
          isWin = true;
        //判断下边是否五连
        if($("#" + color + "_" + x + "_" + (y + 1)).length > 0 &&
                $("#" + color + "_" + x + "_" + (y + 2)).length > 0 &&
                $("#" + color + "_" + x + "_" + (y + 3)).length > 0 &&
                $("#" + color + "_" + x + "_" + (y + 4)).length > 0)
          isWin = true;
        //判断右下是否五连
        if($("#" + color + "_" + (x + 1) + "_" + (y + 1)).length > 0 &&
                $("#" + color + "_" + (x + 2) + "_" + (y + 2)).length > 0 &&
                $("#" + color + "_" + (x + 3) + "_" + (y + 3)).length > 0 &&
                $("#" + color + "_" + (x + 4) + "_" + (y + 4)).length > 0)
          isWin = true;
        //判断左下是否五连
        if($("#" + color + "_" + (x - 1) + "_" + (y + 1)).length > 0 &&
                $("#" + color + "_" + (x - 2) + "_" + (y + 2)).length > 0 &&
                $("#" + color + "_" + (x - 3) + "_" + (y + 3)).length > 0 &&
                $("#" + color + "_" + (x - 4) + "_" + (y + 4)).length > 0)
          isWin = true;
        //如果已经赢了，就退出each函数
        //当回调函数返回false，each函数就退出（相当于循环语句的break）
        //当回调函数返回true，each函数继续循环（相当于循环语句的continue）
        if(isWin)
          return false;
      });
      return isWin;
    }
  </script>
</head>
<body>
<!--设置一个棋盘容器，整个游戏渲染到容器内部-->
<div id="chessBoard"></div>
</body>
</html>

最后温馨提示一下：棋盘的背景图片需要自己diy一下哦
在这里插入图片描述

用js写的简便五子棋（含人机）
09-13
用js写的简便五子棋（含人机用到了三维数组）,希望对大家会有帮助！
JS+canvas实现五子棋人机大战
weixin_33692284的博客
11-29 484
JS+canvas五子棋人机大战 1. 创建实例 function Gobang () { this.over = false; // 是否结束 this.player = true; // true:我 false:电脑 this.allChesses = []; // 所有棋子 this.existC...
纯js简易五子棋
yh_zy的博客
02-08 1435
（代码较为简陋请见谅）这里单独拿出一个绘制好的黑色五子棋展示。
JS之五子棋游戏
秀玉轩晨的博客
06-08 1197
JS代码var obox = document.getElementById("box"), arr = Array.apply(null,{length:20}), divWid = obox.offsetWidth / arr.length, oposi = obox.querySelector(".kuang .show"), pieces = obox.qu...
JavaScript应用：五子棋游戏实战开发
黑夜开发者的博客
08-10 4178
本篇文章介绍了如何使用JavaScript开发一个简单的五子棋游戏。通过绘制棋盘、实现开始按钮和游戏逻辑、处理用户交互、判断胜负和游戏结束等功能，我们完成了一个基本的五子棋游戏。当然，我们还可以对游戏进行优化和扩展，例如增加悔棋功能、提示下一步最佳落子位置等。JavaScript是一种非常强大和灵活的编程语言，可以用于开发各种类型的应用程序和游戏。希望通过这篇文章，你对使用JavaScript开发游戏有了更深入的了解。如果你对五子棋游戏开发还有任何问题或建议，欢迎在评论区留言讨论。
一个单机五子棋游戏的源代码，由java编写FiveQi.zip
05-12
五子棋游戏想必大家都非常熟悉，游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战，则系统执黑棋，玩家自己执白棋。双方轮流下一棋，先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 ...
和comate一起，用JavaScript实现一个简易版五子棋小游戏
沃和莱特的博客
05-08 1971
JavaScript复习篇，实现一个简单五子棋小游戏。
五子棋inhtml5是一款使用Javascript开发的开源小游戏
08-10
在五子棋游戏中，JavaScript负责处理用户交互、游戏逻辑、棋盘渲染等核心功能。通过事件监听，JavaScript能够捕捉到用户的鼠标点击，判断落子位置是否合法，并更新棋盘状态。同时，游戏逻辑如五子连珠的检测、AI对弈...
原生js实现单机五子棋游戏
06-29
在本项目中，“原生js实现单机五子棋游戏”是一个基于JavaScript的简单游戏开发实例，主要展示了如何使用纯JavaScript编程语言来构建一个功能完备的五子棋游戏。五子棋是一种双人对弈的策略型棋类游戏，目标是在棋盘...
使用 C# 编写的五子棋游戏
最新发布
qq_33644799的博客
06-02 1544
棋盘尺寸：支持 9x9 或 15x15 的棋盘。游戏目标：两位玩家轮流在棋盘上放置棋子，率先在横向、纵向或对角线上形成连续五子的一方获胜。
纯Js写的五子棋
04-24
纯Js写的五子棋 各个浏览器兼容 各个浏览器兼容
JS实现五子棋源码全
05-07
搜索算法实现五子棋，是学习JS算法，JS游戏入门的好素材
js实现五子棋
12-11
使用javaScript语言实现五子棋，操作界面使用Html5实现。简单易懂。
基于JavaScript实现五子棋游戏
10-18
主要为大家详细介绍了基于JavaScript实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript 五子棋
xidianyueyong的博客
09-29 922
html： 无标题文档 play.js: // JavaScript Document var black=new Image(); var white=new Image(); black.src='2.gif'; white.src='1.gif'; var timer=null; var i=0; var map=[]; for(var j=0;j<14;
Javascript实现五子棋
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 282
Javascript实现五子棋
js实现五子棋小游戏
clf20731的博客
06-16 1648
html、css、js实现五子棋小游戏
使用JS编写的五子棋游戏入门指南
以下将详细介绍这些知识点，以帮助理解如何使用JavaScript来构建一个基本的五子棋游戏。 ### 知识点一：HTML页面布局 首先，我们需要构建一个HTML页面来承载棋盘和游戏逻辑。棋盘通常是用二维的表格来表示，而每个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值