Javascript 玩家移动缓慢

Question

更新将其更改为以下内容并注意到速度有所提高。现在的问题是播放器只会滑动而不对帧进行动画处理。

    var animator, frames;
    animator = window.setInterval(function(){
    if(currentFrame == totalFrames){
        clearInterval(animator);
        currentFrame = 0;
        update();
        isMoving = 0;
        return;
    }
    xPosition += x;
    yPosition += y;
    frames = window.requestAnimationFrame(animator);
    currentFrame++;
    update();   

},frames);

我当前面临的一些问题是: map 边缘代码部分完全损坏。我只是想让玩家不能移动超出canvas.width/canvas.height。另外，我的球员 Action 非常迟缓且 react 迟钝。我认为这是因为我添加了 isMoving 检查。我希望能够移动得更顺畅。现在 Angular 色需要很长时间才能移动，我感觉自己好像落后了。另外，由于某种原因，有时它会移动多次。当它发生时，它是完全随机的。任何帮助将不胜感激

var playerSprite = new Image();
playerSprite.src = "male.png";

var playerWidth = 64;
var playerHeight = 64;
var currentFrame = 0;
var totalFrames = 8;

var moveDistance = 4; // move 4 pixels
var xPosition = 300;
var yPosition = 200;
var direction = 2; // south, options: 0 - 3

var isMoving = 0;

var canvas, context;
window.addEventListener("load", function(){
    canvas = document.getElementById('map');
    context = canvas.getContext('2d');
 })


function draw(){
    context.drawImage(playerSprite,currentFrame * playerWidth, direction*  playerHeight ,playerWidth,playerHeight,xPosition,yPosition,playerWidth,playerHeight);
}

function update()
{
    clearMap();
    draw();
}

function move(x, y){

    if(isMoving)return;
    isMoving = 1;

    if(x > 0) direction = 3;
    else if(x < 0) direction = 1;
    if(y > 0) direction = 2;
    else if(y < 0) direction = 0;

    //update direction no matter what, implemented 
    // in order for directions to update
    // when changing directions in map edges
    //update();

/*      Broken

    if(xPosition + playerWidth + x > canvas.width)return; //works
    else if(xPosition - x < 0)return; // player gets stuck

    if(yPosition + playerHeight + y > canvas.height)return; //works
    else if(yPosition - y < 0)return; // player gets stuck

    //xPosition += x;
    //yPosition += y;
*/
    //actual animation update
    var animator;
    animator = window.setInterval(function(){
        if(currentFrame == totalFrames){
            clearInterval(animator);
            currentFrame = 0;
            update();
            isMoving = 0;
            return;
        }
        xPosition += x;
        yPosition += y;
        currentFrame++;
        update();

    },1000/16);
}
function clearMap(){
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function keyPress(e)
{

    if(currentFrame == totalFrames){
        currentFrame = 0;
    }

    switch(e.keyCode){
        case 38: move(0, -moveDistance); break;
        case 40: move(0, +moveDistance); break;
        case 39: move(+moveDistance, 0); break;
        case 37: move(-moveDistance, 0); break;
    }

}

window.addEventListener("load", update, false);
window.addEventListener("keydown",keyPress);

Answer 1

我改变的要点:

• 在任何地方都不能使用setInterval。相反，我们让浏览器使用 requestAnimationFrame 以它可以处理的速率处理 FPS。
• 一个中央游戏循环 (update())。以前，您需要进行大量计算，并在每次按下按键时启动新的后台循环。那很糟。如果有人乱按箭头键，浏览器将必须在后台处理 100 多个 setInterval。
• 我们只是使用一个变量来跟踪按下了哪些按钮，而不是在按键事件中进行任何计算。然后，在每帧发生的游戏循环中，如果按住箭头键，我们可以将玩家移动几个像素。

给你的练习:

• 动画速度非常快，因为玩家帧在每个游戏帧中都会前进。慢点!
• 如果更快的计算机以 60 fps 运行，则玩家每秒将移动 60 * 4 = 240 像素。如果较慢的计算机以 20fps 运行，则玩家每秒仅移动 20 * 4 = 80 像素。这实际上是一个巨大的差异。为了使您的游戏在任何平台上都能一致运行，您应该根据游戏运行的速度或多或少地移动玩家。 Here's a good article让您开始。还有requestAnimationFrame文档会很有帮助。

代码如下:

var playerSprite = new Image();
playerSprite.src = "male.png";

var playerWidth = 64;
var playerHeight = 64;
var currentFrame = 0;
var totalFrames = 8;

var direction = 2; // south, options: 0 - 3
var moveDistance = 4; // move 4 pixels
var xPosition = 300;
var yPosition = 200;

var left = 0,
    right = 0,
    up = 0,
    down = 0;

var canvas, context;

window.addEventListener("keydown", keyPress);
window.addEventListener("keyup", keyRelease);
window.addEventListener("load", function(){
    canvas = document.getElementById('map');
    context = canvas.getContext('2d');

    // tells the browser to call update() as soon as it's ready
    // this prevents lockups, and also the browser regulates the FPS
    window.requestAnimationFrame(update);
});

function update() {
    // EVERYTHING game related happens in update (except listening for key events).
    // This keeps everything organized, and prevents any lag/slowdown issues

    // handles player movement and animation
    movePlayer();

    // handles all drawing
    draw();

    // lets the browser know we're ready to draw the next frame
    window.requestAnimationFrame(update);
}

function movePlayer() {
    if(left) {
        xPosition -= moveDistance;
        direction = 1;
    }
    if(right) {
        xPosition += moveDistance;
        direction = 3;
    }
    if(up) {
        yPosition -= moveDistance;
        direction = 0;
    }
    if(down) {
        yPosition += moveDistance;
        direction = 2;
    }

    // all this code happens every frame
    // in english: if we're moving, advance to the next frame
    if(left || right || up || down) {
        currentFrame ++;
        if(currentFrame == totalFrames) currentFrame = 0;
    }
}

function draw() {
    // clear the map
    context.clearRect(0, 0, canvas.width, canvas.height);

    // draw the next frame
    context.drawImage(playerSprite, currentFrame * playerWidth, direction * playerHeight,
                                    playerWidth, playerHeight,
                                    xPosition, yPosition,
                                    playerWidth, playerHeight);
}

// keyPress and keyRelease ensure that the variables are
//  equal to 1 if pressed and 0 otherwise.
function keyPress(e)
{
    switch(e.keyCode){
        case 38: up = 1; break;
        case 40: down = 1; break;
        case 39: right = 1; break;
        case 37: left = 1; break;
    }
}

function keyRelease(e)
{
    switch(e.keyCode){
        case 38: up = 0; break;
        case 40: down = 0; break;
        case 39: right = 0; break;
        case 37: left = 0; break;
    }
}