1-1 制作贪吃蛇
第一步
使用 Photoshop 绘制 或者使用 素材包 内的素材添加到舞台背景内
使用 Photoshop 绘制网格背景 (使用素材包素材可直接跳转到下一段)
按照视频方法创建一个大的画布并且根据视频方法绘制网格,然后导出为 PNG 或 JPG 格式
PS:注意绘制网格完成之后请在外面绘制一圈红色的背景 示例看图:
随后就是上传图片了
- 先在设置中将高清上传图片按钮打开
- 点击高清上传按钮上传图片
- 将图片缩放到你觉得合适的大小
(网格大概就这个大小)
PS方案的第一步已完成 可直接跳转到 第二步
使用 素材包内的素材 添加到背景
第二步!
1. 创建贪吃蛇角色
2. 绘制贪吃蛇造型(使用素材包可跳过此步骤 直接上传 )
首先使用 Scratch 矢量图编辑器中的圆形绘制工具 按下 Shift键+鼠标左键 绘制一个 78*78 的红色圆形
继续使用 Shift键+鼠标左键 绘制出一个大小适中的深红色圆形放在大圆形的中间
这样我们的贪吃蛇尾部就画好了,接下来我们画头部
第三步!
编写贪吃蛇代码让我们开始来为贪吃蛇编写代码吧✨
编写贪吃蛇移动代码
首先我们先创建一个名为“开始游戏”的广播 并且当绿旗被点击就发送广播
接下来我们制作一个贪吃蛇面朝鼠标方向移动的代码
当接受到广播:开始游戏切换为头部的造型 #造型初始化
重复循环 面向鼠标方向 移动10步
编写贪吃蛇身体代码
接下来我们编写生成贪吃蛇身体的代码,但是在开始写之前 我们来学习一个小技巧
这里我们用到了一个技巧,就是首先按住 "Ctrl键" 单击积木 选中该积木
随后我们使用 Ctrl + C 复制积木 并且使用 Ctrl + V 粘贴,熟练掌握快捷键可以让我们的编程效率更进一步!
如果你发现你按下这些快捷键并没有反应,那请前往 Gandi设置 中打开相关快捷键
然后我们先复制一个 开始游戏&重复执行 随后编写克隆自己并且每次克隆完毕等待0.02秒。
很好!接下来我们开始编写一下克隆体部分的代码
首先 我们拖出当作为克隆体启动时,我们先初始化一下造型为 身体 造型
随后我们创建一个仅适用于当前角色 (私有变量) 的变量 i 用作于判断蛇是否过长
首先我们初始化变量 i 为 0 每重复执行一次就增加0.5
编写完成之后我们再创建一个共有变量 名为 积分
创建完成之后我们初始化一下这个变量
初始化 积分 变量的值为 10
随后我们编写一个判断 用来删除超过积分长度的克隆体
如果我们的变量 i 大于分数 那么就删除此克隆体,这就相当于每个蛇的身体都会有一个存活时间
这个存活时间是根据玩家的分数而定的,然后我们来看一下效果
可以看到我们基础的贪吃蛇已经初步成形了!
不过我们会发现头部转动的速度太快了 不像贪吃蛇原版是缓慢转动到鼠标方向的
编写贪吃蛇非线性旋转代码
这个时候我们就需要编写一个丝滑的非线性旋转函数了
- 创建自定义积木
创建一个自定义积木名为 非线性旋转,并且添加两个参数 分别是 方向 & 速度
- 我们来编写非线性旋转的脚本
最好之后就是这样的!,不过可能有些人会比较懵 但是不要急~让我一个一个给你讲解
首先 我们创建了一个新的变量 叫做"方向" 这个变量的作用显而易见就是用来作为角色的方向
然后就是如果否则 这个判断很好理解 就是判断目标方向减去当前方向除以360度的余数是否大于180度
那么有的同学就会问了 这个除以360的余数是什么呀?在数学中,我们可以使用取模运算(modulus operation)来计算一个数除以另一个数的余数。取模运算通常使用符号"%"表示。
对于计算数x除以数y的余数,我们可以使用以下公式:
余数 = x % y
如果我们要计算725度相对于一个完整圆周的位置是什么,可以使用以下计算:
余数 = 785 % 360
通过计算,我们得到余数为65,也就是725度相对于一个完整圆周的位置是65度。
PS:Scratch的方向范围就是从0到180 如果大于180就会变成-179到0
同样的,你可以将任何角度除以360,并取得余数来表示相对于一个完整圆周的位置或方向。余数的范围是0到359之间,对应于圆周的角度范围。
在我们充分的了解完余数之后 那这个判断也就很好理解了
也就是 判断 目标方向减去当前方向的完整圆周的位置是否大于180度 也就是用来判断是向左转还是向右转
那么接下来这个就很好理解了:
如果大于那么就相当于是执行左转的计算
将变量 方向 增加一个 当前方向减去目标方向的圆周的位置 乘以一个 零减去速度 也就是让速度翻转
否则就是执行右转的计算
将变量 方向 增加一个 目标方向减去当前方向的圆周的位置 乘以一个 速度
那么这个是什么意思呢 让我们来分析一下:
首先 当前方向减去目标方向 就相当于是去计算一个当前方向与目标方向之间的差异值
假设我们现在在-65度位置 我们要达到180度,那么 (180 - 65) % 360 = 245 大于180
那显然我们进入到了如果那么里面
那么我们就按照计算向左旋转的方式去计算
首先当前角度是-65度目标是180度那也就是 -65 - 180 = -245
然后我们将这个数计算一下圆周的位置 -245 % 360 = 115
那么也就是得到了我们需要向左旋转115度即可到达180度,
随后我们为了让这个不要一次性就旋转到目标点(这样就没丝滑的缓动了)
我们就要乘以一个零减速度 比如说我们的速度是0.2 那么就是 115 * (0 - 0.2) = -23
那么为什么我们只需要乘以一个数字就会有丝滑的缓动效果呢?
我们不妨将这个 * -0.2 改成除法 这样我们就很好理解了 比如说每次除以2,数值都会减小一半。例如,初始值100除以2得到50,50除以2得到25,以此类推。每次除以2,数值的衰减速度都会变慢,最终数值是会无限接近于0
如果我们将这个特性运用到移动上 刚开始移动100 然后50, 25, 12.5... 这样就相当于刚开始速度很快然后慢慢减少的一个过程 就会十分的丝滑 也就是我们熟悉的非线性移动 比普通的线性移动会丝滑非常多!
怎么样 这样了解之后是不是就突然全部恍然大悟,在编程中数学的魅力是无穷的一定要善用数学~
运用非线性旋转
好了!我们制作完成非线性旋转函数之后我们就该考虑如何去使用到贪吃蛇里面去了
这个时候,就要用到我们大名鼎鼎的 Arkosの拓展了
我们前往扩展库添加 arkos的拓展
添加完成之后我们使用扩展中的
x1 y1 面向 x2 y2 的方向积木 用来计算我们的面向鼠标指针的方向
就像这样
随后我们将他放进我们的缓动函数中
啊哈就像这样! 非常完美
哦不对差点忘了件事情
哈哈哈差点忘记加面向变量方向的方向了(什么绕口令)
顺便我们也将刚开始移动到 0 0 位置加上
好了!,那么最后让我们来体验一下 最终的效果吧!!
wow!非常丝滑的旋转~
贪吃蛇基础部分完成!
<iframe
width="100%"
height="800px"
scrolling="no"
src="https://www.ccw.site/embed?id=snake/mckuke/Lec1/01&type=comment"
title="{贪吃蛇中级教程-第一课第一节}"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
scrolling="0"
></iframe>