-1

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

    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

ありがとう。

4

2 に答える 2

1

クロムでは、ゲームは実行を停止するエラーを生成します。var gameの後; game が未定義の場合、 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);

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

于 2012-05-10T11:01:57.330 に答える
1

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

まず、ゲーム変数をオブジェクトとして初期化する必要があります。

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

2 番目の問題は、イメージ ソースを事前にロードしていないことです (代わりに、1 秒ごとに 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
}

画像のプリロードは多くの落とし穴に悩まされている領域であるため、これは極端に単純化されていることに注意してください。しかし、私はあなたがアイデアを得ると思います。

ところで、これはゲーム ロジックとすべてのキャンバスに関する非常に優れたチュートリアルです。

于 2012-05-10T11:06:44.660 に答える