用于游戏的 HTML 5 在画布上高效绘图答案

【问题标题】：HTML 5 efficient drawing on canvas for game用于游戏的 HTML 5 在画布上高效绘图
【发布时间】：2011-09-14 05:49:17
【问题描述】：

我正在尝试使用画布元素开发游戏。现在，我正在绘制瓷砖（彩色方块）作为背景，并根据此演示通过箭头键控制英雄：http://www.lostdecadegames.com/demos/simple_canvas_game/

但是，调用 showDungeon() 来绘制我的背景会使英雄的移动不像演示中那样平滑。我认为问题在于我将每个图块绘制为 32x32，这使得 Chrome 中的移动速度变慢。我可以做任何建议或代码优化吗？当瓷砖是 16x16 时，运动很好，但我想要瓷砖 32x32。我有点不想使用 CSS 将画布的大小加倍，因为这会破坏抗锯齿的图形。 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/

【问题讨论】：

还可以考虑使用use requestAnimationFrame 而不是setInterval。

标签： javascript html canvas game-loop

【解决方案1】：

代码中有一个奇怪的循环：

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++) {
         ...
      }
   }
}

又是一帆风顺。

【讨论】：