爲什麼我的代碼沒有在HTML5遊戲中定義渲染？

Question

這是我在編程的第一年，我正在關注這個HTML5 Game Development Series on YouTube。

我跟着他的代碼一行一行，我的代碼仍然產生錯誤。

控制檯日誌說以下內容：game.js:105 Uncaught TypeError: Cannot read property 'render' of undefined

的目標是爲黑色方能夠有輸入鍵移動，併爲將要生成隨機黃色硬幣。硬幣正在生成，但我不能再移動黑色方塊。

有在的index.php沒有任何問題，我會告訴我的game.js

width = 400; 
height = 400; 

var FPS = 60; 
var canvas = document.getElementById("game"); 
var g = canvas.getContext("2d"); 

var x = 50; 
var y = 50; 

coins = []; 

var player = { 
    x: 50, 
    y: 50, 
    speed: 3, 
    tick: function() { 
    if(Key.up && this.y > 0) this.y-= this.speed; 
    if(Key.down && this.y < height - 20) this.y+= this.speed; 
    if(Key.left && this.x > 0) this.x-= this.speed; 
    if(Key.right && this.x < width - 20) this.x+= this.speed; 
    }, 
    render: function() { 
    g.fillStyle = "black"; 
    g.fillRect(this.x,this.y,20,20); 
    } 
}; 

var Key = { 
    up: false, 
    down: false, 
    left: false, 
    right: false 
}; 

addEventListener("keydown", function(e) { 
    var keyCode = (e.keyCode) ? e.keyCode : e.which; 
    switch(keyCode) { 
    case 38: // up 
     Key.up = true; 
     break; 

    case 40: // down 
     Key.down = true; 
     break; 

    case 37: // left 
     Key.left = true; 
     break; 

    case 39: // right 
     Key.right = true; 
     break; 
    } 
}, false); 

addEventListener("keyup", function(e) { 
    var keyCode = (e.keyCode) ? e.keyCode : e.which; 
    switch(keyCode) { 
    case 38: // up 
     Key.up = false; 
     break; 

    case 40: // down 
     Key.down = false; 
     break; 

    case 37: // left 
     Key.left = false; 
     break; 

    case 39: // right 
     Key.right = false; 
     break; 
    } 
}, false); 

function Coin(x,y) { 
    this.x = x; 
    this.y = y; 
    this.size = 8; 
    this.render = function() { 
    g.fillStyle = "yellow"; 
    g.fillRect(this.x,this.y,this.size,this.size); 
    }; 

    this.tick = function() { 

    }; 
} 

function createCoins(amount) { 
    var i = 0; 
    while(i < amount) { 
    i++; 
    coins.push(new Coin(Math.random()*width,Math.random()*height)); 
    } 
} 

function renderCoins() { 
    var i = 0; 
    while(i < coins.length) { 
    i++; 
    coins[i].render(); 
    } 
} 


function render() { 

    renderCoins(); 
    createCoins(20); 
    g.clearRect(0,0,width,height); 
    player.render(); 
} 

function tick() { 
player.tick(); 
} 

setInterval(function() { 
    render(); 
    tick(); 
}, 1000/FPS); 

Answer 1

那麼幾件事情代碼：

按@ nduggers評論說你需要把你的i ++放在你的數組訪問器後面的renderCoins中。你得到game.js:105 Uncaught TypeError: Cannot read property 'render' of undefined，因爲你在這個循環

下一頁在渲染功能的最後一次迭代訪問索引無效

function render() { 
    renderCoins();  //you are rendering coins that have not been initted yet 
    createCoins(20); //you will create 20 new coins every time you render 
    g.clearRect(0,0,width,height); //you are clearing any coins you just rendered 
    player.render(); //you are now rendering just the player on an empty canvas 
} 

所以，你需要渲染功能之外創建你的硬幣，否則你會每個渲染創建20個新硬幣。接下來，您需要將清晰的矩形移至渲染函數的頂部。然後渲染硬幣並渲染玩家。那麼一切都應該是好的。