0

JSのゲーム開発を始めたのですが、ちょっとした問題にぶつかりました。絵が描けません。正常に読み込まれ、コンソールにエラーはありませんが、表示されません。私は何が欠けていますか？

JS

var Game = {
characterSpeed: 2,
characterHorizontalSpeed: this.characterSpeed,
characterVerticalSpeed: this.characterSpeed,
characterX: 400,
characterY: 500,
mouseX: 0,
mouseY: 0,
gameRunning: false,
debug: true,
characterImg: '',
context: '',

init: function() {
    $('#game').mousemove(function(event) {
        Game.mouseX = event.pageX;
        Game.mouseY = event.pageY;
    });

    Game.context = document.getElementById('game').getContext('2d');

    Game.loadImages();
    Game.game();
},

loadImages: function() {
    Game.characterImg = new Image;
    Game.characterImg.src = 'images/character.png';

    Game.characterImg.onload = function() {
        Game.context.drawImage(Game.characterImg, 400, 500);
    }
},
}

$(function() {
Game.init();
});

HTML

    <div id="inner">
        <canvas id="game" style="background: white; width: 800px; height: 500px;"></canvas>
    </div>
4

3 に答える 3

0

widthキャンバスのサイズを設定heightし、スタイルではなく属性を設定する必要があります。

<div id="inner">
    <canvas id="game" width="800" height="500"></canvas>
</div>
于 2013-02-01T22:32:21.953 に答える
0

src プロパティを最後に、つまり onload の後に設定してみてください。

loadImages: function() {

    Game.characterImg = new Image();

    Game.characterImg.onload = function() {
        Game.context.drawImage(Game.characterImg, 400, 500);
    }

    Game.characterImg.src = 'images/character.png';

}
于 2013-02-01T22:40:30.487 に答える
0

画像はおそらくキャッシュにあるため、onload イベントを設定するまでに、画像は既に読み込まれているため、onload は呼び出されません。次のように順序を逆にするだけです。

Game.characterImg.onload = function() {
      Game.context.drawImage(Game.characterImg, 400, 500);
   }
Game.characterImg.src = 'images/character.png';
于 2013-02-01T22:44:41.657 に答える