我正在制作一个游戏,其中健康栏(动画)和一些其他信息在视觉上代表一些图标显示玩家拥有的炸弹数量等.现在,这可以在画布上完成(通过制作另一个画布的信息它位于主画布上,或者可以使用许多div和跨度来完成.这是我第一次制作基于浏览器的游戏,所以如果有经验的人看到这个,请告诉我你的推荐.我想知道哪种方法会更快.
该游戏也将在移动设备上运行.谢谢！
解决方法
使用画布.如果需要,可以使用两个画布,一个覆盖另一个,但使用画布.
完全触摸DOM很慢.使文档重做其布局,因为移动的DOM元素的大小非常慢.处理更多事件的取消(或不处理),因为在画布上有物理上的DOM项目可能是一种痛苦,为什么还要费心去处理？
如果您的HUD不经常更新,那么最快的事情就是在它更改时将其绘制到内存中的画布,然后在更新帧时始终将该画布绘制到主画布.这样你的drawHud方法看起来就像这样：
function drawHUD() {
// This is what gets called every frame
// one call to drawImage = simple and fast
ctx.drawImage(inMemoryCanvas,0);
}
当然更新HUD信息就像：
function updateHUD() {
// This is only called if information in the HUD changes
inMemCtx.clearRect(0,width,height);
inMemCtx.fillRect(blah);
inMemCtx.drawImage(SomeHudImage,x,y);
var textToDraw = "Actually text is really slow and if there's" +
"often repeated lines of text in your game you should be" +
"caching them to images instead";
inMemCtx.fillText(textToDraw,y);
}
由于HUD通常包含文本,所以如果您使用任何文本,我确实强烈要求缓存它. More on text performance here.
