Javascript Issue - Uncaught TypeError: Не удается прочитать свойство 'x' неопределенного

Question

Я делаю игру, в которой прямоугольники рисуются в верхней части экрана и перемещаются вниз. Прямоугольники будут рисовать на экране изначально, а затем они исчезнут, и я получу ошибку «JavaScript Uncaught TypeError: невозможно прочитать свойство« X »неопределенного»

Ниже приведен код и исправлена ​​ошибка в «спрайте». Rect.X»линия

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

Вы должны переместить закрывающую фигурную скобку для функции gameUpdate так, чтобы он перед функцией gameDraw.

Не включайте свое судно в массив gSprites, иначе он будет перемещаться вниз с другими прямоугольниками.

Также ознакомьтесь с ярлыками javascript, new Object(), можно заменить на {}, а новый массив() можно заменить на [].

Я сделал изменения here (я удалил событие загрузки тела, так как jsfiddle обрабатывает это для вас, поэтому добавьте его обратно).