Canvas干游戏实践分享(八)

Canvas做游戏实践分享(八)
5.边界控制与摩擦力

????? 在大多数的游戏设计中，会有环境边界控制来帮助我们保证画布中的对象在运动的过程中不会脱离画面。同时，对象的运动环境很少会是真空的情况，所以就会存在着摩擦力阻碍物体的速度变化。

5.1??? 环境边界控制

????? 如果我们关注的运动对象在移动的过程中消失在了视窗之外，我们有两大类的选择：一种是将对象重新移动到当前的视窗中或者不再关注此对象，另一种方式是使当前的视窗跟随运动对象移动。在程序实现上，这两类很相近。下面我们主要针对第一类来进行分析。

设置边界

????? 运动对象的运动边界可以是整个Canvas视窗，也可以只是其中的一小块，在实现上没本质上的差异。我们假设边界为整个Canvas视窗。即：

第一幅图我们可以看到，小球的一半已经进入了边缘，此时我们的程序才检测出小球运动超出了画布。如第二幅图所示，我们需要特殊处理，在小球的球心离边缘的距离小于其半径时，就需要进行边缘越界处理。如下：


画布扩展???????画布扩展的实现很简单，如果运动对象超出画布的右侧，则将其移动到画面的左侧（反之亦然），如果运动对象超出画布的上方，则将其移动到画面的下侧（反之亦然）。其实现原理与上述的对象回收类似。我们对之前介绍过的键盘控制飞船应用进行改造，只需要在其帧处理函数animationLoop中ship.paint(context)前加入如下的边界处理代码即可：
                    if(ship.x-ship.width/2&gt;right){                        ship.x=left-ship.width/2;                    }else if(ship.x+ship.width&lt;left){                        ship.x=right+ship.width/2;                    }else if(ship.y+ship.height/2&lt;top){                        ship.y=bottom+ship.height/2;                    }else if(ship.y-ship.height/2&gt;bottom){                        ship.y=top-ship.height/2;                    }
??

Canvas干游戏实践分享(八)

热点推荐