玩家在 JavaScript 游戏中加速 [重复]

Posted 2023-03-05

【中文标题】玩家在 JavaScript 游戏中加速 [重复]

【英文标题】：Player Speeding Up In JavaScript Game [duplicate]

【发布时间】：2021-12-20 08:39:10

【问题描述】：

每次我使用左右箭头键或 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;    
    

);

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

【问题讨论】：

您绝不会清除这些间隔，因此每次按下按钮都会设置一个新的间隔，从而使整个过程变得越来越快。要让游戏运行，您可能应该有一个“事件循环”，通常使用requestAnimationFrame，在该循环中您检查按钮的状态并确定要做什么。

【参考方案1】：

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

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

let myInterval = null

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

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

【参考方案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 这些是一些最受欢迎的开源代码