玩家在 JavaScript 游戏中加速

Question

每次我使用向右或向左箭头键或 A 或 D 移动时，播放器都会加速。我不希望这发生。每当您按下移动键时，我希望播放器以相同的速度移动。我不知道为什么会这样。这是我的代码：

class Player {
    constructor(x, y, color, width, height, health, strength, type, speed) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.width = width;
        this.height = height;
        this.health = health;
        this.strength = strength;
        this.type = type;
        this.speed = speed;
    }
    draw() {
        c.beginPath();
        c.rect(this.x, this.y, this.width, this.height);
        c.fillStyle = this.color;
        c.fill();
        c.stroke();
    }
    moveLeft(){
        this.x -= this.speed;
    }
    moveRight(){
        this.x += this.speed;
    }
    moveUp(){
        this.y += this.speed;
    }
}

var x = canvas.width / 2;
var y = canvas.height / 2;
var left = false;
var up = false;
var right = false;
var left2 = false;
var up2 = false;
var right2 = false;
var pressing;

var player = new Player(x, y, 'red', 30, 30, 100, 30, 'basic', 2);
player.draw();


document.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
        case 37:
            left = true;
            setInterval(function pressing(){ 
            if(left2===false && left === true){   
                player.moveLeft();
            }
            },10) 
            break;

        case 65:
            left2 = true;
            setInterval(function pressing(){ 
            if(left===false && left2 === true){   
                player.moveLeft();
            }
            },10) 
            break;

        case 39:
            right = true;
            setInterval(function pressing(){ 
            if(right2===false && right === true){   
                player.moveRight();
            }
            },10) 
            break;
    
        case 68:
            right2 = true;
            setInterval(function pressing(){ 
            if(right===false && right2 === true){   
                player.moveRight();
            }
            },10) 
            break;   
            

            
    }
});

document.addEventListener("keyup", event => {
    clearInterval(pressing);
    if (event.keyCode === 37) { 
        left = false; 
    }
    if (event.keyCode === 65) {
        left2 = false;    
    }
    if (event.keyCode === 39) {
        right = false;    
    }
    if (event.keyCode === 68) {
        right2 = false;    
    }

});

我学习了很多教程，但找不到其他简单的方法来移动我的播放器。有没有人有其他移动策略或知道为什么这不起作用？

Answer 1

在每次按键时，您当前正在创建一个永不停止的新间隔。所以你实际上在做的是在每次按下键时创建重复的间隔。作为第一个粗略的修复，您可以尝试将 setInterval 的 return 值存储在键事件处理程序范围之外的变量中，并检查您是否有更早的间隔运行。如果是这样，请在继续之前清除它们。

由于 clearInterval 在输入非间隔值时不会抛出任何错误，您甚至不必在清除前进行检查：

let myInterval = null

document.addEventListener('keydown', (e) => {
  // Clean up any earlier mess.
  clearInterval(myInterval)

  // Create new mess.
  myInterval = setInterval(() => { /* do something */ }, 10)
})

Answer 2

我想你已经有了答案...
您正在创建多个永不停止的间隔。

但我不会在关键事件中使用间隔，而是只使用一个外部以特定频率绘制，然后使用更数学的方法来移动并设置玩家在这些事件中的速度，我们不向左或向右移动不需要不同的函数，我们只需要正确的速度值，正向增加（向右移动），负向减小（向左移动）...这里是代码：

class Player {
    constructor(pos, speed) {
        this.pos = pos
        this.speed = speed
    }
    draw() {
        this.pos.x += this.speed.x
        this.pos.y += this.speed.y
        c.clearRect(0, 0, canvas.width, canvas.height)
        c.beginPath()
        c.rect(this.pos.x, this.pos.y, 20, 20)
        c.fill()
    }
}

let canvas = document.getElementById("game")
let c = canvas.getContext("2d")

var player = new Player({ x: 60, y: 50 }, { x: 0, y: 0 })
setInterval(() => player.draw(), 50)

document.addEventListener("keydown", function (e) {
    switch (e.keyCode) {
        case 37:
        case 65:
            player.speed.x = -1
            break

        case 39:
        case 68:
            player.speed.x = 1
            break
    }
})

document.addEventListener("keyup", function (e) {
    switch (e.keyCode) {
        case 37:
        case 65:
        case 39:
        case 68:
            player.speed.x = 0
            break
    }
})

<canvas id="game"></canvas>

我确实简化了很多你的代码以保持这个例子的小...
如果你真的很想构建一个 JS 游戏，你应该看看一些游戏引擎：
https://github.com/collections/javascript-game-engines
这些是一些最流行的开源软件

玩家在 JavaScript 游戏中加速

Player Speeding Up In JavaScript Game

javascript

html

canvas

html5-canvas