JS写小游戏「跳一跳」外挂之自己动

上篇文章写道怎么通过Canvas识别跳转位置,本篇文章重点介绍怎样使用adb命令操作「小人」自己挑动。

adb是什么

adb是Andorid Debug Bridge,可以将安卓手机打开USB调试模式,然后连接USB线到电脑,就可以通过adb执行调试命令。

adb安装

mac下面使用brew安装

brew cask install android-platform-tools

windows下面去搜索下载,然后放到环境变量里面去,保证命令行执行adb可以成功。

测试连接成功

使用adb devices查看是否连接成功,如果连接成功会出现设备的编号。

小人跳转需要的命令

整个自动跳动的流程是这样的:

  1. 调用adb命令获取手机当前屏幕截图
  2. 拉取截图到本地路径
  3. 通过js读取图片分析中心点位置计算跳转需要按压时长
  4. 同adb命令发送长按命令

通过node的child_process核心代码执行adb的命令如下:

//截屏,放到sdcard的根目录下
adb shell screencap -p /sdcard/screencap.png
//拉取截图图片到本地电脑
//   将remote路径的图片拉取到本地的路径
adb pull ${SCREENCAP_REMOTE_PATH} ${SCREENCAP_PATH}/screencap.png
//发起长按,swipe后面是开始和结束的手指位置坐标,timeout是时长
adb shell input swipe ${r + 10} ${r + 20} ${r - 10} ${r - 2} ${timeout}

特殊说明

2.04是跳转系数,这个是从其他代码里面直接拿过来的,对应的是720宽度的手机会比较准确,可能不同的手机dpi和屏幕宽度会有不同的值,具体实践中需要根据自己手机情况调整一下。

我在红米4手机上面可以轻松几乎每次都是中心点,轻松过千。

可以看下面的红米机器的视频:

https://v.qq.com/x/page/t1331wmep7e.html

JS写小游戏「跳一跳」外挂之Canvas图像识别

17年结尾的时候微信发布新版重点推出了「小游戏」概念,H5的游戏再次火了起来,新版微信开屏的游戏就是「跳一跳」游戏可玩度很高,网上也出现了各种语言版本的外挂,前几天看到一篇用nodejs搭建的外挂,需要手动点击截屏图片来判断当前和下一步的位置然后跳转,于是就起了用Canvas来实现图像的想法,后面有实现了自动跳转,算是齐活了。今天来完整说下图像识别。

代码都放到了:https://github.com/ksky521/wechat-jump-game-hack 欢迎自己去尝试

先来看最终效果视频:https://v.qq.com/x/page/o1331igmskh.html

Canvas图像处理的原理

Canvas可以通过drawImage在上面添加图片,然后通过getImageData方法获取一个imageData对象,此对象包括了datawidthheight,其中data为图片widthheight4长度的数组,每个像素点表现在数组内为:RGBA四个0~255的值,即Red、Green、Blue和Alpha值。

通过对这个imageData.data进行遍历操作,可以利用图像差值比较找出图片内物体的边缘、物体的中心点,也可以根据图像中某个固定颜色范围的物体,进行匹配,从而找到「小人」的位置。

颜色值差值比较函数

先介绍一个函数tolerenceHelper,用来比较颜色差值,即传入需要比较的rgb,然后跟对比的rtgtbt和差值范围的t进行对比的函数,在范围内则返回true

function tolerenceHelper(r, g, b, rt, gt, bt, t) {
    return r > rt - t && r < rt + t 
            && g > gt - t && g < gt + t 
            && b > bt - t && b < bt + t;
}

获取小人当前位置

小人获取位置用的方式是差值比较,首先通过截屏中的紫色小人颜色范围,可以大致拿到小人的颜色值为:

// 小人的颜色值
const playerR = 40;
const playerG = 43;
const playerB = 86;

为什么我们的业务适合用Node?

本文从业务场景来谈谈为什么选择Node,以及前端写后端代码需要补足的短板。

这些日子一直在做Node方面的尝试,或多或少会收到周围的异样的目光甚至背后的质疑,于是促使我好好思考为什么我在做Node。网上搜下「为什么要用Node」,找到的文章多数是介绍Node多么多么牛逼,无非是从Node本身特性来说,比如:并发、事件驱动、非阻塞I/O、单线程、流、社区生态……诸如此类,很少谈业务场景。
我是「实用主义」者,说过:脱离业务场景谈架构都是耍流氓。因为个人是从一线业务做起的,经过几年对业务的思考,我觉得可以从业务场景来说说为什么我们的业务更适合用Node。

从业务场景说起

现在我们的业务模块化越来越普遍,很少有业务比较纯粹只有链接一个数据库就可以搞定,往往前台业务后面会有N多的API服务做支撑。比如:下面两种情况在我们实际开发中经常遇见:

  1. 某个页面需要的数据来自两个以上接口,而两个接口来自不同的团队/部门,比如:用户信息来自账号部门,而UGC数据来自业务部门
  2. 某个页面存在接口依赖,需要先调用接口A,然后根据接口A数据调取接口B,比如:个性化推荐,往往需要根据某些维度请求推荐系统拿到推荐数据的ID,至于内容,需要拿ID根据页面需要去获取具体元数据

上面两种情况,站在后台开发的角度来看,我们业务模块要分开要独立,而站在前端的角度来看,这些数据都是一个页面需要的,前端希望是一个接口给我返回。这是一个开始。。

当然后台开发,比如PHP也有并发请求的解决方案,好(上)心的后台工程师,会帮助在后台统一合并请求处理成一份数据或者接口,然后扔给页面使用。比如在实际开发中,我们的前端会写(并且维护)一个Template.class.php(我敢说我们80%的后台工程师都没看过这个代码。。),在View层使用,然后在Action当中将数据传给View层做渲染,下面的代码:

$this->render('xxx/xx.tpl', $tplData);

这样增加的沟通成本,降低了开发效率。为了一个页面,需要前端根据页面想要的数据,和后台沟通页面的数据格式,然后后台工程师找他们后面的API模块要数据、处理数据。这个过程中会有一些「灰色地带」,不好明确谁做更合适,完全靠自觉。

往往开发的时候会想各种方法来解耦,比如:引入后台模板(smarty之类),然后约定数据格式,前端根据数据格式来写Mock接口,写后台模板的前端就叫「大前端」;再Low一点的团队,会采取前端做好页面扔给后台工程师「套页面」,比如:PHP代码写HTML,各种<?php echo xxx;?>,代码很不友好,后台工程师幸福感也急剧下降。

还有一种做法是,干脆后台沦为「代理服务器」,收到请求我转给后面的API,拿到数据我返回给前端页面,做成可以「跨域」的接口,所以就成了好多webapp。

另外,站在后台工程师的个人发展来看,可能他们觉得:这些「包接口」的重复性工作,跟自己的晋升和技术发展又有毛线关系呢?

说道这里,肯定有人心里在嘀咕:这是你们大公司才有的问题,我们小公司不会有这样的问题!那我下面再从技术方面来说。

用Node抓站(一):怎么写出自己满意的代码

如果只写怎么抓取网页,肯定会被吐槽太水,满足不了读者的逼格要求,所以本文会通过不断的审视代码,做到令自己满意(撸码也要不断迸发新想法!

本文目标:抓取什么值得买网站国内优惠的最新商品,并且作为对象输出出来,方便后续入库等操作

抓取常用到的npm模块

本文就介绍两个:requestcheerio,另外lodash是个工具库,不做介绍,后面篇幅会继续介绍其他用到的npm库。

  • request:是一个http请求库,封装了很多常用的配置,而且也有promise版本(还有next版本。
  • cheerio:是一个类似jQuery的库,可以将html String转成类似jQ的对象,增加jQ的操作方法(实际是htmlparser2

request 示例

var request = require('request');
request('http://www.smzdm.com/youhui/', (err, req)=>{
  if(!err){
    console.log(Object.keys(req))
  }
})

通过上面的代码就看到req实际是个response对象,包括headersstatusCodebody 等,我们用body就是网站的html内容

端的cookie字符串来获取其session数据 handshakeData.cookie = parseCookie(handshakeData.headers.cookie) var connect_sid = handshakeData.cookie['connect.sid']; if (connect_sid) { storeMemory.get(connect_sid, function(error, session){ if (error) { // if we cannot grab a session, turn down the connection callback(error.message, false); } else { // save the session data and accept the connection handshakeData.session = session; callback(null, true); } }); } else { callback('nosession'); } });

more >>

使用socket.io和node.js搭建websocket应用

websocket是HTML5的一种新的通信协议,它是实现了浏览器与服务器的双向通讯。在 WebSocket API 中,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
关于websocket的更多信息,请移步维基百科

使用WebSocket

在客户端使用websocket需要创建WebSocket对象,通过提供的open、send、message、close等方法实现创建、发送、监听信息、关闭连接。例如下面的代码:

if('WebSocket' in window){
    // 创建websocket实例
    var socket = new WebSocket('ws://localhost:8080');
    //打开
    socket.onopen = function(event) {
      // 发送
      socket.send('I am the client and I\'m listening!');
      // 监听
      socket.onmessage = function(event) {
        console.log('Client received a message',event);
      };
      // 关闭监听
      socket.onclose = function(event) {
        console.log('Client notified socket has closed',event);
      };
      // 关闭
      //socket.close()
    };
}else{
    alert('本浏览器不支持WebSocket哦~');
}

现在chrome、firefox等浏览器都已经支持了websocket,而IE却没有。下面我们来简单说说服务器端对websocket的支持。

服务器端支持websocket的语言不少,而且都有相关的开源项目,例如php的phpwebsockets:http://code.google.com/p/phpwebsockets/,java的jWebsocket:http://jwebsocket.org/
更多的信息可以浏览这篇文章:Start Using HTML5 WebSockets Today

socket.io

socket.IO是一个websocket库,包括了客户端的js和服务器端的nodejs。官方地址:http://socket.io

客户端使用socket.io

去github clone socket.io的最新版本,或者直接饮用使用socket.io的CDN服务:

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

下面可以创建使用socket.io库来创建客户端js代码了:

var socket = io.connect('http://localhost');
socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
});

socket.on是监听,收到服务器端发来的news的内容,则运行function,其中data就是请求回来的数据,socket.emit是发送消息给服务器端的方法。

使用socket.io和nodejs搭建websocket服务器端

socket.io不仅可以搭建客户端的websocket服务,而且支持nodejs服务器端的websocket。

nodejs安装socket.io

使用node插件管理包,运行下面的命令就可以安装成功socket.io

npm install socket.io

没有npm的或者windows用户可以使用github下载socket.io并且放入到node_modules文件夹中,具体配置可以参考文章:《nodejs教程:配置nodejs.exe的windows目录结构》

nodejs建立socket.io服务

通过nodejs的http模块就可以方便的搭建websocket服务器环境,例如下面的代码:

// 引入需要的模块:http和socket.io
var http = require('http'), io = require('socket.io');
//创建server
var server = http.createServer(function(req, res){
  // Send HTML headers and message
  res.writeHead(200,{ 'Content-Type': 'text/html' });
  res.end('

# Hello Socket Lover!
');
});
//端口8000
server.listen(8080);
//创建socket
var socket = io.listen(server);
//添加连接监听
socket.on('connection', function(client){
    //连接成功则执行下面的监听
    client.on('message',function(event){
        console.log('Received message from client!',event);
    });
    //断开连接callback
    client.on('disconnect',function(){
        console.log('Server has disconnected');
    });
});

nodejs教程:安装express及配置app.js文件

express.js是nodejs的一个MVC开发框架,并且支持jade等多种模板。下面简单来说说express的安装和app.js文件的配置,然后在今后的教程中一步一步使用express.js搭建个聊天室。

安装express.js

如果你安装了npm,安装变得很简单,只需要在终端中运行下面的代码即可:

npm install express -gd
-g代表安装到NODE_PATH的lib里面,而-d代表把相依性套件也一起安装。如果沒有-g的话会安装目前所在的目录(会建立一个node_modules的文件夹),你可以透过以下指令来比较两者的不同:

npm list -g
npm list

如果没有npm,那么我可以使用github来git下来最新的express。
好了,现在你可以通过express testapp来建立express实例。以下是示例:

cd ~
express testapp
cd testapp
node app.js
这样就建立了一个testapp的nodejs应用,而app.js是默认的应用主js。下面来详细的说说app.js中的各项配置。

引入模块

var express = require('express');
 var app = module.exports = express.createServer();

require()是node.js提供的函数,可以让你引入其他模块以调用模块的函数和变量,默认下node.js会在$NODE_PATH和目前js所在目录下的node_modules文件夹下去寻找模块。require也可以用来载入自己写的模块哦~这样涉及到node.js的模块机制,后面有机会就在介绍。

第二行的express.createServer()就是在建立server,而中间的module.exports也是涉及到node.js的模块机制,以后再说。

express的app.js的详细配置说明

express.js继承自connect模块,所以如果你的node_modules文件夹下没有connect模块也是不行的。

设置views路径和模板

我们再来看下面两行:

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');