JavaScript:js实现在线五子棋人机(人人)对弈

在线五子棋人机对弈

全部使用前端技术,使用HTML,CSS以及JS进行实现.

棋盘在后端就是一个15*15的二维数组

页面设计

请添加图片描述

页面设计的比较粗糙

主要使用js自带的canvas画布进行绘画

HTML代码如下:

<div class="outer"><canvas id="canvas" height="900" width="900"></canvas><div class="button"><div id="reset"><button v-on:click="reset()">重试</button></div><!-- <div id="check"><button v-on:click="check()">开始</button></div> --><div id="jump"><button v-on:click="jump()">玩家本地对战</button></div></div>
</div>

CSS样式设计如下:

给canvas加了个居中和看上去像棋盘的颜色

按钮使用fixed布局跟随视口移动

#canvas {margin: 0 auto;display: block;margin: auto;background:burlywood ;border: 5px solid black;border-radius: 5px;
}.outer {background: grey;padding: 20px;
}.button{position: fixed;top: 100px;left: 100px;
}.button button{color: black;font-size: 20px;background-color:powderblue
}#reset{float: left;
}#check{float: left;margin-left: 10px;
}

JS代码如下:

简而言之:就是画了一堆横线和竖线

var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");for (let index = 0; index <= 15; index += 1) {ctx.moveTo(0, 60 * index);ctx.lineTo(900, 60 * index);ctx.stroke()ctx.moveTo(60 * index, 0);ctx.lineTo(60 * index, 900);ctx.stroke()};

落子

效果如下

请添加图片描述

