자바 스크립트 게임 루프가 작동하지 않습니다.

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

Thanks.

Answer 1

글쓰기에서 나는 두 가지 문제점이 있습니다.

첫 번째는 당신이 개체로 게임-변수를 초기화하기 위해서 가지고있을 것이다 : 두 번째 문제가 될 것

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

크롬 게임에서 실행을 중지하는 오류가 발생합니다. 이후 var game; 게임이 정의되지 않았다면, 당신은 game.fps = something 일을 마치고 undefined.fps = something, 그리고 자바 스크립트가 화를내는 것과 같습니다. 첫 번째 패치는해야 할 일 var game = {}

그리고 bgImage와 플레이어를 반복하여 만드는 이유를 이해할 수 없습니다. 그게 효과가 있더라도 문제가 생길 수 있습니다.

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); 

이 코드 버전은 의도 한대로 작동하는 것 같습니다.