前端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,一经查实,立即删除!

相关文章

C# 6.定时器 timer

使用控件: 开启定时器:timer1.Start(); 关闭定时器:timer1.Stop(); 定时间时间间隔:Interval timer1.Interval 1000; Interva等于1000是每一秒刷新一次 定时器默认时间间隔是100ms 代码创建定时器 ①创建 Timer t1 new Timer(); …

后端笔记(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 ,其…

基于YOLO的植物病害识别系统:从训练到部署全攻略

基于深度学习的植物叶片病害识别系统(UI界面YOLOv8/v7/v6/v5代码训练数据集) 1. 引言 在农业生产中,植物叶片病害是影响作物产量和质量的主要因素之一。传统的病害检测方法依赖于人工识别,效率低且易受主观因素影响。随着深度学…

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

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

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

国内外主流的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)"这样的表达式,原来是模拟计算的结果…

大厂面经:大疆嵌入式面试题及参考答案(4万字长文:持续更新)

目录 Linux 系统调用的过程,中间发生了什么? 表格总结 Linux 中断流程,谈谈你对中断上下文的理解 中断流程 中断上下文理解 Linux schedule() 函数的原理和调用的时机 schedule() 函数原理 调用时机 页表实现机制,分页的缺点? 页表机制 分页的缺点 介绍操作系…

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,即使使…

【嵌入式英语教程--5】C语言中的函数与库

C语言中的函数与库 英文原文 Functions in C are reusable blocks of code that perform a specific task. They help in organizing code and making it more modular. Libraries are collections of pre-written functions that can be reused across different programs. …

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

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

软件环境安装-通过Docker安装redis、nacos、minio

软件环境安装-通过Docker安装redis、nacos、minio 一、安装redis一、拉取镜像二、启动 二、安装nacos一、拉取镜像二、启动 三、安装minio一、拉取镜像二、启动 一、安装redis 一、拉取镜像 docker pull redis二、启动 docker run --namedocker_redis -d -p 6379:6379 --re…

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

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

Playwright 的使用

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

编程语言「描述符」漫谈——以C++与Rust为例的行为声明与类型描述

编程语言中有三种描述符: 声明符: 表示一种动作, 比如创建变量, 定义函数等等;说明符: 也就是类型说明符, 表示一种数据类型;修饰符: 表示动作或类型的属性, 例如不可变…… swift语言就是严格遵循这些描述符的, 例如, objc是修饰符 , 表示编译成OC兼容函数, func 是声明符, …

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:附件…

python类的内置函数:setattr、getattr

setattr 是 Python 的内置函数,用于设置对象属性的值。通过 setattr 函数,可以动态地为对象添加或修改属性,而无需直接访问对象的属性。 语法 setattr(object, name, value) object:要设置属性的对象。name:属性的名…