同样使用canvas进行绘画,代码如下

 canvas.addEventListener('click', e => {//获取坐标距离父级的偏移量var { offsetX, offsetY } = e;//边界判断 不能点击格子外面的范围if (offsetX < 30 || offsetY < 30 || offsetX > 870 || offsetY > 870) {return;} else if (flag === "black") {let x = Math.round(e.offsetX / 60) * 60;let y = Math.round(e.offsetY / 60) * 60;if (arr[y / 60][x / 60] != 0) {alert("此处已有棋子")return;}arr[y / 60][x / 60] = "black";ctx.fillStyle = '#000';ctx.beginPath();ctx.arc(x, y, 20, 0, 2 * Math.PI)ctx.fill();ctx.closePath();if (test()) {return;}// setTimeout(//     () => {//         clear(arrai);//         aitest();//         ai();//     }//     , 100);flag = "white"} else {let x = Math.round(e.offsetX / 60) * 60;let y = Math.round(e.offsetY / 60) * 60;if (arr[y / 60][x / 60] != 0) {alert("此处已有棋子")return;}arr[y / 60][x / 60] = "white";ctx.fillStyle = '#fff';ctx.beginPath();ctx.arc(x, y, 20, 0, 2 * Math.PI)ctx.fill();ctx.closePath();test();flag = "black";}});

给页面的鼠标点击绑了个监听事件.

画棋子也是依靠canvas实现

就是相当于先画一个圆,再往里面填颜色.

 ctx.fillStyle = '#000';ctx.beginPath();ctx.arc(x, y, 20, 0, 2 * Math.PI)ctx.fill();ctx.closePath();

判断输赢

js逻辑判断,代码如下

就是遍历棋盘,然后判断横向纵向以及斜向是否连成五子

 function test() {let countx = 1;for (let i = 0; i <= 14; i++) {for (let j = 0; j <= 14; j++) {if (arr[i][j] !== 0 && arr[i][j] === arr[i][j + 1]) {countx++;if (countx == 5) {alert(flag == "black" ? "黑棋获胜" : "白棋获胜");setTimeout(() => location.reload(), 1000);return true;}} else {countx = 1;}}}let county = 1;for (let j = 0; j <= 14; j++) {for (let i = 0; i <= 14; i++) {if (arr[i][j] !== 0 && arr[i][j] === arr[i + 1][j]) {county++;if (county == 5) {alert(flag == "black" ? "黑棋获胜" : "白棋获胜");setTimeout(() => location.reload(), 1000);return true;}} else {county = 1;}}}let countob = 1;let orii = 0;let orij = 0;for (let i = 0; i <= 14; i++) {for (let j = 0; j <= 14; j++) {if (arr[i][j] === arr[i + 1][j + 1]) {orii = i;orij = j;while (1 <= i <= 14 && j <= 14) {if (arr[i][j] === arr[i + 1][j + 1] && arr[i][j] !== 0) {countob++;// console.log(countob);i++;j++;if (countob == 5) {alert(flag == "black" ? "黑棋获胜" : "白棋获胜");setTimeout(() => location.reload(), 1000);return true;}} else {break;}}i = orii;j = orij;countob = 1;}}}let countob1 = 1;let orii1 = 0;let orij1 = 0;for (let i = 1; i <= 14; i++) {for (let j = 0; j <= 14; j++) {if (arr[i][j] === arr[i + 1][j - 1]) {orii = i;orij = j;while (i <= 14 && 1 <= j <= 14) {if (arr[i][j] === arr[i + 1][j - 1] && arr[i][j] !== 0) {countob1++;// console.log(countob);i++;j--;if (countob1 == 5) {alert(flag == "black" ? "黑棋获胜" : "白棋获胜");setTimeout(() => location.reload(), 1000);return true;}} else {break;}}i = orii;j = orij;countob1 = 1;}}}return false;}
到此为止,五子棋的人人对弈功能已经完全实现.

接下来是人机对弈

ai判断

逻辑就是算出棋盘上己方的最高分位置和对方的最高分位置,进行分数相加,最终的最高分位置就是最优位置.

js逻辑,代码如下:

遍历棋盘对所有位置的所有方向进行判断,得出得分

 function aitest() {let sum1 = 0;let sum2 = 0;for (let i = 0; i <= 14; i++) {for (let j = 0; j <= 14; j++) {sum1 += aitestx(i, j);sum1 += aitesty(i, j);sum1 += aitestobl(i, j);sum1 += aitestobr(i, j);flag = (flag == "black") ? "white" : "black";sum2 += aitestx(i, j);sum2 += aitesty(i, j);sum2 += aitestobl(i, j);sum2 += aitestobr(i, j);flag = (flag == "black") ? "white" : "black";arrai[i][j] = sum1 + sum2;console.log(arrai[i][j]);sum1 = 0;sum2 = 0;}}}
横向判断
function aitestx(x, y) {let temp = arr[x][y];let deadr = false;let deadl = false;let count = 1;for (let i = 1; i <= 5; i++) {if (y + i > 14) {deadr = true;break;}if (arr[x][y + i] != flag) {if (arr[x][y + i] != 0) {deadr = true;}break;} else {count++;}}for (let i = 1; i <= 5; i++) {if (y - i < 0) {deadl = true;break;}if (arr[x][y - i] != flag) {if (arr[x][y - i] != 0) {deadl = true;}break;} else {count++;}}if (deadl == true && deadr == true) {return 0;} else {if (count > 5) {count = 5;count = 5;}return (score(count, deadl == deadr ? false : true));}}
纵向判断
function aitesty(x, y) {let temp = arr[x][y];let deadr = false;let deadl = false;let count = 1;for (let i = 1; i <= 5; i++) {if (x + i > 14) {deadr = true;break;}if (arr[x + i][y] != flag) {if (arr[x + i][y] != 0) {deadr = true;}break;} else {count++;}}for (let i = 1; i <= 5; i++) {if (x - i < 0) {deadl = true;break;}if (arr[x - i][y] != flag) {if (arr[x - i][y] != 0) {deadl = true;}break;} else {count++;}}if (deadl == true && deadr == true) {return 0;} else {return (score(count, deadl == deadr ? false : true));}}
斜向判断
function aitestobl(x, y) {let temp = arr[x][y];let deadr = false;let deadl = false;let count = 1;for (let i = 1; i <= 5; i++) {if (x + i > 14 || y + i > 14) {deadr = true;break;}if (arr[x + i][y + i] != flag) {if (arr[x + i][y + i] != 0) {deadr = true;}break;} else {count++;}}for (let i = 1; i <= 5; i++) {if (x - i < 0 || y - i < 0) {deadl = true;break;}if (arr[x - i][y - i] != flag) {if (arr[x - i][y - i] != 0) {deadl = true;}break;} else {count++;}}if (deadl == true && deadr == true) {return 0;} else {return (score(count, deadl == deadr ? false : true));}}
反斜向判断
function aitestobr(x, y) {let temp = arr[x][y];let deadr = false;let deadl = false;let count = 1;for (let i = 1; i <= 5; i++) {if (x - i < 0 || y + i > 14) {deadr = true;break;}if (arr[x - i][y + i] != flag) {if (arr[x - i][y + i] != 0) {deadr = true;}break;} else {count++;}}for (let i = 1; i <= 5; i++) {if (x + i > 14 || y - i < 0) {deadl = true;break;}if (arr[x + i][y - i] != flag) {if (arr[x + i][y - i] != 0) {deadl = true;}break;} else {count++;}}if (deadl == true && deadr == true) {return 0;} else {return (score(count, deadl == deadr ? false : true));}}
根据上面方法得出的连子数调用方法算出得分返回给aitest()
function score(num, dead) {if (dead) {switch (num) {case 1:return 1;case 2:return 10;case 3:return 50;case 4:return 400;case 5:return 500000;}} else {switch (num) {case 1:return 5;case 2:return 30;case 3:return 250;case 4:return 10000;case 5:return 500000;}}}
当玩家落子时,调用回调函数settimeout()调用ai落子
setTimeout(() => {clear(arrai);aitest();ai();}, 100);flag = "white"
ai()落子函数

遍历棋盘,将分数和映射到另一个二维数组

如果发现此处已有棋子则递归调用本方法.

最后在相应位置完成落子

大功告成
 function ai() {let max = -1;let maxarr = new Array(-1, -1);for (let i = 1; i <= 14; i++) {for (let j = 1; j <= 14; j++) {if (max < arrai[i][j] && arr[i][j] == 0) {max = arrai[i][j];maxarr[0] = i;maxarr[1] = j;}}}console.log(maxarr);console.log(arr);if (arr[maxarr[0]][maxarr[1]] != 0) {arrai[maxarr[0]][maxarr[1]] = -1;ai();console.log("重新来过");return;}console.log("max:" + max);console.log("max数组:" + maxarr[0] + "  " + maxarr[1]);x = 60 * maxarr[1];y = 60 * maxarr[0];arr[maxarr[0]][maxarr[1]] = "white";ctx.fillStyle = '#fff';ctx.beginPath();ctx.arc(x, y, 20, 0, 2 * Math.PI)ctx.fill();ctx.closePath();test();flag = "black";clear(arrai);}

总结

一个不难的小游戏,逻辑存在一定漏洞,主要是对js也不熟悉,包括对var和let的理解等等都比较欠缺,以现在的知识储备应该是改不明白了,再多学点把这个做成线上人人对战.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/3196.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

软件设计师-基础知识科目-计算题汇总1

软件设计师-基础知识科目-计算题汇总1

1. 位运算&#xff1a; 略 2. 进制转换&#xff1a; 3. 计算内存存储容量&#xff1a; 前置概念&#xff1a;** 内存地址是16进制。 16进制后面的加上的字母H&#xff0c;表示数字为16进制。内存地址编址的单位是Byte&#xff0c;1K 1024B&#xff0c;1024用16进制表示为400H …
阅读更多...
SQL Server 中的 dbo：正确调用表的方法与实践

SQL Server 中的 dbo：正确调用表的方法与实践

前言 在 SQL Server 数据库管理系统中&#xff0c;dbo&#xff08;Database Owner&#xff09;扮演着至关重要的角色&#xff0c;它代表着数据库的所有者&#xff0c;拥有对该数据库的最高权限。本文将聚焦于 dbo 在表调用场景中的应用&#xff0c;详细介绍其含义、权限特点以及…
阅读更多...
C语言 流程图与伪代码 缩减

C语言 流程图与伪代码 缩减

本文 我们来说说流程图 伪代码和代码缩进 这些可以让我们在后面书写复杂逻辑时 不会感到 繁琐或逻辑混乱 流程图(Flowchart) 是用以算法、工作流或流程的一种框图表示&#xff0c;它以不同类型的框代表不同种类的步骤&#xff0c;每两个步骤之间则以箭头连接。 流程图是程序…
阅读更多...
C++ WebServer的细节理解

C++ WebServer的细节理解

1. 文件描述符-非阻塞模式 fcntl(fd, F_SETFL, fcntl(fd, F_GETFD, 0) | O_NONBLOCK);代码解释&#xff1a; 上面这句代码&#xff0c;先查询文件描述符 fd 当前的标志&#xff0c;然后将 O_NONBLOCK 标志加入&#xff0c;并通过 F_SETFL 更新文件描述符&#xff0c;最终实现将…
阅读更多...
【UE C++】打印输出的两种方式

【UE C++】打印输出的两种方式

目录 一、UE_LOG 二、调试屏幕信息 一、UE_LOG 定义&#xff1a; UE_LOG 是一个将格式化消息记录到日志文件中的宏。 用法&#xff1a; UE_LOG(LogTemp, Warning, TEXT("Hello World")); 第一个输入参数 LogTemp 是提供给 DEFINE_LOG_CATEGORY 宏的类别名称。你…
阅读更多...
OpenAIGPT-4.5提前曝光？

OpenAIGPT-4.5提前曝光？

OpenAI GPT-4.5的神秘面纱&#xff1a;科技界的震撼新篇章 在人工智能的世界里&#xff0c;每一次技术的飞跃都不仅仅是一次更新&#xff0c;而是对未来无限可能的探索。近日&#xff0c;科技巨头OpenAI似乎再次站在了这场革命的前沿&#xff0c;其潜在的新产品——GPT-4.5 Tur…
阅读更多...
使用gdb调试遇到No symbol table is loaded. Use the “file“ command.怎么办？

使用gdb调试遇到No symbol table is loaded. Use the “file“ command.怎么办？

问题排查 出现下面问题&#xff0c;通常是没有处于调式模式环境下&#xff0c;所以我们需要在gcc指令后加 【-g】。 因为&#xff0c;我么的gcc编辑器默认是动态链接&#xff0c;而且是realese发布版本。 想要解决也很简单 主要思路就是在gcc -g。 在makefile文件如下进行修改即…
阅读更多...
MySQL面试题入门：四大范式、SQL生命周期、SQL六大语言、索引、最左匹配原则....

MySQL面试题入门：四大范式、SQL生命周期、SQL六大语言、索引、最左匹配原则....

1、数据库四大范式&#xff1f; 第一范式&#xff1a;属性不可分割&#xff0c;即每个属性都是不可分割的原子项。(实体的属性即表中的列) 第二范式&#xff1a;满足第一范式&#xff1b;且不存在部分依赖&#xff0c;即非主属性必须完全依赖于主属性。(主属性即主键&#xf…
阅读更多...
tar 和 zip 打包压缩命令

tar 和 zip 打包压缩命令

1. tar 文件的归档 tar [选项] 归档压缩后生成的文件 打包文件常用参数&#xff1a;-c # 创建文件-x # 提取解压还原文件-v # 显示详细执行过程-f # 指定备份文件-t # 列出压缩包中包括哪些文件&#xff0c;不解包&#xff0c;查看包中的内容-C # 指定解压位置 #对/o…
阅读更多...
Kubernetes（K8S）特性有哪些？

Kubernetes（K8S）特性有哪些？

Kubernetes简介 Kubernetes是一个开源的容器编排引擎&#xff0c;用于自动部署、扩展和管理容器化应用程序。它提供了一个平台来管理容器化应用程序的部署、扩展、自动化操作、服务发现和负载均衡等功能&#xff0c;让开发者能够更轻松地管理和运行容器化应用程序。 Kubernet…
阅读更多...
Unity | 集成 Protobuf（proto 转 cs 插件及序列化与反序列化）

Unity | 集成 Protobuf（proto 转 cs 插件及序列化与反序列化）

1. 添加 dll 1. 下载 protobuf 源码 根据需要下载 protobuf 指定版本的源码&#xff0c;这里以 v3.21.12&#xff08;protobuf-csharp-3.21.12.zip&#xff09;为例&#xff1a; 下载地址&#xff1a;「https://github.com/protocolbuffers/protobuf/releases」 2. 下载 Vis…
阅读更多...
Java面试之JVM篇（共七篇---完结）

Java面试之JVM篇（共七篇---完结）

Java面试之虚拟机篇&#xff08;一&#xff09;&#xff1a;JVM概述与内存结构 在Java的面试中&#xff0c;虚拟机&#xff08;JVM&#xff09;是必考的知识点之一。作为Java程序运行的基础环境&#xff0c;JVM对Java的性能和稳定性有着至关重要的影响。本文将首先介绍JVM的基…
阅读更多...
常见内网代理工具及其应用

常见内网代理工具及其应用

常见内网代理工具 1. 正向代理&#xff1a;Squid原理示例 2. 反向代理&#xff1a;Nginx原理示例 3. SOCKS代理&#xff1a;Shadowsocks原理示例 零基础入门学习路线视频配套资料&国内外网安书籍、文档网络安全面试题 常见的内网代理工具包括多种类型&#xff0c;如正向代理…
阅读更多...
自从用上电路仿真软件后，我才领悟到的4大奥秘

自从用上电路仿真软件后，我才领悟到的4大奥秘

在电子工程领域&#xff0c;电路仿真软件已成为设计师们不可或缺的得力助手。自从我开始使用这款软件&#xff0c;它不仅极大提升了我的工作效率&#xff0c;还让我领悟到了许多前所未有的知识。今天&#xff0c;就让我来分享自从用上电路仿真软件后&#xff0c;我才知道的4件事…
阅读更多...
【必须收藏】一文汇编山西省太原市及各地市区高新技术企业认定申报奖励优惠政策

【必须收藏】一文汇编山西省太原市及各地市区高新技术企业认定申报奖励优惠政策

一、山西省及各地市区高新技术企业申报奖励 &#xff08;高企、政策项目申报、专利商标版权DL&#xff01;zi询见个人简介 [疑难解答]&#xff09; &#xff08;一&#xff09;太原市高新技术企业申报奖励政策 建立高新技术企业培育库&#xff0c;对入库两年内通过高新技术企…
阅读更多...
【分享】WinRAR软件如何压缩文件？

【分享】WinRAR软件如何压缩文件？

WinRAR是一款功能强大的压缩文件管理工具&#xff0c;支持多种压缩文件格式&#xff0c;那如何使用WinRAR来压缩文件呢&#xff1f;不清楚的小伙伴一起来看看吧&#xff01; 压缩方法&#xff1a; 首先&#xff0c;安装好WinRAR工具&#xff0c;然后选中需要压缩的文件或文件夹…
阅读更多...
OSPF的学习笔记

OSPF的学习笔记

1.OSPF &#xff08;1&#xff09;链路状态路由协议的路由信息并不是像距离矢量路由协议那样(邻居告诉的)&#xff0c;通过收集自身以及邻居发出的LSA(原材料)&#xff0c;并LSA放到指定仓库里面(LSDB)&#xff0c;通过SPF算法&#xff0c;以自己为根计算到达网络每个节点的最优…
阅读更多...
Linux文件/目录高级管理三 头歌

Linux文件/目录高级管理三 头歌

1Linux文件/目录setuid和setgid 编程要求 在右侧编辑器中补充代码&#xff0c;具体编程要求如下&#xff1a; 使用助记语法为系统已存在文件oldFile1(默认权限为&#xff1a;rw_rw_r__)设置setuid权限; 使用助记语法为系统已存在目录oldDir1(默认权限为&#xff1a;rwxrwxrw…
阅读更多...
php跨域和https访问http问题分析

php跨域和https访问http问题分析

1、https的web访问http地址的资源 问题&#xff1a;请求状态status(canceled) 解决办法&#xff1a;把资源地址改成https的 /*** HTTP地址改成HTTPS地址* param $url*/ function changeHttp2Https(&$url){if(stripos($url, http://) ! false){$url str_replace(http…
阅读更多...
手机图片制作动态gif怎么做？不能错过的好用网站！

手机图片制作动态gif怎么做？不能错过的好用网站！

现在手机可是人人不离手的&#xff0c;而且手机上的很多软件功能已经逐渐取代了电脑。有时候我们想要把手机中的照片变成有动态效果的gif动图还不想下载软件的时候&#xff0c;就可以用Gif在线制作网站&#xff0c;不用下载软件&#xff0c;手机电脑都能在线操作。非常的方便小…
阅读更多...
最新文章

Copyright @ 2022~2023