html5 canvas键盘左右移动矩形的问题

Posted 2023-03-21

我现在写的是按下左右键 x-=10 x+=10 ，但是每次+10画面会不流畅，+1流畅，但是+1速度太慢，加20移动速度才合适，但是加的越多闪烁越明显，这个问题怎么解决？

加入一个间隔30ms（举个例子，可以根据实际情况修改）的定时器，

当你按下某个键（以左键为例），修改一个全局量bLeftDown=true;

定时器中检测bLeftDown，当bLeftDown时，执行 x-=1  操作，

当你松开某个按键的时候，修改一个全局量bLeftDown=false;

这样就可以比较流畅的移动矩形了

我的空战游戏就是这么做的，效果很好

var VK_UP = 38;var VK_DOWN = 40;var VK_RIGHT = 39;var VK_LEFT = 37;
var VK_A = 65;
document.onkeydown = function(event)
    //这个函数处理按键按下事件
        if (event.keyCode == VK_A || event.keyCode == VK_LEFT && !bLeftDown)                     bLeftDown = true;        
//....其他判断
document.onkeyup = function(event)
    //这个函数处理按键松开事件
    //类似处理，省略

参考技术A 你可以试试+2+3+4这些数值，直到你觉得不闪烁，并且速度又适中的追问

加10他们都嫌速度慢啊