HTML5ゲームでコードがレンダリングを定義しないのはなぜですか？

Question

これはプログラミングの私の最初の年であり、私はこれに続くHTML5 Game Development Series on YouTubeです。

私は自分のコードを次の行に従っていますが、私のコードはまだエラーを生成しています。

コンソールログは次のように言っている：game.js:105 Uncaught TypeError: Cannot read property 'render' of undefined

正方形ブラックは、入力キーで、生成されるランダム黄色コインのために移動できるようにするための目標です。コインが生成されていますが、もはや黒い四角を動かすことはできません。 @ 1として

：

の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個の新しいコインを作成します。次に、透明な矩形をレンダリング関数の先頭に移動する必要があります。コインをレンダーしてプレーヤーをレンダリングします。すべてが良いはずです。