3. 猫吃鱼¶
3.1. 教程介绍¶
上节课我们设计了姓名牌，知道怎么使用图片编辑器，可以自己设计精灵和背景。这节课我们要学习的是设置精灵的位置 和速度，以及逻辑条件语句在图形化编程中的使用方法。通过制作猫吃鱼的游戏来介绍新积木块的含义，在游戏编程场景 中的运用。
3.2. 课程目标¶
▪设置精灵的位置
▪设置使用按键控制精灵的速度
▪使用逻辑判断条件
3.3. 游戏步骤¶
▪创建精灵
▪设置精灵位置
▪显示精灵位置和速度
▪控制猫咪移动，设置移动速度
▪猫咪显示在屏幕中
▪设置猫吃到鱼的判断条件
▪添加“游戏胜利”积木块
▪添加当游戏更新事件
STEP 1 创建精灵
【编程操作①】：打开网页，创建项目，项目名字“猫吃鱼”。
【编程操作②】：创建小猫咪的精灵积木块命名为“猫咪”，类型选择Player（玩家），创建鱼的精灵积木块命名为“鱼”，类型选择Food（食物）。
我们可以看到在模拟器上，两个精灵是重叠在一起的，这是为什么呢？
这是因为精灵在一开始创建的时候，默认的出现的位置都是在屏幕的中央，那怎么让精灵出现在不同的位置呢？
我们可以使用精灵工具箱中的“设置精灵位置”积木块。
STEP 2 设置精灵位置
📌积木块位置：精灵-物理-设置mySprite的位置为xy
💡积木块含义：
X表示水平方向的数值，屏幕最左侧为0。
Y表示竖直方向的数值，屏幕最上方为0。
使用X轴坐标数值和Y轴坐标数值来确定精灵位置，这里就涉及到了在游戏中设置精灵位置用到的坐标。
生活中二维平面来确定位置，基本都是根据横向位置和竖向位置来确定的，比如电影院的座位，第几排第几座。
将屏幕放在二维坐标系中，坐标显示如下👇。
“设置mySprite位置为xy”积木块中的X就是我们的屏幕宽度，Y就是我们的屏幕高度，我们点击“设置精灵位置”积木块后面的参数，下方会出现一个滑杆。拖动滑杆，X（宽度）的范围是0-160。Y（高度）的范围是0-120。在拖动滑杆的过程中，下面对应的高度和宽度的直线也在变化，两条直线的交点位置就是精灵在屏幕中的位置。
通过拖动滑杆，我们知道了屏幕的坐标是什么范围以及对应的位置在哪里。
知道了屏幕的坐标值，我们给鱼设置一个位置值。
【编程操作③】：拖动“设置mySprite的位置为XY”积木块到当开机时内部，设置精灵积木块下方。mySprite下拉选择鱼，位置值X=20 Y=30。
现在鱼和猫咪在不同的位置了。
STEP 3 显示精灵位置和速度
我们有一个积木块可以显示精灵位置坐标和速度。
📌积木块位置：精灵-特效-设置mySprite保持在屏幕中标志为关
💡积木块含义：
用于更改精灵在屏幕上的反应方式的设置。
保持在屏幕中：精灵不能超过屏幕，到达边缘将被迫停留在屏幕
变为幽灵：精灵永远不会与其他精灵重叠，也不会与障碍物碰撞
自动销毁：精灵离开屏幕时会自动销毁
碰到墙壁时销毁：精灵与墙砖碰撞时会自动销毁
碰到墙壁时反弹：精灵与墙砖碰撞时会反弹回来
显示坐标与速度：精灵将在其下方显示其位置，速度和加速度
不可见：精灵不会被显示到屏幕上
相对于镜头：精灵是相对于镜头的，并且该精灵永远不会与其他精灵重叠或与障碍物碰撞
【编程操作④】：精灵工具箱中选择“设置mySprite保持在屏幕中标志为关”积木块到当开机时内部。
【编程操作⑤】：我们分别为猫咪和鱼设置一下显示坐标与速度，标志为开，看看屏幕上的显示坐标和我们设置的是不是一样。
STEP 4 控制猫咪移动，设置移动速度
我们需要让小猫移动，这样才能吃到鱼。移动精灵我们使用“用按键移动精灵”积木块。
【编程操作⑥】： 拖取“使用按键移动mySprite积木块”到当开机时内部，“显示坐标和速度”积木块下方。
移动猫咪的过程中，我们发现:
向上移动的时候，速度显示的是V 0,-100
向下移动的时候，速度显示的是V 0, 100
向左移动的时候，速度显示的是V -100,0
向右移动的时候，速度显示的是V 100,0
V(速度）后面第一个值是X轴的速度值，大于0是X轴正方向的速度，也就是向右移动的速度，小于0是X轴反方向的速度，也就是向左移动的速度。
同样的，V(速度）后面第二个值是Y轴的速度值，大于0是Y轴正方向的速度，也就是向下移动的速度，小于0是Y轴反方向的速度，也就是向上移动的速度。
为什么这个值是100呢，积木块后面加号可以设置移动的速度，我们点击“使用按键移动”积木块后面的+号，可以看到vx vy默认是100。
【编程操作⑦】：点击加号，修改速度数值，我们修改vx和vy为150。
修改之后，按下按键的时候，屏幕上显示的速度就变成了我们设置的值。感受一下，不同的速度值，精灵移动的时候有什么不同。
STEP 5 设置猫咪显示在屏幕中
我们发现，在控制猫咪移动的时候，猫咪可以移动到屏幕外，我们给猫咪做一个限制，限制在屏幕内移动。
【编程操作⑧】：拖取“设置mySprite保持在屏幕中标志为关”积木块到当开机时内部的最下方，mySprite选择猫咪，标志打开。
STEP 6 设置猫吃到鱼的判断条件
接下来我们就要让小猫咪去抓鱼啦！
怎么确定猫咪抓到鱼了呢？
我们可以在屏幕上看到猫咪和鱼的坐标，当猫咪和鱼的坐标一样的话，我们就认为猫咪抓到鱼了，游戏胜利。
解读一下这个规则，我们需要判断喵咪的X坐标=鱼的X坐标，并且猫咪的Y坐标=鱼的Y坐标。当满足这个条件时，游戏胜利。
这里就涉及到了逻辑工具箱中的“判断条件”积木块，“比较”积木块，“布尔值”积木块以及积木块的叠加。
逻辑工具箱中的积木块是我们在编程游戏时经常会遇到的，我们通过猫吃鱼的游戏来讲解其中的积木块的使用方法。
带有卡槽的积木块可以与带有卡槽的积木块上下搭建。
但是必须要在嵌入到开口类型的积木块内部才能够运行。
不带卡槽的菱形/圆形的积木块可以替换其他积木块中的一些特定的菱形框/圆形框。
Tips：有些积木块虽然可以替换但是不能运行，当程序提示错误时，就需要检查积木块的叠加是否正确。
拆解好规则，我们从外往里搭建积木块。
判断条件：
在游戏中，经常需要使用到“判断条件”积木块，比如玩家到达某一处，就能开启一项技能，满足什么条件，就可以获得一个装备等等。在猫吃鱼的游戏中，需要判断当猫的坐标和鱼的坐标一样，就代表猫吃到了鱼。
使用判断条件，判断为true（真），运行内部程序，在游戏中需要判断猫咪和鱼的坐标位置一致。
📌积木块位置：逻辑-条件-如果为true则
💡积木块含义：
“如果为true则”积木块作为“判断条件”积木块，程序会做一个判断，只有当判断为true时，才运行积木块内部的程序。这里的true可以替换为其他条件，如变量与变量之间的比较，以及变量与值之前的比较等等。
打开逻辑工具箱中的“如果为true则”积木块到代码区任意位置，我们来看看这个积木块的使用方式。
点击加号出现否则，否则内部可以嵌入积木块。
这样就出现了两个判断条件，一个是true（真），一个是否则，即是false（假）。当判断到true，运行true内部程序，判断不是true，则运行否则内部的程序。
继续添加加号，可以不断为程序增加判断条件。
true作为条件可以替换成工具箱中的其他条件。
比如控制器中的“当按键被按下”积木块。
游戏中的“询问”积木块。
逻辑中的“比较”和“布尔值”积木块（最常见）。
【编程操作⑨】：拖取“如果true则”积木块到代码区任意位置。
判断条件积木块设置好了，游戏中两个条件为并列关系，猫咪的X轴=鱼的X轴和猫咪的Y轴=鱼的Y轴，将并列关系积木块替换判断条件中的true。
“与”积木块
这时候需要使用到逻辑工具箱中的布尔值“与”积木块。
📌积木块位置：逻辑-布尔值-与
💡积木块含义：
对其他类型（数字，字符串）进行选择出的值。
布尔值栏目中有三个菱形积木块“与”，“或”和“非”。
“A”与“B”：A和B两个条件为并列关系，必须同时满足才能运行。
“A”或“B”：A和B两个条件为或者关系，只需要满足一个就能运行。
非“A”：排除A这个条件，执行除此之外的其他条件。
【编程操作⑩】：逻辑工具箱中选择“与”积木块替换条件工具箱中的“true”。
“比较”积木块
猫咪的X轴=鱼的X轴，猫咪的Y轴=鱼的Y轴，需要用到“比较”积木块。
📌积木块位置：逻辑-比较-“=”
💡“比较”积木块含义：
下拉“比较”积木块中的比较选项，有多种比较的选择。比较前后的两个圆形框可以使用其他积木块替代，在游戏中，我们替换成猫的X轴坐标和鱼的X轴坐标。
【编程操作⑪】：拖取“=”积木块到“与”积木块的两个菱形框中。
精灵坐标
📌积木块位置：精灵-物理-mySprite X
💡积木块含义：
初始积木块的设置为：mySprite x，即精灵的X轴位置，“x”下拉出现有关精灵的不同选项。
【编程操作⑫】：拖取“mySprite X”积木块到“等于”积木块的两个圆形框中，第一个精灵选择“猫咪”，第二个精灵选择“鱼”。
【编程操作⑬】：同样的，判断Y坐标也是一样，点击右键选择重复复制此积木块，修改猫咪和鱼后面的选项为“Y”（Y轴坐标）。
完整的的猫吃到鱼的判断条件图形化编程如下。
STEP 7 游戏胜利
当程序判断到猫与鱼的坐标位置一致时，游戏胜利，将“游戏胜利”积木块拖取到“如果true则”积木块内部。
📌积木块位置：游戏-游戏内容-游戏结束
💡积木块含义：
“游戏结束”积木块后面加号可以选择游戏获胜和游戏失败。再点击加号，可以为游戏结束时添加特效，下拉有丰富的特效可供选择。
当运行“游戏结束”积木块时，游戏停止，屏幕会出现游戏胜利/游戏输了，继续按控制键，将重新进入游戏。
【编程操作⑭】：拖取“游戏结束”积木块到“如果为true则”积木块内部，点击加号，选择获胜，并为游戏获胜添加特效
STEP 8 添加当游戏更新事件
把“如果true则”积木块拖到当开机时内部，会发现，当猫咪吃到鱼时，游戏并没有提示胜利，这是为什么呢？
因为我们把判断条件放在开机时内部，这样的话只会判断一次。
我们一开始的时候没有达到这个条件。
怎么才能不停的判断呢？
这里需要将“如果true则”积木块放置到“当游戏更新时”积木块的事件当中运行
当游戏更新时
📌积木块位置：游戏-游戏内容-当游戏更新时
💡积木块含义：
每次游戏更新，都会去执行里面的程序，我们游戏是不断更新的，中间的间隔时间非常短可以忽略不计，所以你可以理解为这个积木块是无限循环积木块。内部的积木块是伴随着整个游戏运行的。
【编程操作⑮】：拖取“当游戏更新时”积木块到代码区任意位置，将”如果则”积木块拖取到”当游戏更新时”积木块内部。
现在来试一下吧！
3.4. 扩展游戏¶
加上倒计时
猫吃到鱼并不难，但是如何让猫在规定的时间内吃到鱼呢?找一找工具栏中什么积木块是可以运行倒计时的？
优化猫吃鱼
在移动猫咪时，要让猫咪和鱼坐标完全相同有点困难，有时候喵咪已经碰到鱼了，但是坐标不同所以游戏没有胜利，怎么改进？