Question

我正在制作香草JS飘扬的小鸟游戏，但是我获得TypeError: Can't read property 'x' of undefined.的pipeTop变量。

虽然加载了背景图像，但我猜管道图像在调用pipeTop [i] .x之前没有加载。

我尝试预加载所有图像，并为我的window.onload函数添加一个draw，但是似乎没有在逻辑之前提供图像（或其属性）已实现。

// draw images

window.onload = function draw() {

    ctx.drawImage(bg,0,0);

    for (var i = 0; i < pipe.length; i++){
        ctx.drawImage(pipeTop, pipe[i].x, pipe[i].y);
        ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y+constant);

        pipe[i].x--;

        if (pipe[i].x == 125){
            pipe.push({
                x : cvs.width,
                y : Math.floor(Math.random()*pipeTop.height)-pipeTop.height
            });
        }
    }

    // Detect Collision

    if (bX + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeTop.width && (bY <= pipe[i].y + pipeTop.height || bY+bird.height >= pipe[i].y+constant || bY + bird.height >= cvs.height - fg.height)){
        location.reload();
    }

    if (pipe[i].x == 5) {
        score+= 5;
        score.play();
    }

我尝试过的预加载（现在已注释掉）是：

// function preloadImage(url) {
//     var img = new Image();
//     img.src = url;
// }

// preloadImage(
//     "images/pipeBottom.png",
//     "images/pipeTop.png",
//     "images/fg.png",
//     "images/bg.png",
//     "images/bird.png"
// )

具有typeError的行是：

    if (bX + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeTop.width && (bY <= pipe[i].y + pipeTop.height || bY+bird.height >= pipe[i].y+constant || bY + bird.height >= cvs.height - fg.height)){....

从本质上讲，我正在尝试在运行任何游戏逻辑之前加载图像，以免出现这些Undefined和Type错误。任何帮助表示赞赏。

图片无法预加载-导致TypeErrors

0 个答案: