Javascript 游戏代码运行速度非常慢

Question

我想用 Javascript 构建一个来回射击游戏，作为我数字艺术的期末类(class)项目。然而，我编写的代码在几秒钟后就开始运行得很慢。起初我使用 setInterval()，但后来切换到 requestAnimationFrame() 以尝试提高性能。这不起作用。这是代码:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d")
var youtube = new Image();   // Create new img element
var bullet = new Image();
var background = new Image();
var spaceship = new Image();
var url = new Image ();
var moveh = 150
var shipx = 150
var right = true
var rightPressed = false
var leftPressed = false
var spacePressed = false
var bulletUp = 280
var shot = false
var explosion = false

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);


function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }else if(e.keyCode == 37) {
        leftPressed = true;
    }else if (e.keyCode == 32){
        spacePressed = true
    }
}
function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    } 
    else if (e.keyCode == 32){
        spacePressed = false;
    }
}
function moveship(){
    drawship()
    canvas.width = canvas.width
    if (rightPressed && shipx < 380){
        shipx += 7
    }
    else if (leftPressed && shipx > 3){
        shipx -= 7
    }

}
function drawyoutube(){
youtube.addEventListener("load", function() {
  ctx.drawImage(youtube, moveh,10);
}, false);
youtube.src = 'YouTube.png'; // Set source path
}
function drawbackground(){
background.addEventListener("load", function(){
ctx.drawImage(background, 0,0);
}, false);
background.src = "paper.jpg"
}


function drawship(){
spaceship.addEventListener("load", function(){
    ctx.drawImage(spaceship, shipx, 250);   
    }, false);
spaceship.src = "SpaceShip.png";
}

function MoveYoutube(){
    drawyoutube()
    if (right == true){
    moveh += 8
    if (moveh > 380){
        right = false
    }
    }
    else if(right == false){
        moveh -= 10
    }if (moveh < 3){
        right = true
    }
}
function drawbullet(){
    if (shot == true){
    bullet.addEventListener("load", function(){
        ctx.drawImage(bullet, shipx + 40, bulletUp);
    }, false);
    bullet.src = "bullet.png";
    }

    }
function shoot(){
    if (spacePressed){
        shot = true
    } 
    else if (shot == true){
        drawbullet()
        bulletUp -= 10
    }if (bulletUp == -20){
        shot = false
        bulletUp = 260
    }else if(bulletUp == 10){
        explosion == true
        write()

    }
    }


    }
function write(){
url.addEventListener("load", function(){
ctx.drawImage(background, 150,35);
}, false);
url.src = "url.png"
}


function draw(){
    drawbackground()
    moveship()
    shoot()
    MoveYoutube()
    requestAnimationFrame(draw)
}

我的直觉告诉我，这与我加载图像的方式有关，但我不知道。

Answer 1

正如 Alexander O'Mara 的评论中所述，您每次绘制图像时都会尝试重新加载图像。

在开始游戏逻辑之前，您需要加载所有图像资源的步骤。像这样的事情:

var imageSrcs = ['YouTube.png', 'bullet.png', 'paper.jpg', 'SpaceShip.png', 'url.png'];
var images = [youtube, bullet, background, spaceship, url];
var loadCount = 0; // keep a count of images that have loaded so far

function loadImages() {
   for(var i = 0; i<images.length; i++) {
       loadImage(images[i], imageSrcs[i]);
   }
}

function loadImage(img, src) {
    img.addEventListener('load', imageLoaded);
    img.src = src;
}

function imageLoaded() {
   loadCount++;
   if(loadCount === images.length) {
       startGame();
   }
}

然后，您可以从 startGame 开始渲染和更新循环，因为您知道所有图像都已加载。之后您就可以充满信心 ctx.drawImage(spaceship, 0, 0)应该将图像绘制到 Canvas 上，并且您不必将其包装在加载事件处理程序中。