如何将逼真的运动添加到您的HTML5游戏 - 傻瓜

看看空间。 HTML。这个简单的游戏提供了一个很好的例子应用逼真的运动到您的HTML5游戏。它利用了在经典游戏小行星和太空战中出名的控制方案。（尽管小行星是众所周知的， Spacewar！是迄今为止较早和更有影响力的游戏。 - 1 - >

点击这里获得完整的体验。

如何为你的游戏对象增加一个力矢量

船由箭头键控制，但牛顿的效果在空间中比在地面上更容易看到（没有讨厌的阻力妨碍）。左右方向键旋转船只，但不影响船舶的运动。向上箭头发射火箭，增加一个力量向量在船目前面对的方向。

这是代码：

space var ship; var游戏;函数Ship（）{tShip = new Sprite（game，“ship。png”，25,25）; tShip。（3）setSpeed; tShip。 checkKeys = function（）{if（keysDown [K_LEFT]）{

这个。 changeImgAngleBy（-5）; } if（keysDown [K_RIGHT]）{ 这个。 changeImgAngleBy（5）; } if（keysDown [K_UP]）{ 这个。 addVector（this。getImgAngle（），。1）; （）;}};}} // //结束函数返回tShip;} //对象定义函数init（）{game = new Scene（）; ship = new Ship（）;游戏。 SETBG（ “黑色”）;游戏。 start（）;} //结束init函数update（）{游戏。明确（）;船。 checkKeys（）;船。 update（）;} //结束更新 如何模拟游戏中的空间

下面是简要的例子：

以正常的方式开始示例。像最简单的游戏演示一样，从一个精灵和一个场景开始。因为这个船会有一个自定义的方法，所以你把它做成一个独特的对象。

给船一个checkKeys（）方法。 checkKeys（）方法查找按键并相应地改变船的行为。

改变图像角度。一个精灵实际上有两个不同的角度。它可以有一个指向的角度（在simpleGame中称为imgAngle）和它正在移动的角度（称为moveAngle）。当你改变角度时，假定物体只是沿着它所面对的方向行进，就会改变运动和图像角度。

对于简单的例子来说，这很好，但是许多种运动需要将图像和运动角度去耦合。 changeImgAngleBy（）方法允许您在不改变运动角度的情况下更改图像指向的方向。（还有一个changeMotionAngle（）方法，但不经常使用。）
添加一个力矢量来模拟推力。当用户按下向上箭头时，船只发射主火箭。这增加了一个小的力量矢量在船目前的方向。使用getImgAngle（）方法来确定船舶当前所面对的方向，并使用该值指定应该在哪里添加力量。

因为这个代码是在动画循环中发生的，并且在按下箭头键时被放大，所以只需要很小的力量。