【译者注】建议到我的博客上或者通过双语对照看这篇文章,因为可以看到所有的图片。如果对JavaScript感兴趣,建议点开文中提到的链接,实际试验一下效果,但需要注意的是,一定要使用Firefox 3.1或者其他浏览器的最新版本,如果使用Firefox记得打开tracemonkey,否则有的效果会很慢的。还有,相当一部分链接需要翻墙。
以下是对原文的翻译:
对于JavaScript来说,2008是伟大的一年,因为有很多牛人加入到了JavaScript、Canvas元素和Web的开发中来。浏览器供应商也在互相竞争,试图在JavaScript的性能方面超越对手,而最大的受益者当然是开发者和最终用户,因为现在可以开发出一些非常棒的东西,而这些东西在以前简直就是不可想象的。下面是一个列表,都是我在整个2008年中关注过,基于JavaScript开发的产品。
对于JavaScript游戏来说,2008年是非常重要的一年。基于DHTML和Canvas的游戏,在某些方面已经撼动了Flash的霸主地位。很多以前经典的电视游戏已经被通过这种方式移植了,比如:超级玛丽、吃豆人、Breakout、小蜜蜂、炸弹人和T&C Surf Designs等。
另外还有些人,按照自己的想法,对一些传统的游戏进行了扩展,演变出一些新的小游戏,比如:Matt Hackett开发的Spacius、Mark Wilcox开发的Invaders from Mars、VertigoProject开发的RedLine Racing和这个俄罗斯方块的变种版本Tetris game。
我们也找到一些角色扮演类游戏,比如Tombs of Asciiroth,而Andrew Wooldridge开发的CanvasQuest显得更加图形化些,它的Prototype引擎是构建在Pierre Chassaing开发的ProtoRPG基础上的,虽然这些游戏现在还在测试中,而且现在的演示版看起来比较粗糙,但我们有理由相信,有一天他们会完善出一个非常棒的版本出来。
在2008年,也有几个面向JavaScript/DHTML游戏开发的类库面世,其中最抢眼的莫过于GameJS(旁边的截图就是基于这个类库开发的游戏Jetris)和GameQuery了,后者是著名的JavaScript类库jQuery的一个扩展。
最后,我们还要留意一个伟大的游戏DEFENDER of the favicon,这个伟大可不是指尺寸哟。Mathieu 'p01' Henri把上个实际八十年代推出的Defender游戏压缩到了浏览器的favicon图标中,就是那个16*16的png图像,听到这个感觉怎样?神奇么?
现在大部分的浏览器(开发这些浏览器的公司没有叫微软的,IE还不支持)已经支持了Canvas元素。这就意味着当我们以后要在浏览器中创建动态的图片时,将会有更多的选择。当然也会有更多的人,会乐此不疲的展示他们创建动态图片这项疯狂的技术,呵呵。其中有些人创建了短小精炼的例子,来展示Canvas强大的能力。另外一些人走的更远,比如Matt Westcott就建立了一个反社会的演示,来讽刺现在流行的社会网络,而这个演示完全是通过一个小工具制作的。
还有一些人,包括Mathieu 'p01' Henri在内,一整年都在制作一些非常短小精悍的内容,而这些小代码可以做出非常棒的效果,比如这几个:Rubber effect、Tunnex、Mars。每个演示,所有代码加起来,都不超过256字节!
如果这还不过瘾,可以到Ozone Asylum见识一下,Mathieu Henri在这里通过Canvas元素创建了很多20行的小视频,每一个都可以为你带来非常强烈的视觉效果,比如:Dynamic Hypnoglow、Twinkle和Hypno Trip Down the Fractal Rug。这些小视频同样给很多人带来了新的灵感,创作出了一些更好的效果,比如:colliding balls、3D cube effect和dynamically generated BMP flames等。
在Asylum上,大家甚至开发出了20行JavaScript代码写成的游戏,从Lunar Lander到Boulderdash clone,甚至还有一个homage to Wolfenstein 3D。
到目前为止,尽管Mozilla和Opera的开发团队都在尝试启用硬件加速功能,但canvas元素还是只能支持2D图像。但这决不意味着现在不能生成3D图像。我们从类似basic 3D cubes和texturing experiments这样的例子中完全可以得出JavaScript/Canvas 3D engines已经可以使用的结论。
我们还可以留意那些基于Wii Opera SDK(这东西不止应用在Opera或者Wii上)开发的效果,当然还有Nihilogic编写的3D演示。
JavaScript的性能越来越好,这已经是一个不争的事实,一个典型的证据就是我们现在甚至可以在浏览器上模拟其他系统。Matt Westcott(前面提到过他写的一个演示)在这里又给大家带来了一个惊喜:JSSPeccy,一个ZX Spectrum模拟器,这东西棒极了。
James Urquhart也做了一些尝试,建立了一个SCUMM interpreter的雏形,也许用他现在还不能玩疯狂时代(Day of the Tentacle)或者疯狂大楼(Maniac Mansion),但至少可以让你看到一些开放任务(OpenQuest)。
我个人的最爱则是António Afonso开发的JavaScript AGI interpreter,AGI是Sierra在冒险游戏的鼎盛时期所使用的系统,当António开发出这个可以用的模拟器后,我简直就是爱不释手。
John Resig开发的JavaScript的进程接口:Processing.js,可能是这一年中给我印象最深刻的创造之一了,尤其是那数以百计,绚丽夺目的演示。Aza Raskin开发的Algorithm Ink也有着类似的功能,这是一个JavaScript/Canvas接口,基于各种规则和命令建立图像。当然除了这些还有很多,比如Eitan Suez很喜欢Turtle,一个Pascal下的图形开发工具,于是他用JavaScript重写了这个工具:TurtleJS。
还有一些数学偏执狂,使用JavaScript实现了一些碎片效果。首先是p01用137个字节的DHTML绘制了一幅Mandelbrot set,这段代码引发了一个小竞赛,有人写了一个不到128字节的版本,最终胜出的是111字节版本。Oliver Hunt建立了一个更漂亮的图形版本,我也做了一个,Russ Hall甚至做了一个完整的演示版。(译者注:这里需要相当的数学知识,可以参考wikipedia的说明,否则就只能感叹效果的华丽和字节的精简了)
在HTML5正式支持音频元素之前,大部分人都是使用基于Flash音频的方式实现类似的功能,但这不意味着是我们的唯一选择,我们可以使用JavaScript做出各种稀奇古怪的声音。比如说,可以看看Cameron写的JS-909 drum machine,当然这东西依赖于Quicktime,但就算这样也很棒,不是么?
或者我们可以动态生成并播放WAV文件,就像sk89q写的那样,听得同时,我们还可以再生成点MIDI玩玩。
除了图像和音频文件,我们还可以生成其他类型的文件。用一个短小精悍的类库生成ZIP文件,这个主意听起来怎么样呢?
你认为CSS现在都可以做什么?是不是只有设置字体或者排列div?答案当然是否定的,至少Román Cortés就像我们展示了一张完全用CSS制作的荷马·辛普森照片,只要你的CSS基础足够强,也可以做一张哟。
Ernest Delgado将我写的Mario Kart演示和OpenStreetMap结合在了一起,衍生出一个新的非常棒的演示,类似于汽车上的GPS导航系统。
最后,向你推荐Cubescape,一个漂亮有趣的玩具。你可以通过通过各种颜色的小方块,绘制出一幅漂亮的风景来,一个消磨时间的好办法。
这篇文章难免会有一些遗漏,我会在Nihilogi不断做些修补,所以记得定期看看这里,确定你没有遗漏什么。祝愿2009年会像2008年一样精彩,其实我真找不出什么2009年不会更好的论据。
你认为2008年什么最精彩呢?
【本文翻译仅为外语学习及阅读目的,原文作者个人观点与译者及译言网无关】