Following code is resulting one error - Uncaught TypeError: gameObstacle.push is not a function at updateGameArea

DD224 · January 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Game Dev</title>
    <style>
        canvas {
            border: 1px solid #d3d3d3;
            background-color: #f1f1f1;
            align-items: center;
            justify-content: center;
        }
        .you-style {
            text-align: center;
            width: 480px;
        }
    </style>
</head>
<body onload="startGame()">
    <div class="you-style">
    <button onmousedown="moveUp()" onmouseup="stopMove()">Up</button><br><br>
    <button onmousedown="moveRight()"onmouseup="stopMove()">Right</button>
    <button onmousedown="moveLeft()"onmouseup="stopMove()">Left</button><br><br>
    <button onmousedown="moveDown()"onmouseup="stopMove()">Down</button>
    </div>
    <script src="index.js"></script>
</body>
</html>

index.js

var gamePaddle;
var gameObstacle = [];

function startGame() {
    gamePaddle = new component(30, 30, "#f00", 10, 120);
    gameObstacle = new component(10, 200, "green", 300, 120);
    myGameArea.start();
}

var myGameArea = {
    canvas: document.createElement("canvas"), //<canvas></canvas>
    start: function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");

        document.body.insertBefore(this.canvas, document.body.childNodes[0]);

        this.frameNo = 0;

        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', (e) => {
            myGameArea.key = e.keyCode;
        })
        window.addEventListener('keyup', (e) => {
            myGameArea.key = false;
        })
    },
    clear: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop: function() {
       clearInterval(this.interval);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;

    this.speedX = 0;
    this.speedY = 0;

    this.update = function() {
    ctx = myGameArea.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.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;
}
}

function updateGameArea() {
    var x, y;

    for (let i = 0; i < gameObstacle.length; i+= 1) {
        if (gamePaddle.crashWith(gameObstacle[i])) {
            myGameArea.stop();
            return;
        }
    }

    myGameArea.clear();
    myGameArea.frameNo += 1;
    
    if (myGameArea.frameNo == 1 || eachInt(150)) {
        x = myGameArea.canvas.width;
        y = myGameArea.canvas.height - 200;
        gameObstacle.push(new component(10, 200, "green", x, y));
    }

    for (let i = 0; i < gameObstacle.length; i+= 1) {
        gameObstacle[i].x -= 1;
        gameObstacle.update(); 
    }
    
    gamePaddle.newPos();
    gamePaddle.speedX += 0;
    gamePaddle.speedY += 0;
    if (myGameArea.key && myGameArea.key == 37) {gamePaddle.speedX = -1; }
    if (myGameArea.key && myGameArea.key == 39) {gamePaddle.speedX = 1; }
    if (myGameArea.key && myGameArea.key == 38) {gamePaddle.speedY = -1; }
    if (myGameArea.key && myGameArea.key == 40) {gamePaddle.speedY = 1; }
    gamePaddle.update();
    
    
    /*if (gamePaddle.crashWith(gameObstacle)) {
        myGameArea.stop();
    } else {
    myGameArea.clear();
    gamePaddle.newPos();
    gameObstacle.update();
    gameObstacle.x -= 1;
    gamePaddle.speedX += 0;
    gamePaddle.speedY += 0;
    if (myGameArea.key && myGameArea.key == 37) {gamePaddle.speedX = -1; }
    if (myGameArea.key && myGameArea.key == 39) {gamePaddle.speedX = 1; }
    if (myGameArea.key && myGameArea.key == 38) {gamePaddle.speedY = -1; }
    if (myGameArea.key && myGameArea.key == 40) {gamePaddle.speedY = 1; }
    gamePaddle.update();
    }*/
}

function eachInt(n) {
    if((myGameArea.frameNo / n) % 1 == 0) {
        return true;
    }
    return false;
}

function moveUp() {
    gamePaddle.speedY -= 1;
}

function moveDown() {
    gamePaddle.speedY += 1;
}

function moveRight() {
    gamePaddle.speedX -= 1;
}

function moveLeft() {
    gamePaddle.speedX += 1;
}

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

I'm not understanding why it is showing an error, even though gameObstacle is an array.

Ingolme · January 6

It's not an array because you overwrote the array with an object of type "component" on this line:

gameObstacle = new component(10, 200, "green", 300, 120);

Sign In

Following code is resulting one error - Uncaught TypeError: gameObstacle.push is not a function at updateGameArea

Recommended Posts

DD224

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity