html5 + css3 网站开封seo推广

知识回顾

1、舞台和坐标的知识

2、使用坐标控制角色移动

一句俗语：大鱼吃小鱼，小鱼吃虾米，感觉挺有意思的。

这句话说明了自然界中的生存法则，本次分享我与大家共同做一个大鱼吃小鱼的作品。

案例解说：

点击绿旗，得分归零 大嘴鱼跟随鼠标在舞台上移动并切换造型 小鱼在舞台上随机游动，并且会随机隐藏和显示，碰到大嘴鱼会发出声音并隐藏，同时得分增加。

案例演示：21-30-38-CSDN直播案例演示https://live.csdn.net/v/428890

1、添加背景和角色以及初始化

1. 从案例素材中添加角色和背景
2. 初始化小鱼：
   由于小鱼一直在移动，我们可以先不初始化位置和方向！

初始化大嘴鱼：

大嘴鱼方向会随着鼠标移动，所以只需要初始化位置大小还有旋转方式就可以了。

添加背景之后我们再新建一个变量：得分，用来记录我们获得的分数，并对得分进行初始化为0。

2、大嘴鱼造型切换和跟随鼠标移动

1.造型切换

2.跟随鼠标移动

点击小三角下拉框，可以看到这个积木不仅可以让角色面向鼠标指针，还可以面向其他角色。

它可以和移动积木搭配，放到重复执行里。

现在调试会发现有个小问题，虽然可以跟随鼠标移动，但鼠标不动的时候角色会一直抖动。这是怎么回事？

这是因为鼠标停止的时候角色还在面向鼠标的方向移动，但是超过鼠标之后又向反方向移动，就看到它在抖动了。由于角色在不停的重复这个过程，所以在我们眼中就感觉是一直在抖动了。

解决问题

3.重复执行直到

可以使用“重复执行直到”积木来解决这个问题！

它的执行逻辑是一直重复执行“嘴巴”里的积木，直到侦测的条件成立停止循环，再继续向下执行。

解释：角色在移动到鼠标指针之后就不需要再继续移动了，那么通过这个分析，让角色在碰到鼠标指针后就结束移动，就能实现我们想要的效果了。

3、小鱼的造型切换和重复移动

3.1小鱼切换造型

3.2小鱼的重复移动

我们可以重新拿出一组“当绿旗被点击”和“重复执行”来，提醒一下还需要用到“碰到边缘就反弹”！

4、小鱼碰到大嘴鱼增加得分后隐藏

其实就是重复执行判断碰到大嘴鱼之后增加得分、播放声音、隐藏。

5、小鱼随机出现和隐藏

 这一部分还是有些难度的，需要我们仔细分析！通过观察可以发现，小鱼会随机隐藏一段时间并移动到随机位置，然后出现一段时间再隐藏，小鱼每次出现移动的方向也有一定的随机角度，所以还需要添加一个面向随机方向。这样重复下去。

         

接下来将积木复制给其他的小鱼！不过要记得对参数进行适当的调整！

最后：

小鱼的积木中可以根据自己的喜好进行适当调整，比如等待的时间可以调整范围大一些，面向的方向也可以调整，还有得分也都可以调整。 发挥你满满的创意！

分享总结：

1、“面向鼠标指针”积木块

2、“重复执行直到”积木块

非常感谢大家的支持，如有更好的建议，请大家多多指教！