javascript实现wallpaper engine彩蛋功能

javascript实现wallpaper engine彩蛋功能


灵感来自知乎
链接: 如何评价Wallpaper Engine?.
wallpaper engine的这个小彩蛋太有意思了, 于是就用javascript实现了一下

function KeyupEgg(obj) {
    const keyArr = obj.keyArr;//需要按下的按键列表
    let index = 0;//初始值, 表示当前需要按下按键列表中的哪个按键
    let flag = false;//用于判断当前是否成功

    const fun = function (e) {

        if (flag) {//判断是否已经成功
            return
        }

        if(e.key === keyArr[index]) {//判断当前按下的按键是否是正确的

            if (obj.time) {//判断之前有没有设置定时任务
                clearTimeout(obj.time);//清除定时任务
            }

            obj.time = setTimeout(function () {//开启定时任务, 用变量接收是为了清除定时任务
                index = 0;//重置索引
                if (typeof obj.error === 'function') {//判断是否有失败函数
                    obj.error(e);//执行失败函数
                }
            }, obj.ms);//定时任务的定时时间

            index++;//更新索引

            if (typeof obj.animation === 'function') {//判断是否有过程函数
                obj.animation(e);//执行过程函数
            }

            if (index === keyArr.length) {//判断是否成功
                clearTimeout(obj.time);//清除定时任务, 因为定时任务可能会触发失败函数
                obj.success(e);//执行成功函数
            }

        } else {//如果按错按键则重新开始
            index = 0;//重置索引
        }
    };

    (function(fun) {
        /*
         * 1. 保存原来的keyup函数
         * 2. 按下按键后, 在执行完判断函数后还应该调用会原本的keyup方法, 避免之前的keyup函数失效
         */
        const keyup = window.document.onkeyup;

        if (typeof window.document.onkeyup !== 'function') {//判断在此之前keyup是否已经是一个函数了
            window.document.onkeyup = fun;//如果不是函数, 直接把判断函数赋值给按键监听事件
        } else {//如果在此之前keyup已经是一个函数了
            window.document.onkeyup = function(e) {//重置keyup函数
                fun(e);//先执行判断函数
                keyup(e);//在执行原本keyup的函数
            };
        }
    })(fun);

}

下面是测试代码

new KeyupEgg({
    "keyArr": [//必须
        "ArrowUp", //↑
        "ArrowUp", //↑
        "ArrowDown", //↓
        "ArrowDown", //↓
        "ArrowLeft", //←
        "ArrowRight", //→
        "ArrowLeft", //←
        "ArrowRight", //→
        "B",
        "A"
    ],
    "ms": 250,//必须 --->两次按键间隔的毫秒
    "success": function (e) {//必须
        alert("成功");
    },
    // "error": function (e) {//非必须
    //     alert("失败");
    // },
    "animation": function (e) {//非必须
        // console.log(e.key);
    }
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值