element miner

2022/4/11 20:00:18
当前为 2022-04-13 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        element miner
// @namespace   Violentmonkey Scripts
// @match       *
// @include     *
// @require     https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
// @grant       none
// @version     1.0
// @author      ec50n9
// @description 2022/4/11 20:00:18
// @license     MIT
// ==/UserScript==

this.$ = this.jQuery = jQuery.noConflict(true);

// 道具
function Prop(crane, type = 'bomb') {
    this.crane = crane;
    this.countDown = 200;
    this.size = 32;
    this.deg = 0;
    this.color = 'red';
    this.zIndex = 0;
    this.WAGGLE_DEG = 15;
    this.SCORES = {
        bomb: -100,
        flower: 50,
        diamond: 100
    }
    this.TYPES = {
        bomb: '💣',
        flower: '🌹',
        diamond: '💎'
    };
    this.BOOM_TEXTS = {
        bomb: '💥BOOM!!!',
        flower: '❤️HEY!!!',
        diamond: '💰HOOO!!!!'
    }
    this.type = (type in this.TYPES) ? type : 'bomb';
    this.score = this.SCORES[this.type];
    this.text = this.TYPES[this.type];
    this.boomText = this.BOOM_TEXTS[this.type];
    this.element = $(`<div>${this.TYPES[this.type]}</div>`).css({
        'position': 'fixed',
        'left': `${crane.captured.element.offset().left + crane.captured.element.width() / 2}px`,
        'top': `${crane.captured.element.offset().top + crane.captured.element.height() / 2}px`,
        'white-space': 'nowrap',
        'color': this.color,
        'font-size': `${this.size}px`,
        'transform': `translate(-50%, -50%) rotate(${this.deg}deg)`,
        'z-index': this.zIndex
    });
}
Prop.prototype.appendTo = function (target) {
    target.prepend(this.element);
}

// 抓手
function Crane(left = 0, top = 0) {
    // 得分
    this.score = 0;
    this.porpList = [];
    // 位置
    this.position = {
        left,
        top
    };
    // 角度
    this.deg = -180;
    // 绳子
    this.rope = {
        width: 10,
        length: 50,
        step: 2,
        DEFAULT_STEP: 2,
        DEFAULT_LEN: 50,
        MIN_LEN: 0,
        MAX_LEN: 1000
    };
    // 钩子
    this.hock = {
        src: 'https://s3.bmp.ovh/imgs/2022/04/12/1c986b60d886b9dd.png',
        src_default: 'https://s3.bmp.ovh/imgs/2022/04/12/1c986b60d886b9dd.png',
        src_capture: 'https://s3.bmp.ovh/imgs/2022/04/12/fd3fdb4cf18eb9f2.png'
    }
    // 当前状态
    this.cur_status = 0;
    this.STATUS = {
        static: 0,
        elongating: 1,
        reducing: 2,
        inRecovery: 3
    };
    // 被捕获
    this.captured = {
        element: null,
        dis_left: 0,
        dis_top: 0
    };
    // 操作台
    this.ele_console = $('<div></div>').css({
        'position': 'fixed',
        'left': `${this.position.left}px`,
        'top': `${this.position.top}px`,
        // 'transform': 'translate(-50%, -50%)',
        'width': '10em',
        'height': '10em',
        'background-image': 'url(https://s3.bmp.ovh/imgs/2022/04/13/ebbf40101c3c1038.png)',
        'background-size': '100% auto',
        'overflow': 'visible',
        'z-index': '997'
    });
    // 操作台图片
    this.ele_console_img = $('<img src="https://s3.bmp.ovh/imgs/2022/04/13/3cf047c6fc4f1a33.png"/>').css({
    position: 'absolute', 
    bottom: '0',
    left: '20%',
    width: '60%',
    });
    this.ele_console.append(this.ele_console_img);
    // 抓手容器
    this.ele_hock_container = $('<div></div>').css({
        'margin-top': '90%',
        'transform-origin': 'top center',
        'transform': `rotate(${this.deg}deg)`,
        'z-index': '999'
    });
    this.ele_console.append(this.ele_hock_container);
    // 分数
    this.ele_score = $(`<div>${this.score}</div>`).css({
        'position': 'absolute',
        'top': '-1.5em',
        'font-size': '1em',
        'color': 'green',
        'white-space': 'nowrap'
    });
    this.ele_console.prepend(this.ele_score);
    // 绳子
    this.ele_rope = $('<div></div>').css({
        'width': `${this.rope.width}px`,
        'height': `${this.rope.length}px`,
        'margin': '0 auto',
        'background-image': 'url(https://s3.bmp.ovh/imgs/2022/04/13/65f0a51cebe9be16.png)',
        'background-size': '100% auto',
        'background-repeat': 'no-repeat repeat'
    });
    this.ele_hock_container.append(this.ele_rope);
    // 抓手
    this.ele_hock = $(`<div></div>`).css({
        'width': '4em',
        'height': '4em',
        'margin': '0 auto',
        'margin-top': '-4px'
    });
    this.ele_hock_img = $(`<img style="width:inherit; height:inherit; object-fit:contain;"
                            src="${this.hock.src}">`);
    this.ele_hock.append(this.ele_hock_img);
    this.ele_hock_container.append(this.ele_hock);
    // 点击事件
    let that = this;
    this.ele_console.click(function () {
        if (that.status == that.STATUS.elongating) {
            that.catch();
        } else {
            that.elongate();
        }
    });
}

