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

Question

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

Answer 1

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

建議是利用 Canvas 和 WebGL 來配合 Javascript 寫遊戲，一些HTML5遊戲框架也很好用，例如

pixi.js

Answer 2

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