通过chrome调试来获取html小游戏一例

      在网上看到一个HTML小游戏"蝴蝶翩翩连",试玩了下感觉动画效果做得不错,在点击一个半片蝴蝶会有一个扇动动画, 在连通两个相同的半片蝴蝶会合成一个蝴蝶,然后飞出游戏场景,这里想着如何将这个游戏抓下来,学习看看这是怎么实现的这种动画效果!另外一个原因一开始玩没经验,总是玩不过,有个想法是这能通过程序JavaScript改造成能够在线或离线让程序自动玩快速连吗?这个想法要实现好像有点困难。

通过chrome调试来抓取html小游戏一例_小游戏

    ”蝴蝶翩翩连“抓取过程有点复杂,不过最终成功了,抓取到后需要改造布署于nginx或Apache等Web服务器上才能运行的,这个游戏使用ajax方式来动态加载文件了,用本地方式无法运行

通过此次调试发现chrome的调试功能是真强呀!

最终发现是用Phaser这个开源的桌面和移动 HTML5 2D 游戏开发框架实现。

小游戏地址:https://www.4399.com/flash/220808_4.htm

下面来记录下蝴蝶翩翩连的过程:

打开网址

在界面启动到如下,可以通过右键“查看框架的源代码”看到引入的这个“蝴蝶翩翩连”的地址

通过chrome调试来抓取html小游戏一例_小游戏_02

在这个框架可以看到动态引入的方式addScript等信息

通过chrome调试来抓取html小游戏一例_html_03

复制下来到新的页面上运行试下,提示访问错误,看来无法通简单的方式取得了

通过chrome调试来抓取html小游戏一例_html_04

这个方式不行,打开chrome浏览器的开发者工具来看看

通过chrome调试来抓取html小游戏一例_小游戏_05

出来了一个“Paused in debugger”暂停了,按下方操作

通过chrome调试来抓取html小游戏一例_小游戏_06

重新刷新,可以调试了

在调试器sources标签页下,按分组查看看在那里有这个源码

通过chrome调试来抓取html小游戏一例_小游戏_07

在flash22(index.html) 分组里找到了,这个一个笨办法就是在这里选中所要下载的文件,用右键“Save as...”即可下载保存了,但这种方式太麻烦了,有没有好点的办法呢

通过chrome调试来抓取html小游戏一例_html_08

通过chrome调试来抓取html小游戏一例_小游戏_09

安装chrome浏览器插件“Resources Saver”即可方便我们来下载资源

通过chrome调试来抓取html小游戏一例_html_10

通过chrome调试来抓取html小游戏一例_小游戏_11

通过chrome调试来抓取html小游戏一例_小游戏_12

下载后我们可以看到压缩包里有sxiao.4399的文件,解压缩看看

通过chrome调试来抓取html小游戏一例_html_13

用HBuilderX打开目录sxiao.4399,比对可以看都下载下来了

通过chrome调试来抓取html小游戏一例_html_14

安装一个nginx来测试看看这个源码是否可以运行

在nginx之html下新建目录butterfly

通过chrome调试来抓取html小游戏一例_html_15

双击nginx.exe启动后,打开浏览器输入http://localhost/butterfly/index.html,成功打开

通过chrome调试来抓取html小游戏一例_html_16

虽然运行成功了,在开发者工具可以看到好多错误,少了好多文件,这里发现问题是有些需要玩通关了,才能看得到,有些内容是在特定情况下浏览器才加载的,这个就只能根据实际组装为正确的地址后用浏览器或第三方工具迅雷来下载了

在这里虽然看到有错误,但碁本功能是能用的,通过分析这个游戏的主要代码在“butterfly-kyodai.min.js”里,通过格式化,代码基本上是可读的,这样改造用系统代码来自动完成连连看应该是可行的。

通过chrome调试来抓取html小游戏一例_html_17