我正在尝试开发一个带有 Canvas 元素的游戏。现在,我正在绘制图 block (彩色方 block )作为背景,并根据此演示通过箭头键控制英雄:http://www.lostdecadegames.com/demos/simple_canvas_game/
但是,调用 showDungeon() 来绘制我的背景会使英雄的移动不像演示中那样平滑。我认为问题在于我将每个图 block 绘制为 32x32,这使得 Chrome 中的移动速度变慢。我可以做任何建议或代码优化吗?当图 block 为 16x16 时,移动效果很好,但我想要图 block 32x32。我有点不想使用 CSS 将 Canvas 的大小加倍,因为这会破坏抗锯齿的图形。 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() 中绘制绿色方 block 作为英雄,所以我使用了图像。 http://jsfiddle.net/4M5Xz/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++) {
...
}
}
}
又顺利了。
关于javascript - HTML 5 在游戏 Canvas 上高效绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7411798/