javascript开发五指棋和围棋

最新推荐文章于 2024-07-12 16:55:56 发布
最新推荐文章于 2024-07-12 16:55:56 发布
阅读量1.2k 收藏 2
点赞数 3
分类专栏： Js 文章标签： 前端 javascript 数据 js 游戏程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34297287/article/details/125565919
版权

javascript开发五指棋和围棋

javascript开发的五指棋和围棋的规则如下：

游戏规则：点击一下下面的方块会变一个颜色，第二次点击会变成另一种颜色，两种颜色交替进行，双击是悔棋！

1.html部分如下（用来布局显示的页面效果）：

                    <h3>五指棋/围棋</h3>
                    <p>游戏规则:点击一下下面的方块会变一个颜色，第二次点击会变成另一种颜色！两种颜色交替进行！双击是悔棋！</p>
                    <div class="games_2_con" id="game_yue1">
                       <table id="yue_2">
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
          <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
          <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                       </table>
                    </div>
                </div>

这里用table表格进行布局，可以根据实际的情况来增加或者减少表格的行或者列；

2.CSS部分代码如下（用来设置html显示出来的样子）：

table { border-spacing:0; border-collapse:collapse;}
.games_2_con{width:100%;height:400px;border:1px dashed #808080;}
.games_2_con table tr{width:100%;height:20px;}
.games_2_con table td{width:20px;height:20px;border:1px solid #808080;}

这里用来给表格赋予样式，也是能根据实际情况来给不同颜色、不同大小的展现样式；

3.javascript/js部分代码如下（用来写五指棋/围棋的功能逻辑）：

//五指棋/围棋
var yue_table = document.getElementById("yue_2");
var yue_num = 1;
yue_table.onclick = function (e) {
    e.target.style.background = yue_num++ % 2 ? "#808080" : "#000";
};
yue_table.ondblclick = function (e) {
    e.target.style.background = "#fff";
};

这里赋予五指棋/围棋的规则逻辑，如果需要设计更为复杂的规则的话，也都可以在这个的基础上面进行修改；


五指棋/围棋的效果如下：

图1

关注公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；


 

月影WEB
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
原生Javascript实现五子棋
qq_41961383的博客
08-26 3539
原生Javascript实现五子棋
JS——五子棋
weixin_64948861的博客
05-12 743
一、js运用 示例：用js代码来进行页面的描绘，画图，判断，以及循环判断 二、使用步骤 1.引入库 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } canvas{ margin: 0 auto; /
JavaScript实现三子棋
m0_57524066的博客
07-23 275
使用js简单实现三子棋过程介绍
原生JavaScript实现五子棋（直接上代码干货点赞收藏拿走）
lin123_00的博客
06-15 1645
HTML页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no"> <title>五子棋</title> &lt
JS五子棋（AI）
whrjxyygx的专栏
07-24 773
JS五子棋的简单AI实现
JavaScript-canvas绘制五子棋
air_shark
04-16 406
使用JavaScript的canvas绘制五子棋。
五子棋-单机游戏-微信小游戏项目开发入门
TA远方
03-03 5601
五子棋小游戏，入门简单，手把手教做微信小游戏，小程序
js和canvas实现五子棋
m0_50712156的博客
06-27 189
使用canvas画布画出基础的页面 <h3 class="title">--五子棋--</h3> <canvas class="chess" width="450px" height="450px"></canvas> <div> <a onclick="res()">重新开始</a> </div> css把它们垂直居中 .title{
写一个微信小程序可以玩五子棋
weixin_42589700的博客
02-14 509
当然可以！开发微信小程序是需要掌握相关的编程知识和技巧的，比如熟悉小程序的开发环境、了解微信小程序的开发语言(如：JavaScript、WXML、WXSS)以及前端框架(如：Vue、React)。 五子棋是一个非常经典的棋类游戏，因此它的实现方式非常多，下面给出一种简单的实现方法： 创建一个二维数组，用来储存棋盘上的棋子情况； 在界面上画出棋盘，并使用循环语句将二维数组中的数据展示在棋盘上； 编...
canvas五子棋制作
qq_49721447的博客
01-28 387
canvas制作五子棋 全部代码下载地址： 运行截图 说明 使用canvas制作五子棋，主要使用到鼠标点击事件，获取鼠标点击在canvas中的坐标，然后在将该坐标进行变化，将其变为距离点击位置最近的的一个角的坐标（一个矩形有四个角，鼠标点击在棋盘的某个矩形上），之后开始绘制棋子，再使用一个东西判断是否切换棋子颜色，每次下棋都进行胜负判定，当满足条件时，显示结果。 主要代码展示 该代码作用是将鼠标点击位置的坐标转化为相对画布原点的坐标。 c.addEventListener("click",
基于JavaScript实现五子棋 AI【100012595】
06-05
极大极小值算法的五子棋AI实现。使用了极大极小值搜索、Alpha Beta剪枝、启发式评估函数、Zobrist缓存、迭代加深、...等算法，对性能进行了优化，置换表其实就是最常见的一种性能优化方式。他不不会对棋力有负面影响...
基于qt编写的五子棋和围棋游戏.zip
04-22
自1991年首次推出以来，Qt因其卓越的跨平台能力、丰富的功能集、高效的开发工具和良好的社区支持而广受开发者欢迎。以下是对Qt技术的详细介绍： 核心特性 跨平台性： Qt设计的核心理念是“一次编写，到处运行”。...
JavaScript - 人工智能 五子棋AI篇
06-10
它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。阿尔法围棋（AlphaGo）是第一个击败人类职业围棋选手、第一个战胜围棋世界冠军的人工智能程序。让人工智能闻名天下。...
wegame1:cocoscreator 微信小游戏 五子棋 客户端
05-01
CocosCreator是一款由Cocos2d-x团队开发的全方位2D游戏开发工具，它集成了编辑器、物理引擎、粒子系统、动画编辑等多方面的功能，支持JavaScript和TypeScript语言编写游戏逻辑。CocosCreator的优势在于其强大的可视...
微信小程序项目实例——双人五子棋
05-28
小程序基于JavaScript、WXML（WeChat Markup Language）和WXSS（WeChat Style Sheets）三大部分，这使得开发者能够利用熟悉的前端技术栈进行开发。WXML负责数据绑定和结构渲染，WXSS则用于样式定义，而JavaScript则...
OpenSNN推文：近期优质博客推荐汇总
最新发布
opensnn的博客
07-12 303
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
前端技术学习记录-基础知识（二）JavaScript基本语法
adanjeep的博客
07-11 204
/ 声明一个String类型的变量name name = "Alice";// 初始化变量name int age;// 声明一个int类型的变量age age = 25;// 初始化变量age。静态强类型：Java语言，在申明变量时，需要明确定于变量的类型。对明确申明的变量，需要做强制转换，才会发生变化，否则不变。//数字 a = "hahaha";//字符串 </script>动态弱类型语言：变量可以存放在不同类型的值（动态）=== 比较相等（不会进行隐式类型转换）>>> 无符号右移（逻辑右移）
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 278
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
微信小程序开发笔记之”表单读不出数据“解决指南
qq_46396470的博客
07-12 308
脑瓜子好了后，忘记了表单控件必须要加上。提交后打印的字典是空的，卡了十几分钟。
五子棋开发要求和需求及代码
04-13
开发五子棋的要求和需求包括但不限于以下几点： ...比如，使用 Python 语言和 PyQt5 开发桌面应用，或使用 JavaScript 和 Vue.js 开发网页版游戏等等。具体的实现细节需要根据具体的需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

月影WEB

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

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

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

打赏作者

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

抵扣说明：

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

余额充值