如何让键盘控制物体平滑的运动?

justPassBy
  • 572

比如我要做一个微信的飞机大战, 要用键盘控制飞机的移动。
我用的办法是监听键盘的上下左右按键,每次事件发生时,让飞机这个divlefttop发生变化(即增加或减少ins), 但是如果ins很小,那么移动飞机很累。如果ins很大,那么移动很突兀, 而且飞机的移动会有盲区。
这要如何解决呢?

回复
阅读 3k
2 个回答
Tomoe
  • 6.2k

首先建議不要直接使用 Dom 來寫遊戲,Dom的操作算是挺消耗資源的,當物件一多,瀏覽器的重繪肯定會造成不流暢甚至卡死的問題。

建議是利用 CanvasWebGL 來配合 Javascript 寫遊戲,一些HTML5遊戲框架也很好用,例如

pixi.js

我仍旧在这里
  • 3.3k

首先如上楼所说,绝对不要用DOM去写游戏,也没有哪个游戏是用DOM写的。
其次,如果仅从动画层面考虑,通过改变DOM元素的left,top等会影响DOM结构的属性来形成的动画,效果还不如css3的translate,你可以去尝试比较两种动画的性能。
最后,建议使用canvas,它提供了丰富的API,基本可以满足你做打飞机游戏的需求。根据你问题的需要,你可以参考我这篇文章中,文章末尾太空船的示例代码《每周一点canvas动画》——速度与加速度(2)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