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

JavaScript
1 
<!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;
}

image
image1596Ɨ767 35.4 KB

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

2

Hello @anshsansh.
gameObstacle is an array but I am also seeing gameObstacle.update(). Are you sure you are not mixing up names somewhere in your code? Is gameObstacle.update() an array method?

1 Like
3

Greetings to all. I wonder how mods for games are created? Veteran developers have cracked almost all of the games. Kick the buddy mod apk has been cracked so cleverly by wicked developers. If someone could guide me on this, I would appreciate it

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.