Google为了纪念pacman游戏30周年,推出了一个特别的Doodle,它是用javascript来实现的,使用chromuim浏览器附带的审查元素的功能来看下它都是有哪些部分组成的吧。另外这里也保存了一份游戏存档,以后google撤掉这个游戏的时候还可以玩玩。
点击进入google首页试玩
下面是游戏的截图:
是有单人和双人模式的,有兴趣的可以玩玩,我感兴趣的是他是用什么东西来做的,有可能是flash,java applet(很古老了,应该不太可能),或者js,直觉应该是js,先在上面点击右键试试,是普通的网页右键菜单,应该不会是flash了,因为 falsh应该会占据顶端的,不然无法获取输入。
那就简单来分析一下吧,刚好昨天装上了chromium,就用它的元素审查来看下都有哪些元素,使用了哪些脚本。
静态背景用css指定div的背景background:black url(logos/pacman10-hp.png),怪不得不能另存为图片。
动画导航按钮不是flash,而是静态png切图得到的多帧画面,使用js(实现
在/extern_js/f/CgV6aC1DThICaGsrMAo4aEACLCswDjgPLCswETgYLCswFjgWLCswFzgHLCswGDgFLCswGTggLCswJTjKiAEsKzAmOAssKzAnOA
QsKzA8OAIsKzBAOBAsKzBBOAUsKzBFOAEsKzBOOAUsKzBROAIsgAIT/EFpRjNs4MoY.js)来切 图以及显示,具体原理没有细看(很多js匿名
函数,临时变量名,排版成一行–googlecode里面好像有个这样的工具,很多js函数我不熟悉等等原因导致不想看下去),也许是
js可以控制一个图片的显示区域,这样根据鼠标的行为来切换dom树里面的元素即可。严重怀疑这样的代码应该是由软件生成而不
是人写的,难道是google wrt之类的开发工具(这类工具我也没有了解)。
通过window.setTimeout()从pacman10-hp.3.js加载pacman游戏相关代码。 a=document.createElement
(“script”);a.type=”text/javascript”;a.src=”logos/js/pacman10- hp.3.js”;google.dom.append(a)。
js里面用到的图片来自pacman10-hp-sprite.png,也是一个图片集合。另外,双人游戏的图片来自pacman10- hp-sprite-2.png,
声音文件是pacman10-hp-sound.swf。
根据上面的分析的结果,把文件保存下本地,在chromuim上面是可以玩的,并且没有发现有外链别的资源。在ie貌似不行,有可能是因为js或者 css里面的相对路径定义在各个浏览器之间存在一些兼容性问题,也可能是ie对我改过的源文件支持不好吧(我乱删除了一些影响阅读的东西,可能破坏了一些 完整性)。
下面是我打包的出来的google首页,可以直接玩了。
点此下载pacman.zip, 我顺便也解压了一份到http://blog.antsense.com/wp-content/uploads/2010/05/pacman/, 可以直接玩。(注:在logo上面三击,然后耐心等待脚本、图片加载完毕就可以玩了,2人的这里玩不了,我还没去看insert coin涉及到什么操作。要是自己部署的话,需要自己修改下源码里面的路径)。
本文来源:未知 作者:佚名