滚动的八卦

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rollBagua</title>
</head>

<body>
    <canvas width=600 height=400 style="border:1px solid"></canvas>
    <button name="stop">暂停</button>
    <button name="jump">跳</button>
    <script>
        const canvas = document.querySelector("canvas");
        const pen = canvas.getContext("2d");
        const pi = Math.PI;
        const w = canvas.offsetWidth;
        const h = canvas.offsetHeight;
        function rota(r) {
            pen.save();
            pen.beginPath();
            pen.moveTo(0, -r)
            pen.arc(0, 0, r, -1 / 2 * pi, 1 / 2 * pi);
            pen.arc(0, r / 2, r / 2, 1 / 2 * pi, -1 / 2 * pi);
            pen.arc(0, -r / 2, r / 2, 1 / 2 * pi, -1 / 2 * pi, true);
            pen.fill();
            pen.arc(0, 0, r, -1 / 2 * pi, 1 / 2 * pi, true);
            pen.stroke();
            pen.beginPath();
            pen.arc(0, -r / 2, r / 6, 0, 2 * pi);
            pen.fill();
            pen.beginPath();
            pen.arc(0, r / 2, r / 6, 0, 2 * pi);
            pen.fillStyle = "#fff";
            pen.fill();
            pen.stroke();
            pen.beginPath();
            pen.restore();
        }
        const r = 50;//球的半径
        let ang = 0,//当前的旋转角度
            vAng = pi / 30;//旋转的速度
        let x = r + 1,//球的x坐标
            xv = 2;//球x轴方向的速度
        let y = 200,//球y轴上的坐标
            yv = 5,//球y轴方向上的速度
            ay = 0.1;//球受到的向下加速度
        let isStop = false;//是否暂停标记
        let isJump = false;//是否跳跃标记

        function anim() {
            pen.clearRect(0, 0, w, h);
            pen.save();
            if (x >= w - r || x <= r) {
                xv = -xv;
                vAng = -vAng;
            }
            if (isJump) {
                y -= (yv -= ay);
                if(y>=200){
                    isJump = false;
                    y = 200;
                    yv = 5;
                }
            }
            pen.translate(x += xv, y);
            pen.rotate(ang += vAng);
            rota(r);
            pen.restore();
            pen.moveTo(0, 200 + r);
            pen.lineTo(w, 200 + r)
            pen.stroke();
            if (isStop) {
                return;
            }
            requestAnimationFrame(() => anim());
        }
        anim();
        document.addEventListener("click", function (e) {
            let event = e || window.event;
            if (event.target.name === "stop") {
                if (isStop === false) {
                    isStop = true;
                    event.target.innerHTML = "继续";
                } else {
                    isStop = false;
                    event.target.innerHTML = "暂停";
                    anim();
                }
            } else if (event.target.name === "jump") {
                if (isJump === false) {
                    isJump = true;
                }
            }
        })
    </script>
</body>

</html>
猜你喜欢
