HTML5塔防游戏小更新

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

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

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

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

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

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

10

8 Replies to “HTML5塔防游戏小更新”

  1. 什么都不说上图,如果作者允许继续http://xiangce.baidu.com/picture/album/list/50516e2b45034e6ffa17a5bdea415b9e01df3fac?tagname=http%3A%2F%2Foldj.net%2F&picnum=1&isscore=1#picSign=81d7f2b125cb6edd293b2fd8b73a8068e8d9ffd5

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s