目录:
视频: 8.13 H5 如何实现动画控制 2024
矢量添加原理在许多方面对您的HTML5游戏非常有用。一方面，它可以增加拖曳效应，从而导致更精确的陆地车辆行为。想象一下，你的车在半夜（又一次）被困在一个不好的邻居里。你不能直接改变汽车的位置。你甚至不能改变它的动议。
你必须做的是增加一个力量。当你增加力量时，你慢慢地加入运动矢量。最终，汽车开始移动。如果你停止施加力量，它将最终停止，因为抗风和滚动阻力减慢了汽车的速度。
<！ --1 - >游戏拖动比赛
拖动。 html的例子显示了一个现实的汽车，加速器（在这种情况下，向上的箭头）被释放，缓慢加速和减速停止。
你真的需要看到程序的行动，以欣赏其行为。
拖放var游戏; var boat;函数Car（）{tCar = new Sprite（game，“car。png”，100，50）; TCAR。 checkKeys = function（）{console。日志（这个速度）;如果（keysDown [K_LEFT]）{this。 changeImgAngleBy（-5）;} if（keysDown [K_RIGHT]）{this。 changeImgAngleBy（5）;} if（keysDown [K_UP]）{ this。 addVector（this。imgAngle，2）; } //以当前的方向移动这个。 addVector（this。imgAngle，2）;} //结束checkKeys tCar。 checkDrag = function（）{ speed = this。 getSpeed（）; 速度* =。 95; 此。 setSpeed（速度）; //结束checkDrag 返回tCar;} //结束汽车def函数init（）{game = new Scene（）;游戏。 SETBG（ “#666666”）;汽车=新车（）;游戏。 start（）;} //结束init函数update（）{游戏。明确（）;汽车。 checkKeys（）;汽车。 checkDrag（）;汽车。 update（）;} //结束更新
如何在游戏中实现拖拽
这个版本使用更逼真的基于力量的动作。当用户按下向上箭头时，汽车加速。如果用户按下向上箭头，汽车自然达到最高速度。当用户释放向上箭头时，汽车逐渐减速并最终停止。力矢量是关键。
这是如何工作的：
-
建立一个基本的车辆。
使用checkKeys（）方法创建一个自定义精灵，并检查所有正常的箭头键。检查左右箭头的代码正是你所期望的。
-
用力矢量向前移动。
前进的代码略有不同。直接修改速度，而不是在汽车当前的方向施加一个力量。使用精灵的getImgAngle（）方法来确定汽车正在指向哪个方向，并在该方向添加一个小的力量。
-
创建一个checkDrag（）方法。
汽车不能无动于衷。风和地面的阻力会使他们放慢速度，最终他们会停下来。通过将checkDrag（）方法添加到对象来模拟各种拖曳力。
-
将速度乘以一个阻力系数。
在这个例子中，各种拖曳力量将会在每一帧中以5％的速度盗取车辆。请记住，游戏以每秒20帧的速度运行，所以阻力相当大。您可以通过多种方式实现阻力效果，但最简单的方法是将车辆的速度乘以小于1的某个值。
-
无刹车！
什么自尊的街机汽车有刹车？说真的，你可能想添加一个向下的箭头输入，但不应该是必要的，因为汽车将自行减速。
-
季节去品尝。
这个例子提供了一个粗略的轮廓，但是你可以修改一些值来得到你想要的汽车性能。您可以通过按下加速器时增加力矢量来模拟更强大的引擎（或更小的质量）。
如果用户按下右箭头或左箭头，则可以通过更改转动速度来模拟更敏感的悬挂。您也可以通过修改阻力比模拟一个或多或少效率的汽车。现在，汽车以任何速度转动，但是如果汽车速度低于一定速度，则可以防止左右箭头输入。
