Javascript Issue - Uncaught TypeError: Cannot read property 'x' of undefined

Question

I'm making a game where the rectangles are drawn at the top of the screen and move down towards the bottom. The rectangles will draw on the screen initially and then they will disappear and I will get the error "JavaScript Uncaught TypeError: Cannot read property 'X' of undefined"

Below is the code and the error is on the "sprite.Rect.X" line

var gCanvas;
var gLoopCounter;
var gGameOver;
var gSprites;

function body_load() {
    gameInit();
    gCanvas = canGame.getContext("2d");
    //canGame.onMouseDown = canCanvas_onMouseDown(e);
    setInterval(gameLoop, 33);
}

function gameInit() {
    gLoopCounter = 0;
    gGameOver = false;

    gSprites = new Array();


    gSprites[0] = spriteNew("GreenYellow", 60, 30, 30, 70);
    gSprites[1] = spriteNew("GreenYellow", 176, 30, 30, 70);
    gSprites[2] = spriteNew("GreenYellow", 292, 30, 30, 70);
    gSprites[3] = spriteNew("GreenYellow", 408, 30, 30, 70);
    gSprites[4] = spriteNew("GreenYellow", 524, 30, 30, 70);
    gSprites[5] = spriteNew("GreenYellow", 176, 130, 30, 70);
    gSprites[6] = spriteNew("GreenYellow", 292, 130, 30, 70);
    gSprites[7] = spriteNew("GreenYellow", 408, 130, 30, 70);
    gSprites[8] = spriteNew("GreenYellow", 292, 230, 30, 70);

    //Ship
    gSprites[9] = spriteNew("MediumSpringGreen", 230, 950, 150, 20);

}

function gameLoop() {
    gameUpdate();
    gameDraw();
}

function gameUpdate() {

    gLoopCounter++;

    if (gLoopCounter === 30) {
        gLoopCounter = 0;

        for (var i = 0; i < gSprites.length; i++) {
            gSprites[i].Rect.Y += 5;
        }
    }

    function gameDraw() {

        gCanvas.fillStyle = "black";
        gCanvas.fillRect(0, 0, 640, 1096);

        for (var i = 0; i < gSprites.length; i++) {

            var sprite = gSprites[i];

            gCanvas.fillStyle = sprite.Color;
            gCanvas.fillRect(
                sprite.Rect.X,
                sprite.Rect.Y,
                sprite.Rect.Width,
                sprite.Rect.Height);
        }



        if (gGameOver === true) {
            gCanvas.fillStyle = "white";
            gCanvas.font = "30px American Typewriter";
            gCanvas.textBaseline = "middle";
            gCanvas.textAlign = "left";
            gCanvas.fillText("Game Over", 100, 200);

        }
    }

    function spriteNew(color, x, y, width, height) {
        var sprite = new Object();

        sprite.Color = color;
        sprite.Rect = rectNew(x, y, width, height);

        return sprite;
    }

    function rectNew(x, y, width, height) {
        var rect = new Object();
        rect.X = x;
        rect.Y = y;
        rect.Width = width;
        rect.Height = height;

        return rect;
    }
}

Answer 1

You need to move the closing curly brace for the gameUpdate function so that it comes before the gameDraw function.

Do not include your ship in the gSprites array, or else it will move down with the other rectangles.

Also learn the javascript shortcuts, new Object() , can be replace with {} and new Array() can be replaced with [] .

I made the edits here (I removed the on body load event since jsfiddle handles this for you, so add it back in).