为什么我的代码没有在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个新硬币。接下来，您需要将清晰的矩形移至渲染函数的顶部。然后渲染硬币并渲染玩家。那么一切都应该是好的。