Scratch第四十四讲:微信跳一跳(一)

网友投稿 2019-03-30 16:52

想了解编程技巧,就请点击上面蓝字:跟我学Scratch编程,关注CC哥


 

最近几天CC哥玩了一下微信跳一跳的游戏,觉得挺好玩,也想用scratch来做一个类似的,然后在网上找了一下,发现做得都跟微信原版不太一样,所以CC哥尽量做得跟原版象一些。

做这个游戏CC哥在考虑有哪几个难点:

1:首先这是个立体的游戏,跳棋是在一个立体平面内往屏幕深度走的,而不是我们平常做的跳一跳的游戏不是水平就是垂直在走。

2:一个个方块造型不同,但是肯定用克隆做比较方便,而不能用不同的角色。

3:既然游戏是立体的界面,那么跳棋肯定是斜着方向跳的,而不是水平跳。

先看一下录的游戏视频

https://cdn.china-scratch.com/timg/190401/1A215K32-0.jpg

今天CC哥又解锁了一个技能,就是做了个动态的片头,Scratch不能显示GIF的图片,那怎么显示GIF图片呢?其实是个笨方法,我把一个GIF图片用爱奇艺的播放器直接存成了一组图片。然后把这一组图片全部上传到了Scratch里面,然后再循环切换造型罢了,效果还是挺好的。

https://cdn.china-scratch.com/timg/190401/1A215C94-1.jpg

看,就是这个工具(爱奇艺万能播放器),上面那个红圈圈住的按钮,可以把gif图片存成一个个的单图。(如果有谁发现scratch可以直接上传动图,务必跟CC哥讲一下哦)

