5年前写过一个HTML5塔防游戏,写完之后,对JavaScript有了一些新的认识,也因此而结识了不少新朋友。曾经想不断完善它,打造一个正儿八经的塔防游戏出来,不过后来半途而废了。一转眼,已经有超过4年没有再更新过它。

前几天突然想起,又翻出来玩了下。以现在的目光来看,这个游戏的代码自然存在很多不好的地方,比如说多个JS模块的组织方式就极为原始,——当时AMD、CommonJS等规范才刚刚兴起,twitter等还在使用LAB.js加载模块,CMD规范尚未被提出,而我想打造一个完全不依赖第三方库的东西。不过,这些实现其实并不影响游戏的体验,最让现在的我难以忍受的是它不支持Retina屏幕,——它是基于Canvas绘制的,不是矢量图,因此在Retina屏幕上打开它时,图象会显得很模糊。

于是抽空做了4年来的第一次更新,让它在Retina屏幕上能显示得更清晰。

如何让Canvas支持Retina屏幕呢?原理其实非常简单,绘制一个2x2倍大的Canvas,再将它缩放至原始大小即可。更严谨一些的方式是先读取一下window.devicePixelRatio的值,再决定绘制时使用的放大倍数。

现在,在Retina屏幕上,这个5年前的老游戏也终于清晰了。:) 这或许是它的最后一次更新。

另外,也顺便感慨一下摩尔定律:5年前,这个游戏在初代iPad上,只能跑到大约8帧/秒,现在,同样的代码,跑在2年前的iPad 4上已经毫无延迟。

10