首页 > 其他分享 >通过chrome调试来抓取html小游戏一例

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

时间:2023-11-15 21:32:15浏览次数:32  
标签:浏览器 蝴蝶 chrome html nginx 小游戏

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

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

通过chrome调试来抓取html小游戏一例_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小游戏一例_html_07

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

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

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

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

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

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

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

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

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

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

通过chrome调试来抓取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


标签:浏览器,蝴蝶,chrome,html,nginx,小游戏
From: https://blog.51cto.com/u_12668715/8407910

相关文章

  • chrome浏览器报Cannot read properties of undefined (reading 'getUserMedia')
    chrome访问摄像头的时候可能报这个错误。使用https协议可以解决这个问题,如果不能使用https可以通过修改chrome配制解决。在chrome地址栏输入chrome://flags/#unsafely-treat-insecure-origin-as-secure在Insecureoriginstreatedassecure的输入框输入要打开网页的地址如http......
  • java怎么和html结合
    Java和HTML结合通常是在Web开发的背景下进行的。Java可以用于后端服务器编程,而HTML用于前端界面设计。这两者结合主要通过以下几种方式:Servlet和JSP:Servlet:JavaServlet是运行在Web服务器或应用服务器上的程序,它接收来自Web浏览器的请求,并生成响应给浏览器。Servlet通常用......
  • Git提交上传报错 :提交的时候有个文件一直依然显示未提交,提交了还是没用 。fatal: will
    解决办法:修改文件名称,再重新提交,再改回来就可以了。原因分析:母鸡啊......
  • cshtml页面中动态生成URL,Url.RouteUrl()与 Url.Action()有什么区别
    原文链接:http://cn.voidcc.com/question/p-yrfdusit-kx.htmlRouteUrl根据路由名称生成url。如果您有多个参数相似的路由,则Action方法可能会选择错误的路由-它会根据路由定义的顺序工作。这可能发生在您的路线具有可选参数时。如果您想确保使用某个路由网址,您需要呼叫RouteUrl......
  • cshtml和html的区别
    https://www.php.cn/faq/532014.html在Web开发中,我们可能会经常使用到两种不同的文件类型,即cshtml和html。这两种文件类型具有很大的相似性,但是他们之间还是有很大的区别的。本文将为大家介绍cshtml和html的区别。文件类型CSHTML文件的意思是C#ServerPages,是一种由微软ASP.NET......
  • 如何隐藏HTML中的div元素
    参考文章,通过一个例子来学习如何在html中隐藏div元素。考虑一下,我们有一个如下的html元素。<divclass="box">Thisismainheading</div>现在,我们需要从网页中隐藏上述div元素。使用display:none要在html中隐藏一个div元素,我们可以使用css的display:none属性。下面是......
  • Python selenium Chrome正在受到自动软件的控制 disable-infobars无效 的解决方法
    问题解决前两天更新了google浏览器版本,今天运行以前的脚本,发现options一个参数的配置不生效了。运行了几次都发现该参数没有生效,也检查了自己的代码参数,没有写错,于是就有了这一波“网中寻求答案”的操作。苦寻不易,还真就找到了答案,详细可参见该地址的答案:https://help.applitoo......
  • 客户端首屏渲染时首先拿到空的html模板,之后继续发起数据请求。而服务器端渲染只需要请
    客户端首屏渲染时首先拿到空的html模板,之后继续发起数据请求。而服务器端渲染只需要请求一次,服务器会将请求的数据放在html模板中一起返回。服务器端渲染耗费流量,局部页面的变化也需要重新请求完整的页面客户端渲染就可以采用SPA,能实现局部组件的更新,服务器端渲染回来的就是整个......
  • HTML和webAPI之根据时间和事件来变实现图片的转换
    一:概述在一些前端的设计场景中,我们会发现有很多的场景需要根据时间然后去变换图片。在不同时间都会出现不同的图片。下面来写一个案例,来更换图片,并显示当前的时间(xx年xx月xx日)。二:案例实现在这里需要用到的知识是事件的使用以及JavaScript内置对象(时间函数)的使用。以及时间的......
  • HTML03(函数,DOM,jQuery,正则表达式)
    基础js是弱类型的脚本语言;在浏览器的控制台打印:console.log();定义对象varobj={};对象的属性名默认就是字符串;函数前置声明varresult=fun(12,23.44);console.log(result);functionfun(a,b){//参数不需要声明类型retu......