前端canvas——五子棋小游戏开发

这估计是最后一篇了,终于是修复了部分bug——隔一个空格能够胜利的bug,并且添加了部分样式。

其他bug目前还没有找到,找到再说吧。

大部分代码请见:

用canvas实现五子棋小游戏icon-default.png?t=N7T8https://blog.csdn.net/m0_54066656/article/details/140552576?spm=1001.2014.3001.5501

这里面最重要的,就是胜利代码的逻辑了。

别的样式都可以自定义,根据自己所学的知识进行自定义即可。

下面给出我自己的一些自定义设置以及完善:

首先就是,一进入到网页就提示你是否选择新游戏。

这个可有可无,看你喜不喜欢花里胡哨的东西。

然后就是提示,下棋子的提示,上图上层第二个黑点左侧有白色虚线圆框。

这个做起来还是蛮有难度的,喜欢的可以去挑战一下自己。

下面这个也是跟上面这个是一样的:

悄咪咪说一句,这个也是我看了B站大佬视频里面的样式,我才开始弄的。

我一开始以为后续会教你如何实现,但是没有,只教了模糊。

快乐啪一下没了,于是乎就花了亿点时间去实现了,整体还是蛮简单的。

最后就是游戏胜利的画面,我根据颜色来进行了深度定制。

比方说,黑方胜利了,那就使用黑色背景,如果是白方胜利了,那就采用白色背景。 

这部分还是很简单的,建议自己动手尝试。

悄咪咪说一句,你可以使用第一张图里面提供的DOM元素进行~

这就是以上所有内容,感谢你的阅读,咱们下棋整活再见。 

整活:

有能力的,可以加个AI对战。

有心情的,可以换个校对方法,压缩代码。

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

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

相关文章

后端笔记(2)--JDBC

1.JDBC简介 *JDBC(Java DataBase Connectivity)就是使用java语言操作关系型数据库的一套API *JDBC本质:(可以使用同一套代码,操作不同的关系型数据库) ​ *官方定义的一套操作所有关系型数据库的规则,即接口 ​ *各…

ESP之经典蓝牙库BluetoothSerial介绍和实例演示

ESP之经典蓝牙库BluetoothSerial介绍和实例演示 1.概述 目前ESP32内置了双模蓝牙(蓝牙4.0版本之前都是经典蓝牙,4.0版本成为BLT低功耗蓝牙转为物联网开发。双模指的就是这款芯片两种模式都支持)。 这篇文章介绍ESP32蓝牙的经典模式使用方法…

算法学习day23

一、k个一组翻转链表 给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表。 思路: 1.首先得到链表的长度size;然后在size>k的范围里面进行翻转长度为k的链表。 2.while(size>k) 在这个循环中&#xf…

【C++BFS算法】886. 可能的二分法

本文涉及的点 CBFS算法 LeetCod886. 可能的二分法 给定一组 n 人(编号为 1, 2, …, n), 我们想把每个人分进任意大小的两组。每个人都可能不喜欢其他人,那么他们不应该属于同一组。 给定整数 n 和数组 dislikes ,其…

电脑桌面记事本便签哪个好,有哪些好用的桌面备忘记事工具推荐

在寻找高效办公的道路上,我们经常需要记住许多重要的事情,然而人的记忆力终究有限,这时候就需要依赖一些工具来帮助我们进行提醒。一款好的电脑桌面记事本便签、桌面日程安排软件就像是一位得力助手,它不仅能够帮助我们合理规划时…

项目经理的开源工具指南:优化您的选择过程

国内外主流的10款开源项目管理系统对比:PingCode、Worktile、禅道、Teambition、Gogs、码云 Gitee、Jira、Redmine、ProjectLibre、OpenProject。 在选择合适的开源项目管理系统时,很多团队面临诸多挑战:功能是否全面?易用性如何&…

Excel模拟计算演示-以矩阵乘计算密度为例

Excel模拟计算演示-以矩阵乘计算密度为例 1.参考链接2.CUDA_Occupancy_Calculator截图3.矩阵乘计算密度模拟计算的操作步骤及效果 安装好CUDA之后,/usr/local/cuda-12.1/tools/CUDA_Occupancy_Calculator.xls里会看到"TABLE(,B17)"这样的表达式,原来是模拟计算的结果…

3V升5V输出800mA可驱动10MA驱动蜂鸣片芯片AH6910

