中秋快乐，快来摇一摇，摇出你的本命月饼吧-阿里云开发者社区

中秋快乐，快来摇一摇，摇出你的本命月饼吧

2022-10-18 134

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 中秋节到了，吃月饼必不可少，为了让大家能够更愉快的过中秋，我花了一晚的功夫开发了一个摇一摇的页面，通过页面摇一摇，可以摇出各种各样的月饼，快来试试你的本命月饼是什么吧。

网络异常，图片无法展示

中秋节到了，吃月饼必不可少，为了让大家能够更愉快的过中秋，我花了一晚的功夫开发了一个摇一摇的页面，通过页面摇一摇，可以摇出各种各样的月饼，快来试试你的本命月饼是什么吧。

注意玩耍时如果摇不出可尝试加大摇一摇幅度哦。不过请小心练出麒麟臂 💪，并在无人环境下进行，避免被误以为发病（🐶）。

注意一共收集了 25 种月饼，越少见的月饼越难摇出，看看你能收集到哪些月饼吧。

技术实现

下面稍微讲一下技术实现的内容。

摇一摇

首先是关于摇一摇部分，摇一摇的实现主要使用的是浏览器中的 devicemotion 事件，该事件可以获取到设备的速度变化、位置、方向等信息。

window.addEventListener('devicemotion', e => {
    const devicemotion = {
        accelerationIncludingGravityX: e.accelerationIncludingGravity.x!,
        accelerationIncludingGravityY: e.accelerationIncludingGravity.y!,
        accelerationIncludingGravityZ: e.accelerationIncludingGravity.z!
    };
    if (latestDevicemotion) {
        // 摇一摇的幅度
        const thresholdCount = Math.max(
            Math.abs(latestDevicemotion.accelerationIncludingGravityX - devicemotion.accelerationIncludingGravityX),
            Math.abs(latestDevicemotion.accelerationIncludingGravityY - devicemotion.accelerationIncludingGravityY),
            Math.abs(latestDevicemotion.accelerationIncludingGravityZ - devicemotion.accelerationIncludingGravityZ)
        );
        // 大于一定幅度才计算
        if (thresholdCount > 20) {
            shakeCount += 8;
        }
        shakeCount = Math.max(0, shakeCount - 2);
    }
    latestDevicemotion = devicemotion;
});
复制代码

代码如上，通过 devicemotion 事件数据，可以获取到三个方向的加速度，然后将其和之前的数值进行比对即可得出摇一摇的幅度，然后通过 shakeCount 来模拟记录持续摇一摇的时长，从而实现模拟摇一摇触发的效果。

需要注意的是，在安卓设备中，需要在 https 环境下才能正常触发 devicemotion 事件，所以本地开发时会有些麻烦，必须对本地开发工具启用 https。而在 iOS 中，除了必须是在 https 环境外，还需要使用 DeviceMotionEvent.requestPermission 获取到权限后才能监听到事件，所以我将事件绑定抽取出来，根据环境来进行调用，具体相关代码如下：

if (typeof (DeviceMotionEvent as any).requestPermission === 'function') {
    (DeviceMotionEvent as any)
        .requestPermission()
        .then((permissionState: string) => {
            if (permissionState === 'granted') {
                bindEvent();
            }
        })
        .catch(() => {
            alert('获取权限失败');
        });
} else {
    bindEvent();
}
复制代码

震动与音效

当摇动幅度和摇动时间达到一定阈值后，摇一摇事件触发，会从月饼列表中抽取随机抽取一个月饼，并且会调用手机震动和播放音效来提醒摇一摇的用户出货了。🐶

if (thresholdCount > 80 && shakeCount > 100) {
    window.navigator.vibrate?.(200);
    const audio = document.createElement('audio');
    audio.src = '/success.mp3';
    document.body.appendChild(audio);
    audio.onended = () => document.body.removeChild(audio);
    audio.play();
}
复制代码