教程：HMI画布-贪吃蛇

Slimming · 2022-5-19 11:14:50

马上注册,享受更多特权

您需要登录才可以下载或查看，没有帐号？立即注册

x

本帖最后由 Slimming 于 2022-5-19 11:47 编辑

一、简介

Javascript中的canvas可实现动画显示，配合接口变量可以实现一些简单的小游戏。
接上个帖子，今天分享一下贪吃蛇的教程，之所以选贪吃蛇因为其玩法简单但不枯燥，编程实现较为容易，作为画布学习的进阶来说比较合适。贪吃蛇.gif

二、游戏分析规划

针对贪吃蛇，抛去图片和复杂的样式，内容大致分为：蛇、食物、游戏边框、游戏难度
先从简单的开始分析。
1.游戏边框
边框限制蛇的活动范围，通过蛇头坐标判断是否超过范围来控制游戏是否结束，另外蛇头与蛇身的坐标重叠也需要结束游戏。

2.游戏难度
游戏难度通过速度控制，画布的刷新速度通过定时器SetInterval实现，再通过ClearInterval来动态刷新游戏的难度。

3.食物
食物在被蛇吃掉之前坐标固定，被吃掉后坐标随机刷新，蛇身长度+1，通过蛇头与食物的坐标是否重叠判断是否被吃掉。

4.蛇头与蛇身

蛇头与蛇身通过坐标与长度控制，游戏启动时初始化坐标与长度，启动后蛇身通过前后节的坐标复制实现连续运动。蛇身跟着蛇头走，蛇头通过方向控制移动。

三、总结

贪吃蛇游戏的核心是坐标的控制，蛇头通过屏幕方向按钮控制移动，蛇身控制的核心是前后节坐标的复制控制移动，蛇身始终跟随蛇头。

前后节坐标的复制在动画制作以及方案算法中比较常用，例如：交换两个数据的内容、数组中插入或删除部分数据等。

经验交流才能升级，大家有什么想法在评论区发表出来吧。

工控小小白 · 2022-5-19 16:58:11

66666666

pst19941106 · 2022-5-19 19:48:39

牛皮6666666666666666

COLOR · 2022-5-19 22:15:11

感谢分享

SKYLUO · 2022-5-20 02:27:46

可以說 70% 以上內容都搬運我在CSDN發的原文
有意思，連用詞都一樣
https://blog.csdn.net/shyhkaelo/ ... 1001.2014.3001.5501

依然 · 2022-5-20 09:55:57

感谢分享

Slimming · 2022-5-20 10:11:22

本帖最后由 Slimming 于 2022-5-20 10:15 编辑

SKYLUO 发表于 2022-5-20 02:27
可以說 70% 以上內容都搬運我在CSDN發的原文
有意思，連用詞都一樣
https://blog.csdn.net/shyhkaelo/artic ...

你有疑问可以先发表出来，没有看过我的程序上来就说我70%搬运你的文章，你礼貌吗？
造谣一张嘴，辟谣跑断腿。

我分享的程序是关于js语言画布canvas的进阶应用，主要是学习汇川HMI脚本。我看了你的文章是plc写的程序，我用js的canvas做的，贪吃蛇简化下来就是这几个部分没有什么难度，网上关于贪吃蛇相似的文章非常多，难道都是抄你的？

如果说有复杂的算法和你相似那我没话说，贪吃蛇这么简单的游戏实现你说我抄你的，我觉得你在侮辱我，不奢求你道歉，但是希望你停止造谣。

Cool · 2022-7-8 16:30:53

感谢分享，学习了

Allenzhou · 2022-11-30 15:48:57

感谢楼主分享，学习中！

我愿人长久 · 2022-12-1 16:36:26

内容详细，感谢分享画布案例

帐号		自动登录	找回密码
密码			立即注册

[综合教程经验] 教程：HMI画布-贪吃蛇

马上注册,享受更多特权

点评

已有 3 人打赏作者

点评

浏览过的版块

楼主其他主题

热点推荐

底部导航

积分管理

资料下载

有技术问题，就上汇川技术社区