这个GIF有86张图,CC哥一个一个传上去了。(Scratch也没有批量上传呀,谁知道也跟CC哥说一声https://cdn.china-scratch.com/Public/Home/images/grey.gif

https://cdn.china-scratch.com/timg/190401/1A2154I0-3.jpg

https://cdn.china-scratch.com/timg/190401/1A215M29-4.jpg

好了,讲主要部分的程序:

该游戏的角色:

https://cdn.china-scratch.com/timg/190401/1A21525Y-5.jpg

角色1是方块,角色2是跳棋,角色3是刚才讲的开场画面,角色4是用来做跟踪定位的。

先从方块的部分讲起:

https://cdn.china-scratch.com/timg/190401/1A2163B0-6.jpg

这些造型是CC哥一个一个在微信跳一跳的游戏里扣出来的,效果还不错吧。

https://cdn.china-scratch.com/timg/190401/1A2162148-7.jpg

这个方块的程序思路是:

1:一开始跳棋站在方块上面,然后方块在原地克隆一个方块,然后方块沿着水平30的方向向斜上方随机移动到一个位置。并变换造型。

2:等跳棋跳到方块上之后,方块在原地克隆一个新的方块,然后再随机向斜前方移动,如果移动的位置靠近右边的边界时,所有的方块包括跳棋均反向移动到初始的位置。

https://cdn.china-scratch.com/timg/190401/1A215K32-0.jpg

在这里面因为涉及到角色的同步问题,跳棋跳到下一个方块的位置时才产生下一个方块,理论上这里面应该用消息来做传递最方便。但是CC哥发现当用消息进行同步时,程序出现了bug,可能是涉及到了克隆体同步的问题。CC哥也没搞清楚问题出在哪里,所以没有用消息进行同步,而用状态变量来做同步了,这种方法在之前的讲座中也用过。

https://cdn.china-scratch.com/timg/190401/1A21L449-9.jpg

这个下一跳就是状态变量。一般的情况下这个变量为0,一旦这个变量被赋值为1的时候,就会引发“下一跳“的程序代码执行。

这部分就是下一跳的代码:

就是让方块在原地克隆后,并移动到一个新的位置。(随机数的范围限定了方块不会太远也不会太近)

有一个关键点就是要判断下一个新的位置是不是在屏幕里能显示,还是已经跳到了屏幕外,如果跳到了屏幕外,那么就需要把整个克隆体向后移动。那这个判断怎么做呢?包括这个后退的距离有多远呢?

https://cdn.china-scratch.com/timg/190401/1A21I541-10.jpg

第一个,新位置判断用的新的x坐标的位置,就是当前方块的x坐标,加上新的位置在x轴的方向移动的距离。

https://cdn.china-scratch.com/timg/190401/1A21H327-11.jpg

https://cdn.china-scratch.com/timg/190401/1A21G964-12.jpg

因为这个角度是30度,所以水平移动的距离等于下一步位置乘以0.866,也就是cos(30)啦。这个之前讲过了。

后退的位置因为是要移动到最初的位置,那么移动多少步呢?我们可以很轻松算出来y轴跟最初的位置的距离,再乘以2就是沿着移动路径要后退的位置了。因为sin(30)=0.5,所以算出y轴一共离开初始位置有多远,再乘以2就可以了。

https://cdn.china-scratch.com/timg/190401/1A21M356-13.jpg

这段就是后撤的代码,所有的克隆体都会收到消息后撤。

https://cdn.china-scratch.com/timg/190401/1A21LN4-14.jpg

这段代码是如果克隆体移动的位置太靠下时,把这个克隆体删掉。(注意检测的时候我没有用如果碰到边缘这个侦测命令,而是用y坐标来判断位置,是因为角色是有尺寸的,而且比较大,所以即使碰到边缘,你也并不是想要它消失,而是当角色多部分在边缘以外才会需要它消失,所以我们会用y坐标来判断是否删除克隆体。)

跳棋的程序设计:

1:当按下空格键后,跳棋在积蓄能量,也就是要跳多高跳多远。

2:当松开空格键之后,跳棋要向着下个方块翻滚跳出。

3:如果跳到一定范围内,跳棋就算跳跃成功,会自动移到方块的中心,准备下一个跳跃。

4:如果没有跳到下一个方块的范围内,那么游戏失败。

https://cdn.china-scratch.com/timg/190401/1A21TA9-15.jpg

https://cdn.china-scratch.com/timg/190401/1A21UD3-16.jpg

v代表y轴的起跳速度,vx代表x轴的运动速度。用x和y变量来记录当期坐标。循环用来通过按着空格键不放给v赋值。按的时间越长,v越大。

https://cdn.china-scratch.com/timg/190401/1A2195Y3-17.jpg

水平方向的速度为垂直方向的速度除以4,大家自己可以调。

跳到什么位置算跳跃终止呢?以前都是大家做的跳跃通常都是用碰到某种颜色或角色作为跳跃终止。而这里不行,因为是个斜方向跳跃,所以跳棋是沿着与水平角度成30度角的路径跳。所以CC哥不断来检测跳棋的位置,一旦跳棋落到了这条路径上,那么跳跃就结束。(用了直角三角形的两条直角边的比例关系来做个判断。tan(30))这一点是个小难点,大家可以仔细想想。

循环中就是普通的跳跃程序,v的速度是随着每次循环变化的。中间为了做翻滚,又加了个角色一定角度的旋转。

https://cdn.china-scratch.com/timg/190401/1A2194Z1-18.jpg

跳跃结束后别忘了把角色的角度还原到90度。

另外不是检测是否碰到方块,而是检测是否碰到ball,这个ball的角色就是用来做这个检测的,因为方块的角色比较大,而且是个立体图形,我们希望只有跳棋碰到了方块上面的一部分平面时才算跳到位置。

https://cdn.china-scratch.com/timg/190401/1A219A28-19.jpg

所以我们只要让ball这个角色始终跟着方块就行。如果想把效果做的更好,还可以用一个角色来替代跳棋来做碰撞检测,因为跳棋也是立体的,我们希望只有跳棋的底部碰到ball才算跳到了位置。不过这里CC哥就留给大家自己去做了。

https://cdn.china-scratch.com/timg/190401/1A21930X-20.jpg

这段代码是跳棋跟着方块一起后退的代码,注意旋转方式要在后退时设置一下,否则跳棋就会在后退的时候歪掉。等后退完,重新把旋转方式设定为任意旋转,这样在下一个跳跃时,跳棋可以翻滚。

https://cdn.china-scratch.com/timg/190401/1A2193E8-21.jpg

这是按下跳棋时的跳棋的特效。

这是ball的程序,就是设定成透明,并且随时跟着方块就行。

https://cdn.china-scratch.com/timg/190401/1A2202251-22.jpg

其他部分的代码CC哥就不介绍了。

下一讲,CC哥再把这个游戏继续完善一下,一方面是跳棋的特效,一方面是跳跃路径的转向该如何处理。

--end--

声明:本文章由网友投稿作为教育分享用途,如有侵权原作者可通过邮件及时和我们联系删除:freemanzk@qq.com