0

キャンバス要素を使用してゲームを開発しようとしています。現在、背景としてタイル (色付きの正方形) を描画しており、このデモに基づいて矢印キーで制御されるヒーローを描いています: http://www.lostdecadegames.com/demos/simple_canvas_game/

ただし、showDungeon() を呼び出して背景を描画すると、デモのようにヒーローの動きが滑らかになりません。問題は、各タイルを 32x32 として描画しているため、Chrome での動きが遅くなっていることだと思います。私ができる提案やコードの最適化はありますか? タイルが 16x16 の場合は動きは問題ありませんが、32x32 のタイルが必要です。CSS を使用してキャンバスのサイズを 2 倍にしたくありません。http://www.html5rocks.com/en/tutorials/casestudies/onslaught.html#toc-pixelated

// Draw everything
var render = function() {

   showDungeon();
    ctx.drawImage(img, hero.x, hero.y);

};

// The main game loop
var main = function() {
    var now = Date.now();
    var delta = now - then;

    update(delta / 1000);
    render();

    then = now;
};

// Let's play this game!
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible

無関係な問題: 何らかの理由で、render() でヒーローとして緑色の正方形を描画できなかったため、代わりに画像を使用しました。 http://jsfiddle.net/4M5Xz/4/

4

1 に答える 1

4

コードに奇妙なループがあります:

function showDungeon() {
   for (var x = 0; x < (15*32); x++) {
      for (var y = 0; y < (15*32); y++) {
         ...
      }
   }
}

背景を何度も描きすぎているようです。私はそれを次のように変更しました：

function showDungeon() {
   for (var x = 0; x < 15; x++) {
      for (var y = 0; y < 15; y++) {
         ...
      }
   }
}

そしてまた滑らかになりました。

于 2011-09-14T06:44:58.513 に答える