Jump to content

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


DD224
 Share

Recommended Posts

<!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.thumb.png.d93f66fc59f29bb1a4cc58f8c5dacbf0.png

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

 

 

Link to comment
Share on other sites

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);

 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...