0

我迫切需要解决我在 html5 画布中遇到的问题。我正在制作一款教育游戏，但在添加了另一张照片并进行了必要的代码更改后，画布却空白了。我恢复了更改，但问题仍然存在。我花了大约一周的时间试图修复它，但我已经没有想法了:(这是相关代码（如果有人需要另一部分，请直说）：

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 1041;
canvas.height = 550;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/introbackground.png";
//.... rest of the photos load like this so I won't put it...
// Level 1 background 1 image
var bbg1Ready = false;
var bbg1Image = new Image();
bbg1Image.onload = function () {
    bbg1Ready = false; //Exception since it shouldn't load at the beginning
};
bbg1Image.src = "images/pollutedbeach1.png";

// Game objects
var hero = {
    speed: 200 // movement in pixels per second
};
var level1;
var level2;
var biolevel = false;
//...Code to make the hero picture move with arrow keys and to reset the game are skipped...
if (hero.x <= (level1.x + 345)
&& level1.x <= (hero.x + 32)
&& hero.y <= (level1.y +50)
&& level1.y <= (hero.y + 32)){
    biolevel = true;
    return biolevel;
}

var render = function () {
    if (bgReady) {
        ctx.drawImage(bgImage, 0, 0);
    }
    //...The same for all photos previously loaded...
    if (biolevel == true){
        level1Ready = false;
        level2Ready = false;
        bbg1Ready = true;
        hero.speed = 125;
    }
};
//...Then the main game loop to animate it...

对不起，有点长，但我真的需要一个解决方案。谢谢！

4

0 回答 0