Javascript 游戏 : Move character while key down

Question

我正在为学校制作一个简单的基于 Canvas 的 Javascript/HTML 游戏。我有一个 Angular 色，在二维水平上向左或向右移动。最初，我只是添加了一个事件监听器，并在一个开关中确定按下了哪个键，我会将 Angular 色的位置增加一定数量的像素。这导致运动非常不稳定且难以处理。

我想要的是按下键时平滑移动，松开时立即停止。

我在想，如果有某种“while key down”功能，那么我就可以使用它。

如果这是最好的方法，我该怎么做，如果有更好的方法，我很想知道。

注意:我宁愿不必使用外部库。我对 jQuery 没问题，但我不想学习一种全新的游戏方式。

Answer 1

您可能需要考虑在按住按钮时增加的变量中增加加速度，随着力的增加，玩家的速度也会增加，直到达到最大速度，这就是实现流畅感觉的方式。

当你向左/向右放开时，我添加了突然停止，但我不建议这样做，而是将 xforce 减小到 0，以获得平滑的感觉，同时也减慢速度。

pixelx 是你应该在每个循环中移动玩家的距离(游戏刻度)

window.addEventListener('keydown', handleKeyDown, true)
window.addEventListener('keyup', handleKeyUp, true)

var maxspeed = 6;
var xforce = 0;
var pixelx = 0;
var direction = 1;
var key_left = false;
var key_right = false;

在游戏循环中...

    if (key_left)
    {
      xforce--;
      direction = -1;
    }


    if (key_right)
    {
        xforce++;
        direction = 1;
    }


    if (xforce > maxspeed)
        xforce = maxspeed;
    if (xforce < -maxspeed)
        xforce = -maxspeed;


    if (!key_left && !key_right)
        {
               pixelx = 0;
               xforce = 0;
        }

    else
        {      
               pixelx += xforce;
        }


playerlocationx = playerlocationx + pixelx;
playerdirection = direction;

函数...

function handleKeyDown(event)
    {
        if (event.keyCode == 37) 
                key_left = true;
        else if (event.keyCode == 39)
            key_right = true;
    }

function handleKeyUp(event)
    {
           if (event.keyCode == 37) 
                key_left = false;
           else if (event.keyCode == 39)
                key_right = false;
    }