js重力感应小球游戏

满山猴子我腚最红#

已于 2022-10-08 09:22:45 修改

阅读量977

点赞数 1

文章标签： javascript 游戏前端

于 2022-10-07 22:27:50 首次发布

本文链接：https://blog.csdn.net/qq_61935150/article/details/127200447

版权

通过手机的倾斜来控制小球的方向

可以在vscode安装Live server 插件，然后配置settings.json开启服务器在手机预览

注意只能在https才可以使用deviceorientation事件，但是我发现QQ里的浏览器不是https也可以

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .ball {
            width: 50px;
            height: 50px;
            /* background-color: #2e7eff; */
            border: 1px solid rgb(225, 225, 225);
            border-radius: 100%;
            position: absolute;
            z-index: 9;
            /* #00f788 #ffdb63 #d363ff  */
            /* clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); */
        }

        .tail {
            width: 50px;
            height: 50px;
            /* background-color: #2e7eff; */
            /* border: 3px solid #2e7eff; */
            border-radius: 100%;
            position: absolute;
            animation: tail 1s forwards;
        }

        @keyframes tail {
            10% {
                opacity: 0.5;
            }

            100% {
                transform: scale(0.1);
                opacity: 0;
            }
        }

        button[color="#ff6363"],
        button[color="#2e7eff"] {
            width: 80px;
            height: 60px;
            position: fixed;
            left: 10px;
            border: none;
            color: white;
            opacity: 0.9;
            z-index: 99;
        }

        button[color="#ff6363"] {
            background-color: #ff6363;
            transform: skewX(-10deg);
        }

        button[color="#2e7eff"] {
            bottom: 0;
            background-color: #2e7eff;
            transform: skewX(10deg);
        }

        .goods {
            width: 50px;
            height: 50px;
            position: fixed;
            border-radius: 100%;
            left: 100vw;
            background-color: #2e7eff;
            animation: goods 3s linear forwards;
        }

        @keyframes goods {
            100% {
                left: -100px;
            }
        }
    </style>
</head>

<body>

    <div class="ball"></div>

    <button color="#ff6363" onclick="toggleColor(this)"></button>
    <button color="#2e7eff" onclick="toggleColor(this)"></button>

    <script>
        const html = document.documentElement;
        const body = document.body;
        const ball = document.querySelector('.ball');
        const title = document.querySelector('title');

        let WW = window.innerWidth,
            WH = window.innerHeight;

        let ballW = ball.offsetWidth,
            ballH = ball.offsetHeight;

        let speedY = 10,
            speedX = 20;

        let x, y, z;

        let ballT, ballL;

        let color = '#2e7eff';

        const colorList = [
            '#2e7eff',
            '#ff6363'
        ]

        function handleOrientation(event) {
            x = event.beta;
            y = event.gamma;
            z = event.alpha;

            ballT = x * speedX + WH / 2 - ballW / 2;
            ballL = y * speedY + WW / 2 - ballH / 2;

            title.innerText = y.toFixed(2) + ' / ' + x.toFixed(2) + ' / ' + z.toFixed(2);
            // title.innerText = ballT.toFixed(2) + '///' + ballL.toFixed(2);

            if (ballT <= 0) ballT = 0;
            else if (ballT >= WH - ballH) ballT = WH - ballH;

            if (ballL <= 0) ballL = 0;
            else if (ballL >= WW - ballW) ballL = WW - ballW;

            ball.style.top = `${ballT}px`;
            ball.style.left = `${ballL}px`;

            ball.style.backgroundColor = color;
            ball.setAttribute('color', color);

            createTail();
        }

        function createTail() {
            const tail = document.createElement('div');
            tail.classList.add('tail');
            tail.style.top = ball.offsetTop + 'px';
            tail.style.left = ball.offsetLeft + 'px';
            tail.style.backgroundColor = color;
            body.appendChild(tail);
            tail.addEventListener('animationend', e => e.target.remove());
        }

        window.addEventListener('deviceorientation', handleOrientation);

        function toggleColor(e) {
            color = e.getAttribute('color');
            ball.style.backgroundColor = color;

            // if (html.requestFullscreen) {
            //     html.requestFullscreen();
            // } else if (html.mozRequestFullScreen) {
            //     html.mozRequestFullScreen();
            // } else if (html.msRequestFullscreen) {
            //     html.msRequestFullscreen();
            // } else if (html.webkitRequestFullscreen) {
            //     html.webkitRequestFullScreen();
            // }
        }

        function randomNumber(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function createGoods() {
            const goods = document.createElement('div');
            goods.classList.add('goods');
            goods.style.top = randomNumber(0, WH - ballH) + 'px';
            const color = colorList[randomNumber(0, colorList.length - 1)];
            goods.style.backgroundColor = color;
            goods.setAttribute('color', color);
            body.appendChild(goods);
            goods.addEventListener('animationend', e => e.target.remove());
        }

        setInterval(createGoods, 1000);

        function isIntersect(element1, element2) {
            const rect1 = element1.getBoundingClientRect();
            const rect2 = element2.getBoundingClientRect();
            return rect1.right > rect2.left && rect1.left < rect2.right && rect1.bottom > rect2.top && rect1.top < rect2.bottom;
        }

        setInterval(() => {
            const allGoods = document.querySelectorAll('.goods');
            allGoods.forEach(goods => {
                if(isIntersect(goods, ball) && ball.getAttribute('color') == goods.getAttribute('color')) {
                    goods.remove();
                }
            });
        }, 100);

    </script>

</body>

</html>