135-3806-7573今天,我们将深入解析一款名为AH6910的芯片,这款芯片以其独特的3V至5V宽电压输入范围、800mA的高输出电流能力,以及能够轻松驱动低至10mA需求的蜂鸣片,成为了众多电子项目中的优选元件。######一、AH6910芯片概述 AH…

RIP路由协议

RIP-路由信息协议V1/V2/NG NG版为ipv6专用 距离矢量型IGP路由协议,使用跳数作为度量,支持等开销负载均衡;基于UDP,520端工作,基于UDP V1和V2的区别: 1、v1为有类别协议--不支持VLSM/CIDR,即使使…

ic进阶|性能篇02:一文带你了解一种特殊的并行技术-展开!

本期文章让我们聊聊一种数字ic设计技术——展开,展开用于产生一个一次迭代就相当于原有结构的多次迭代的新电路结构。其相当于之前聊过的折叠技术的反向操作,折叠使用一个功能单元通过多次迭代来完成原有电路结构一次迭代的操作,相对于通过时…

中电金信:云原生时代IT基础设施管理利器——基础设施即代码(IaC)

在数字化转型、零售业务快速发展、信创建设驱动下,应用架构、技术架构、基础架构都已向云原生快速演进,银行业IT基础设施管理产生了非常大的变化,当前银行业,正在开展新一轮的核心应用系统重构、基础平台统一建设等重点任务&#…

Playwright 的使用

Playwright 的特点 支持当前所有主流浏览器,包括 Chrome 和 Edge (基于 Chromiuns), Firefox , Safari 支持移动端页面测试,使用设备模拟技术,可以让我们在移动Web 浏览器中测试响应式的 Web 应用程序 支持所有浏览…

x264编解码库 -介绍和使用示例

目录 1:X264简单介绍 1.1:编译x264 1.2:x264简单介绍 1.3:x264的优势 1.4:x264与FFmpeg的关系 1.5:x264 编解码原理 1.6 进一步学习资源 2:demo效果 3:完整代码 4:附件…

6 网络

6 网络 1、概念2 IP地址3、套接字4、TCP协议4.1 TCP协议的基本特征4.2 建立连接4.4 终止连接4.5 编程模型 5、UDP协议5.1 UDP协议的基本特性5.2 常用函数5.3 UDP通信模型 6、域名解析 1、概念 计算机网络是实现资源共享和信息传递的计算机系统 ISO/OSI网络协议模型 TCP/IP协…

C语言进阶 10. 字符串

C语言进阶 10. 字符串 文章目录 C语言进阶 10. 字符串10.1. 字符串10.2. 字符串变量10.3. 字符串输入输出10.4. 字符串数组10.5. 单字符输入输出10.6. 字符串函数strlen()10.7. 字符串函数strc()10.8. 字符串函数strcpy()10.9. 字符串搜索函数10.10. PAT10-0. 说反话 (20)10-1.…

idea中导入外部依赖并打包到jar包中

前言: 很多时候在我们写项目对接三方的时候都需要导入三方jar包,而这时候我们用平常的pom里面写依赖发现导入不了(直接把jar包放在本地导入的话打包的话也不会将该依赖打包进我们项目的jar包),我在网上找了几种方法 …

Linux网络-ss命令

作者介绍:简历上没有一个精通的运维工程师。希望大家多多关注我,我尽量把自己会的都分享给大家,下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 Linux服务器作为一个常用的网络服务器,主要的作用就是向客户端提供网络…

【C++】C++11中R字符串的作用

在 C11 中添加了定义原始字符串的字面量 1.定义和基本使用 定义方式为: R"xxx(原始字符串)xxx"其中 () 两边的字符串可以省略,R只会处理括号中的字符串。 原始字面量 R 可以直接表示字符串的实际含义,而不需要额外对字符串做转义…

谷歌团队新技术Alchemist:使用扩散模型对材料属性进行参数控制

Alchemist是由谷歌团队和麻省理工学院联合研发的一项创新技术,它利用扩散模型对材料属性进行精细的参数控制。这项技术的核心在于能够对真实图像中的物体材料属性进行调整,包括粗糙度、金属感、反照率和透明度等。Alchemist的实现依赖于先进的文本到图像…

【时时三省】(C语言基础)循环语句while(2)

山不在高,有仙则名。水不在深,有龙则灵。 ——csdn时时三省 getchar和scanf的作用 示例: int main ( ) { char password[20] ( 0 ) ; printf ( "请输入密码:> " ); scanf ( " %s…