HTML5塔防游戏小更新

2015-09-07

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

分类: 编程 标签: JavaScript HTML5
前一篇: 一个简单的JavaScript模块加载器
后一篇: SwitchHosts! 3

相关文章:

评论:

行者无疆
在 2015-09-08 11:21 写道:

都有五年了吗?唉,当初玩的时候很喜欢,想想5年,都老了。。。

回复
oldj
在 2015-09-08 11:48 写道:

时光如水啊…… T_T

回复
JD
在 2015-10-14 09:36 写道:

老J 新版在哪里玩啊?

回复
行者无疆
在 2015-09-08 11:24 写道:

当初就是因为这个游戏,才关注作者的博客的

回复
Willizm
在 2015-09-29 18:02 写道:

你这个游戏我玩了好几天,哈哈

回复
Msong
在 2016-01-08 13:29 写道:

游戏挺好,借用了。

回复
Msong
在 2016-01-31 02:56 写道:

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

回复
oldj
在 2016-01-31 16:53 写道:

酷~。继续,这个游戏的代码你可以随意使用、修改。:)

回复
bones7456
在 2020-05-18 20:13 写道:

这种左上到右下的塔防游戏,是不是应该有一个最佳的地形图?最佳地形又是怎么样的呢?

回复

发表评论:

电子邮件地址不会被公开。 必填项已用 * 标注。