JavaScriptゲームのループが機能しない

Question

私が作ろうとしているゲームに問題があります。ここで私のコードは（非常に基本的）です：

var canvas = document.createElement("canvas"); 
var gameCanvas = canvas.getContext("2d"); 
canvas.width = 500; 
canvas.height = 500; 
document.body.appendChild(canvas); 

// Global variables 
var game; 
game.fps = 60; 
game._intervalId = setInterval(game.run, 1000/game.fps); 

// Game loop 
game.run = function() { 
    game.draw(); 
}; 

// Functions 
game.draw = function() { 
    // Background image 
    var bgImage = new Image(); 
    bgImage.src = "img/background.png"; 
    // Player image 
    var playerImage = new Image(); 
    playerImage.src = "img/player.png"; 
    // Draw 
    gameCanvas.drawImage(bgImage, 0, 0); 
    gameCanvas.drawImage(playerImage, 10, 10);  
} 

// Game over 
document.getElementById('end').onclick = function stop(){ 
    clearInterval(game._intervalId);  
} 

// Run 
window.onload = game.run(); 

ゲームが正しく動作しません。間違ったことをしたことがありますか？または私が逃したことはありますか？ページへのリンクは次のとおりです。http://dl.dropbox.com/u/33213779/Game/demo_me.html

ありがとうございました。

Answer 1

私があなたが書いているものから見出すことができる2つの問題があります。

まず一つは、あなたがオブジェクトとしてあなたのゲームの変数を初期化する必要があることを次のようになります。

var game = {}; // = {} initializes a new Object 
game.fps = 60; 
.... 

第二の問題は、あなたが（代わりにあなたがそれらを60回ずつ読み込んでいるあなたの映像ソースをプリロードされていないということでしょう秒....）、キャンバスはまだ読み込まれているのでキャンバスにアクセスできません。これは非常に画像プリロードとして単純化が落とし穴の多くの被災地であることを

var bgImage = new Image(); 
bgImage.src = "img/background.png"; 
bgImage.onload = checkPreload; 

var playerImage = new Image(); 
playerImage.src = "img/player.png"; 
playerImage.onload = checkPreload; 

var loadedPics = 0; 
function checkPreload(){ 
loadedPics++; 
if (loadedPics == 2){ 
buildGame(); //start game 
} 
} 

function buildGame(){ 
//inside this function you should be safe to refer to bgImage and playerImage 
} 

注：

代わりに、あなたはこのようなメカニズムを使用することができます。しかし、私はあなたがそのアイデアを得るだろうと思う。

ところでthisは、ゲームロジックとすべてのものキャンバスに関する本当に良いチュートリアルです。

Answer 2

クロムでは、ゲームが実行を停止するエラーを生成します。 の後にバリゲーム;あなたはのgame.fps = somethingを実行しています。undefined.fps = somethingを実行していて、JavaScriptが怒っています。最初のパッチはとなります。var game = {}

そして、私はなぜbgImageとplayerを何度も繰り返し作成しているのか分かりません。それが機能しても、問題を引き起こす可能性があります。

var canvas = document.createElement("canvas"); 
    var gameCanvas = canvas.getContext("2d"); 
    canvas.width = 500; 
    canvas.height = 500; 

     canvas.setAttribute("style","border:1px solid red"); 
    document.body.appendChild(canvas); 

    // Global variables 
    var game = {}; 
    game.fps = 60; 


    // Game loop 
    game.run = function() { 
     game.draw(); 
    }; 

    // Resource loader 
    game.loader = function() { 
     // Background image 
     game.bgImage = new Image(); 
     game.bgImage.src = "img/background.png"; 

     // Player image 
     game.playerImage = new Image(); 

     game.playerImage.src = "img/player.png"; 
    };     

    // Functions 
    game.draw = function() { 
     // Draw 
     gameCanvas.drawImage(game.bgImage, 0, 0); 
     gameCanvas.drawImage(game.playerImage, 10, 10);  
    } 
      game.loader(); 
    game._intervalId = setInterval(game.run, 1000/game.fps); 

このバージョンのコードは意図したとおりに動作しているようです。