Question

我正在尝试从w3学校复制游戏教程。到目前为止，一切都已成功，直到我必须通过将其定义为数组并每隔150个间隔调用.push（）函数来创建多个障碍的部分。

当我尝试使用这个确切的Javascript代码运行游戏时，它会一直在我的控制台中返回错误

pbf.js：108 Uncaught TypeError：pbfObstacle.push不是函数在updateGameArea（pbf.js：108）

我想知道是否有人可以帮助我解决这个问题，这样它就会产生多个障碍，而不是返回控制台错误。任何帮助深表感谢。谢谢。

这是我的javascript：

// This will declare the variables to create the canvas on the <body>
var gameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.style.width = "1920px";
        this.canvas.style.height = "auto";
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        // creating frames that we can use to count
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
            window.addEventListener('keydown', function(e) {
                gameArea.keys = (gameArea.keys || []);
                gameArea.keys[e.keyCode] = true;
            })
            window.addEventListener('keyup', function(e) {
                gameArea.keys[e.keyCode] = false;
            })
        },
        clear : function() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        },
        // this will clear the interval when one component crashes another
        stop : function() {
            clearInterval(this.interval);
        }
    }

// This will make the game piece
var pbfGamePiece;

function component (width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.color = color;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = gameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
    }
    // this will check if one component crashes another
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || 
                (mytop > otherbottom) ||
                (myright < otherleft) ||
                (myleft > otherright)) {
                    crash = false;
                }
                return crash;
    }
}
// This will create the pbfObstacle into an array
var pbfObstacle = [];

// This loads the function tagged on the <body>
function startGame() {
    gameArea.start();
    pbfGamePiece = new component(8, 15, "#3baffc", 15, 115);
    pbfObstacle = new component(3, 50, "#ff4000", 95, 100);
}


// This clears and updates the game area while also adding multiple obstacles
function updateGameArea() {
    var x, y;
    for (i = 0; i < pbfObstacle.length; i += 1) {
        if (pbfGamePiece.crashWith(pbfObstacle[i])) {
            gameArea.stop();
            return;
        } 
    }
    gameArea.clear();
    gameArea.frameNo += 1;
    if (gameArea.frameNo == 1 || everyinterval(150)) {
        x = gameArea.canvas.width;
        y = gameArea.canvas.height - 200;
        pbfObstacle.push(new component(10, 200, "green", x, y));
    }
    for (i = 0; i < pbfObstacle.length; i += 1) {
        pbfObstacle[i].x += -1;
        pbfObstacle[i].update();
    }
    pbfGamePiece.newPos();    
    pbfGamePiece.update();
}

// This function returns every true interval
function everyinterval(n) {
    if((gameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

// These functions will allow the buttons to create movement of the objects

function moveup() {
    pbfGamePiece.speedY -= 1;
}

function movedown() {
    pbfGamePiece.speedY += 1;
}

function moveleft() {
    pbfGamePiece.speedX -= 1;
}

function moveright() {
    pbfGamePiece.speedX += 1;
}

// This will stop the game pieces animation from not stopping

function stopMove() {
    pbfGamePiece.speedX = 0;
    pbfGamePiece.speedY = 0;
}

HTML非常简单：

<body onload="startGame()">
....
</body>

Answer 1

function startGame() {
  gameArea.start();
  pbfGamePiece = new component(8, 15, "#3baffc", 15, 115);
  pbfObstacle.push(new component(3, 50, "#ff4000", 95, 100));
}

<{1>} startGame()您要将新组件分配给pbfObstacle。所以它显示错误。推动new component它将起作用。

Answer 2

我只需要删除startGame函数中的pbfObstacle行。

// This loads the function tagged on the <body>
function startGame() {
    gameArea.start();
    pbfGamePiece = new component(8, 15, "#3baffc", 15, 115);
}

当frameNo增加时，试图创建多个障碍

2 个答案: