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

function getCurCenter(data, width, height) { // 小人的颜色值 const playerR = 40; const playerG = 43; const playerB = 86; let minX = Infinity; let maxX = -1; let maxY = -1; // 找到小人当前的底部位置 let pos = [0, 0]; let startY = Math.floor(height / 4); let endY = Math.floor(height * 3 / 4); for (let x = 0; x < width; x++) { for (let y = startY; y < endY; y++) { let i = y * (width * 4) + x * 4; let r = data[i]; let g = data[i + 1]; let b = data[i + 2]; if (y > pos[1] && tolerenceHelper(r, g, b, playerR, playerG, playerB, 16)) { minX = Math.min(minX, x); maxX = Math.max(maxX, x); maxY = Math.max(maxY, y); } } } pos[0] = Math.floor((maxX + minX) / 2); pos[1] = maxY; // console.log(`player position (x, y)= (${pos[0]}, ${pos[1]})`); return pos; }

获取的跳转位置

怎样获取小人下一步跳转的位置呢？

按照上面的逻辑，我们还是从图片高度的height/4~height*3/4的范围查找，这是我们先取出当前的背景色，然后在高度范围内扫描图片，当出现跟背景色相差很大的第一个点时，这时候就是下一个物体的主颜色值了！如果为四边体之类的，则这个点就是顶点了！

知道这个物体的主体颜色值，我们就可以以这个值为基准继续扫描，在这个颜色值范围的像素点就是物体的顶面，然后根据顶面像素点坐标minY和maxY得到中心点的坐标（圆形和正方形都是对称的，所以都可以用这个方法）。

看图理解下：

下图是将背景色涂红，这样就可以看到识别出来的第一个点就是顶点（圆形一样）

优化

1. 找到顶点之后，下一行肯定不是maxY，一次类推，可以大胆将Y的值增加60个像素，即从顶点往下的60个像素重新开始查找中心点；
2. 另外可以将Y的查找范围缩小到上一步找到小人的中心点Y值，即y取值为height/4~Math.min(height*3/4, 小人中心Y) ，这样即使maxY我们没有找到，也可以以小人为底取中心点，保证下一步的跳转位置尽量不会超出物体顶面范围。
3. 我们找的是maxY，所以只要出现了跟顶点像素点颜色一致（范围内）的点，这一行（坐标Y相同，X不同）就不需要查找了，因为查找也没有意义，Y值不变了，所以可以直接break出循环，进行下一个Y的查找

完整代码

function getNextCenter(data, width, height, y = -1) { let startY = Math.floor(height / 4); let endY = Math.floor(height * 3 / 4); // 去除背景色 let startX = startY * width * 4; let r = data[startX], g = data[startX + 1], b = data[startX + 2]; let maxY = -1; let apex = []; let pos = [0, 0]; // 保证从当前小人位置底部点往上 endY = Math.min(endY, y); let endX = width; let gapCount = 0; for (let y = startY; y < endY; y++) { let find = 0; for (let x = 1; x < endX; x++) { let i = y * (width * 4) + x * 4; let rt = data[i]; let gt = data[i + 1]; let bt = data[i + 2]; // 不是默认背景颜色 if (!tolerenceHelper(rt, gt, bt, r, g, b, 30)) { if (apex.length === 0) { if (!tolerenceHelper(data[i + 4], data[i + 5], data[i + 6], r, g, b, 30)) { //椭圆形找中心，往后找30个像素点 let len = 2; while (len++ !== 30) { i += len * 4; if (tolerenceHelper(data[i + 4], data[i + 5], data[i + 6], r, g, b, 30)) { break; } } x += len; } //找出顶点 apex = [rt, gt, bt, x, y]; pos[0] = x; // 减少循环范围 endX = x; break; } else if (tolerenceHelper(rt, gt, bt, apex[0], apex[1], apex[2], 5)) { //存在顶点了，则根据颜色值开始匹配 maxY = Math.max(maxY, y); find = x; break; } } } if (apex.length !== 0 && !find) { gapCount++; } if (gapCount === 3) { break; } } pos[1] = Math.floor((maxY + apex[4]) / 2); // console.log(points_top, points_left, points_right); console.log(`next position center (x,y)=${pos[0]},${pos[1]}`); return pos; }

最后

在整个测试的过程中，还尝试了其他的方式，比如先将边缘找出再找中心点，各种尝试，想练手的可以直接改下看看。

为了调试方便，我将这部分代码单独一个router，可以直接github clone下来代码访问localhost:3000/test ，然后边改边尝试边看效果。

本篇文章介绍了怎么识别出来图片中「小人」和下一个跳转的位置，下一篇介绍下怎么让「小人」自动跳转过去，敬请期待。