// 添加到
Crane.prototype.appendTo = function (target) {
    target.append(this.ele_console);
}
// 增加角度
Crane.prototype.addDeg = function (increment) {
    this.deg += increment;
    if (this.deg == 360) {
        this.deg = 0;
    } else if (this.deg > 360) {
        this.deg %= 360;
    } else if (this.deg < 0) {
        this.deg = 360 + this.deg % 360;
    }
}
// 设置分数
Crane.prototype.updateScore = function (increment) {
    let newScore = this.score + increment;
    if (newScore < 0) {
        this.score = 0;
    } else {
        this.score = newScore;
    }
}
// 静态
Crane.prototype.static = function () {
    this.status = this.STATUS.static;
}
// 伸长
Crane.prototype.elongate = function () {
    this.status = this.STATUS.elongating;
}
// 恢复
Crane.prototype.recovery = function () {
    this.status = this.STATUS.inRecovery;

    // 移除元素
    if (this.captured.element) {
        this.updateScore(10);
        this.captured.element.remove();
        this.captured.element = null;
    }

    // 恢复绳子伸长的步长
    this.rope.step = this.rope.DEFAULT_STEP;
}
// 捕捉
Crane.prototype.catch = function () {
    this.status = this.STATUS.reducing;

    let scrollLeft = $(document).scrollLeft();
    let scrollTop = $(document).scrollTop();

    let x = this.ele_hock.offset().left - scrollLeft + this.ele_hock.width() / 2,
        y = this.ele_hock.offset().top - scrollTop + this.ele_hock.height() / 2;

    let elements = document.elementsFromPoint(x, y);
    if (elements.length > 3) {
        this.captured.element = $(elements[3]);
        let tagName = this.captured.element[0].tagName.toLowerCase();
        // 忽略html元素
        if (tagName == 'html' || tagName == 'body') {
            this.captured.element = null;
            return;
        }
        // 计算上和左的距离
        this.captured.dis_left = this.ele_hock.offset().left - this.captured.element.offset().left + scrollLeft;
        this.captured.dis_top = this.ele_hock.offset().top - this.captured.element.offset().top + scrollTop;
        // 计算尺寸
        let size = this.captured.element.width() + this.captured.element.height();
        // this.rope.step = 1;
        // 初始化元素
        this.captured.element.css({
            'position': 'fixed',
            'left': `${this.captured.element.offset().left- $(document).scrollLeft()}px`,
            'top': `${this.captured.element.offset().top- $(document).scrollTop()}px`,
            'width': `${this.captured.element.width()}px`,
            'height': `${this.captured.element.height()}px`,
            'z-index': '995'
        });
        // 炸弹
        if (tagName == 'img') {
            let random = Math.random();
            let porp;
            if (random > .7) {
                porp = new Prop(this, 'bomb');
            } else if (random > .5) {
                porp = new Prop(this, 'flower');
            } else if (random > .3) {
                porp = new Prop(this, 'diamond');
            } else {
                porp = new Prop(this, 'bomb');
            }
            if (porp) {
                porp.appendTo(this.captured.element.parent());
            }
            this.porpList.push(porp);
        }
    }
}
// 更新
Crane.prototype.update = function () {
    // 爪子
    if (this.status == this.STATUS.elongating) {
        // 伸长
        if (this.rope.length < this.rope.MAX_LEN) {
            this.rope.length += this.rope.step;
        } else {
            this.catch();
        }
    } else if (this.status == this.STATUS.reducing) {
        // 收缩
        if (this.rope.length > this.rope.MIN_LEN) {
            this.rope.length -= this.rope.step;
        } else {
            this.recovery();
        }
    } else if (this.status == this.STATUS.inRecovery) {
        // 恢复
        if (this.rope.length > this.rope.DEFAULT_LEN) {
            this.rope.length -= 1;
        } else if (this.rope.length < this.rope.DEFAULT_LEN) {
            this.rope.length += 1;
        } else {
            this.static();
        }
    } else {
        this.addDeg(.5);
    }

    // 抓手状态
    if (this.captured.element) {
        // 抓着东西
        this.hock.src = this.hock.src_capture;
    } else {
        // 没有东西
        this.hock.src = this.hock.src_default;
    }

    // 道具
    for (let i in this.porpList) {
        let porp = this.porpList[i];
        if (porp.countDown > 0) {
            porp.countDown -= 1;
        } else if (porp.countDown > -64) {
            porp.size += 1;
            porp.countDown -= 1;
        } else if (porp.countDown == -64) {
            porp.deg = porp.WAGGLE_DEG;
            porp.text = porp.boomText;
            porp.zIndex = 999;
            porp.countDown -= 1;
            porp.crane.updateScore(porp.score);
        } else if (porp.countDown > -96) {
            if (porp.countDown % 8 == 0) {
                porp.deg = -porp.deg;
            }
            porp.countDown -= 1;
        } else {
            porp.element.remove();
            this.porpList.splice(i, 1);
        }
    }
}
// 绘制
Crane.prototype.draw = function () {
    // 分数
    this.ele_score.text('分数：' + this.score);
    // 旋转角度和长度
    this.ele_hock_container.css('transform', `rotate(${this.deg}deg)`);
    this.ele_rope.css({
        'width': `${this.rope.width}px`,
        'height': `${this.rope.length}px`
    });
    // 钩子图片
    this.ele_hock_img.attr('src', this.hock.src);
    // 拖动元素
    if (this.captured.element) {
        this.captured.element.css({
            'left': `${this.ele_hock.offset().left - this.captured.dis_left}px`,
            'top': `${this.ele_hock.offset().top - this.captured.dis_top}px`
        });
    }
    // 道具
    for (let porp of this.porpList) {
        porp.element.text(porp.text).css({
            'transform': `translate(-50%, -50%) rotate(${porp.deg}deg)`,
            'color': porp.color,
            'font-size': `${porp.size}px`,
            'z-index': porp.zIndex
        });
    }
}

// 休眠
async function sleep(delay) { return new Promise((resolve) => setTimeout(resolve, delay)); }
// 游戏循环
async function game_loop(cranes) {
    while (true) {
        for (let crane of cranes) {
            crane.update();
            crane.draw();
        }
        await sleep(10);
    }
}

$(function () {
    console.log('开始矿工之旅！！！');
    let crane = new Crane(400, 100);
    crane.appendTo($('body'));
    let cranes = [crane];

    game_loop(cranes);
});