Maze Map

Maze 的路线地图
换行
// ==UserScript==
// @name         Maze Map
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Maze 的路线地图
// @author       Lemon
// @match        https://maze.hancel.org/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=hancel.org
// @grant        unsafeWindow
// @run-at       document-start
// @license      MIT
// ==/UserScript==

const maxWidth = 750;
let width = 20;
let x = 0;
let y = 0;

(function () {
    const originFetch = fetch;
    window.unsafeWindow.fetch = (url, options) => {
        return originFetch(url, options).then(async (response) => {
            if (response.status != 200) {
                return response;
            }
            if(url === '/api/maze/last'){
                let res = await getResponse(response);
                create(res);
                return response;
            }
            if (url === '/api/maze/move/up'){
                y--;
                let res = await getResponse(response);
                buildMap(res.mazeView);
                return response;
            }
            if (url === '/api/maze/move/down'){
                y++;
                let res = await getResponse(response);
                buildMap(res.mazeView);
                return response;
            }
            if (url === '/api/maze/move/left'){
                x--;
                let res = await getResponse(response);
                buildMap(res.mazeView);
                return response;
            }
            if (url === '/api/maze/move/right'){
                x++;
                let res = await getResponse(response);
                buildMap(res.mazeView);
                return response;
            }
            return response;
        });
    };
})();

// 解析响应值
function getResponse(response) {
    const responseClone = response.clone();
    return responseClone.json();
}

// 创建画布
function create(res) {
    var canvas = document.createElement("canvas");
    canvas.id = "map-canvas";
    canvas.style['z-index'] = 999;
    canvas.style.border = "2px solid gray";
    canvas.style.position = 'absolute';
    canvas.style.left = 0;
    canvas.style.bottom = 0;
    if (res.size > 50) {
        width = (maxWidth / res.size).toFixed(2);
    }
    canvas.width = res.size * width;
    canvas.height = res.size * width;
    document.body.appendChild(canvas);
    // 恢复之前走过的路
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = 'white';
    Object.keys(res.mazeCount).forEach(e => {
        let arrays = e.split('-');
        ctx.fillRect(arrays[1] * width, arrays[0] * width, width, width);
    });
    // 设置起点
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, width, width);
    // 设置当前位置
    ctx.fillStyle = '#ffc107';
    ctx.fillRect(res.playerCol * width, res.playerRow * width, width, width);
    x = res.playerCol;
    y = res.playerRow;
    buildMap(res.mazeView);
}

// 构建地图
function buildMap(aroundArrays) {
    var canvas = document.getElementById("map-canvas");
    var ctx = canvas.getContext("2d");
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
            mark(i, j, ctx, aroundArrays[j][i]);
        }
    }
}

// 标记单元格
function mark(i, j, ctx, e) {
    if (i == 1 && j == 1) {
        ctx.fillStyle = '#ffc107';
    } else {
        setColor(ctx, e);
    }
    i = i - 1 + x;
    j = j - 1 + y;
    if (i < 0 || j < 0) {
        return;
    }
    ctx.fillRect(i * width, j * width, width, width);
}

// 设置对应的颜色,有优先级需要注意顺序
function setColor(ctx, e) {
    if (e.includes('wall')) {
        ctx.fillStyle = 'gray';
        return;
    }
    if (e.includes('begin')) {
        ctx.fillStyle = 'red';
        return;
    }
    if (e.includes('goal')) {
        ctx.fillStyle = 'green';
        return;
    }
    if (e.includes('golden-box')) {
        ctx.fillStyle = '#3F51B5';
        return;
    }
    if (e.includes('golden-box-open')) {
        ctx.fillStyle = '#673ab7';
        return;
    }
    if (e.some(item => item.includes('count'))) {
        ctx.fillStyle = 'white';
        return;
    }
}