xiu
/
color.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <script src="/js/vconsole.min.js"></script> -->
    <script src="/js/mmUtil.js"></script>
    <title>Color</title>
    <style>
        html,
        body {
            margin: 0;
            overflow: hidden;
        }
        .super-cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #00000055;
        }

        .color-circle {
            position: absolute;
            display: inline-block;
            box-sizing: border-box;
            width: 80vw;
            height: 80vw;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <!-- <div class="super-cover"></div> -->
    <script>
        window.onload = function() {
            // mmSpeak && mmSpeak('halo');
            // var a = document.createElement('input');
            // a.ontouch = function () {
                mmSpeak('halo');
            // }
            // a.className = 'super-gay';
            // a.style.height = '100vh';
            // a.style.width = '100vw';
            // a.style.margin = 0;
            // a.style.border = 0;
            // document.body.appendChild(a);
        }
        // 禁止 手机端的触摸事件，防止 屏幕滑动
        window.document.ontouchstart = clearActive;
        window.document.ontouchmove = clearActive;
        // window.document.ontouchcancel = clearActive;
        // window.document.ontouchend = clearActive;
        // window.document.onclick = clearActive;
        var widthSize = 1;
        var heightSize = 1;
        function clearActive(e) {
            let r = Math.random() * 256 | 0;
            let g = Math.random() * 256 | 0;
            let b = Math.random() * 256 | 0;
            e.target.style.backgroundColor = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`
            if (mmSpeak && (r + g + b) > 750) {
                mmSpeak('maxmon');
            }else if (mmSpeak && (r + g + b) > 700) {
                mmSpeak('厉害');
            }else if (mmSpeak && (r + g + b) > 650) {
                mmSpeak('棒(๑•̀ㅂ•́)و✧');
            }
            e.touches && (widthSize = parseInt(e.touches[0].screenX) / 20);
            e.touches && (heightSize = parseInt(e.touches[0].screenY) / 20);
            console.log(e);
            console.log(widthSize, heightSize);
            // document.getElementsByClassName('super-cover')[0].innerText = `${widthSize}, ${heightSize}`;
            e.preventDefault()
        }
        // 赤色 【RGB】255, 0, 0 【CMYK】 0, 100, 100, 0
        // 橙色 【RGB】255, 165, 0 【CMYK】0, 35, 100, 0
        // 黄色 【RGB】255, 255, 0 【CMYK】0, 0, 100, 0
        // 绿色 【RGB】0, 255, 0 【CMYK】100, 0, 100, 0
        // 青色 【RGB】0, 127, 255 【CMYK】100, 50, 0, 0
        // 蓝色 【RGB】0, 0, 255 【CMYK】100, 100, 0, 0
        // 紫色 【RGB】139, 0, 255 【CMYK】45, 100, 0, 0
        function addCircle(circleColor) {
            let colorCircle = document.createElement('div');
            colorCircle.style.border = `50px solid ${circleColor}`;
            colorCircle.classList.add('color-circle');
            document.body.appendChild(colorCircle);
        }
        const COLOR_BOX = [
            "rgba(255, 0, 0, .1)",
            "rgba(255, 165, 0, .1)",
            "rgba(255, 255, 0, .1)",
            "rgba(0, 255, 0, .1)",
            "rgba(0, 127, 255, .1)",
            "rgba(0, 0, 255, .1)",
            "rgba(139, 0, 255, .1)"
        ]
        COLOR_BOX.forEach(ele => {
            addCircle(ele);
        })
        startSoulRock();
        function startSoulRock() {
            let inter = setInterval(() => {
                let circles = document.getElementsByClassName('color-circle');
                circles && [].forEach.call(circles, circle => {
                    let thisTop = parseFloat(circle.style.top) || 10;
                    let thisLeft = parseFloat(circle.style.left) || 10;
                    let paths = circle.paths || [];
                    // 是否需要会来，防止 图片边乱
                    let needBack = circle.needBack ? 1 : 0;
                    if ((paths.length < 20 || paths.length == 0) && !needBack) {
                        let topMove = -heightSize + Math.random() * heightSize * 2;
                        let leftMove = -widthSize + Math.random() * widthSize * 2;
                        paths.push({
                            top: topMove,
                            left: leftMove
                        })
                        circle.style.top = `${thisTop + topMove}px`;
                        circle.style.left = `${thisLeft + leftMove}px`;
                    } else {
                        needBack = 1;
                        let path = paths.pop();
                        circle.style.top = `${thisTop - path.top}px`;
                        circle.style.left = `${thisLeft - path.left}px`;
                        if (!paths.length) needBack = 0;
                    }
                    circle.paths = paths;
                    circle.needBack = needBack;
                })
            }, 50)
        }
    </script>
</body>

</html>