美团技术博客 404 页面小彩蛋 🥚

README.md

彩蛋娱乐 🎊

Usage

1. 新建 Chrome 书签，地址栏填入以下代码

javascript:const row=32,col=60,wallWidth=1,padding=1,boxSize=25,wallColor=[233,84,32,255];function index2Pixel(t){return padding+t*(boxSize+wallWidth)/2}function isWall(t,e,n){const o=index2Pixel(e),l=index2Pixel(n),a=(t,e,n)=>{const o=4*(e*t.width+n);return t.data[o]==wallColor[0]&&t.data[o+1]==wallColor[1]&&t.data[o+2]==wallColor[2]&&t.data[o+3]==wallColor[3]};return a(t,o,l)||a(t,o-1,l)||a(t,o+1,l)||a(t,o,l-1)||a(t,o,l+1)}function binaryMap(t){const e=[];for(let n=0;n<2*row+1;n++){const o=[];for(let e=0;e<2*col+1;e++)o.push(isWall(t,n,e)?1:0);e.push(o)}return e}function logMap(t){let e="";for(let n=0;n<t.length;n++){for(let o=0;o<t[n].length;o++)e+=t[n][o];e+="|||\n"}console.log(e)}function findPath(t,e,n){const o=[],l=(e,a)=>!(e<0||e>=t.length||a<0||a>=t[e].length)&&(0==t[e][a]&&(o.push([e,a]),t[e][a]=-1,e==n[0]&&a==n[1]||(!!(l(e-1,a)||l(e+1,a)||l(e,a-1)||l(e,a+1))||void o.splice(o.length-1,1))));return l(e[0],e[1]),o}function drawPath(t,e){t.lineWidth=1,t.strokeStyle="green",t.setLineDash([8,8]);for(let n=0;n<e.length;n++){const o=index2Pixel(e[n][1]),l=index2Pixel(e[n][0]);0==n?t.moveTo(o,l):t.lineTo(o,l)}t.stroke(),t.setLineDash([])}function cheat(){const t=document.getElementsByClassName("maze-content")[0],e=t.getContext("2d"),n=e.getImageData(0,0,t.width,t.height);console.assert(n.width==2*padding+(col+1)*wallWidth+col*boxSize),console.assert(n.height==2*padding+(row+1)*wallWidth+row*boxSize);const o=binaryMap(n);logMap(o);const l=findPath(o,[1,1],[2*row-1,2*col-1]);console.log(l),drawPath(e,l),CanvasRenderingContext2D.prototype._clearRect||(CanvasRenderingContext2D.prototype._clearRect=CanvasRenderingContext2D.prototype.clearRect,CanvasRenderingContext2D.prototype.clearRect=function(){this._clearRect.apply(this,arguments),drawPath(e,l)})}cheat();

2. 打开 https://tech.meituan.com/404.html
3. 点击书签，加载 JS 代码
4. 快乐玩耍 🤣

meituan-tech-blog-404-maze-cheater.js

// sizes
const row = 32;
const col = 60;
const wallWidth = 1;
const padding = 1;
const boxSize = 25;

const wallColor = [233, 84, 32, 255];

function index2Pixel(i) {
  return padding + (i * (boxSize + wallWidth)) / 2;
}

function isWall(image, i, j) {
  const pixelX = index2Pixel(i);
  const pixelY = index2Pixel(j);

  // pixel (x, y)
  const _wall = (image, x, y) => {
    const index = (x * image.width + y) * 4;
    return (
      image.data[index] == wallColor[0] &&
      image.data[index + 1] == wallColor[1] &&
      image.data[index + 2] == wallColor[2] &&
      image.data[index + 3] == wallColor[3]
    );
  };

  return (
    _wall(image, pixelX, pixelY) ||
    _wall(image, pixelX - 1, pixelY) ||
    _wall(image, pixelX + 1, pixelY) ||
    _wall(image, pixelX, pixelY - 1) ||
    _wall(image, pixelX, pixelY + 1)
  );
}

function binaryMap(image) {
  const map = [];

  for (let i = 0; i < row * 2 + 1; i++) {
    const list = [];
    for (let j = 0; j < col * 2 + 1; j++) {
      list.push(isWall(image, i, j) ? 1 : 0);
    }
    map.push(list);
  }
  return map;
}

function logMap(map) {
  let s = "";
  for (let i = 0; i < map.length; i++) {
    for (let j = 0; j < map[i].length; j++) {
      s += map[i][j];
    }
    s += "|||\n";
  }

  console.log(s);
}

function findPath(map, start, end) {
  const path = [];

  const visit = (x, y) => {
    // out of bounds
    if (x < 0 || x >= map.length || y < 0 || y >= map[x].length) return false;
    // visited or wall
    if (map[x][y] != 0) return false;

    path.push([x, y]);
    map[x][y] = -1;

    // finished
    if (x == end[0] && y == end[1]) return true;

    // find way
    if (
      visit(x - 1, y) ||
      visit(x + 1, y) ||
      visit(x, y - 1) ||
      visit(x, y + 1)
    )
      return true;

    path.splice(path.length - 1, 1);
  };

  visit(start[0], start[1]);

  return path;
}

function drawPath(ctx, path) {
  ctx.lineWidth = 1;
  ctx.strokeStyle = "green";
  ctx.setLineDash([8, 8]);

  for (let i = 0; i < path.length; i++) {
    // convert point(row, col) to pixel(x, y)
    const x = index2Pixel(path[i][1]);
    const y = index2Pixel(path[i][0]);
    if (i == 0) {
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  }
  ctx.stroke();
  ctx.setLineDash([]);
}

function cheat() {
  const canvas = document.getElementsByClassName("maze-content")[0];
  const context = canvas.getContext("2d");
  const image = context.getImageData(0, 0, canvas.width, canvas.height);

  console.assert(
    image.width == padding * 2 + (col + 1) * wallWidth + col * boxSize
  );
  console.assert(
    image.height == padding * 2 + (row + 1) * wallWidth + row * boxSize
  );

  const map = binaryMap(image);
  logMap(map);

  const path = findPath(map, [1, 1], [2 * row - 1, 2 * col - 1]);
  console.log(path);
  drawPath(context, path);

  // movement will clear canvas, redraw
  if (!CanvasRenderingContext2D.prototype._clearRect) {
    CanvasRenderingContext2D.prototype._clearRect =
      CanvasRenderingContext2D.prototype.clearRect;
    CanvasRenderingContext2D.prototype.clearRect = function () {
      this._clearRect.apply(this, arguments);
      drawPath(context, path);
    };
  }
}

cheat();

This is amazing 😱, well done mate, thank u for your work! 👍