jQuery如何实现小球点击发射动画

发布时间：2022-01-14 16:43:11 阅读：132 作者：小新栏目：开发技术

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

小编给大家分享一下jQuery如何实现小球点击发射动画，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

花了两个小时使用jQuery写了一个小动画游戏，如下图所示，通过鼠标点击，发射球。

jQuery如何实现小球点击发射动画

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #main {
                width: 500px;
                height: 650px;
                border: 3px solid #efefef;
                margin: 30px auto;
                position: relative;
            }

            #fireSpace {
                width: 100%;
                height: 400px;
                position: absolute;
                top: 0;
                left: 0;

            }

            #gun {
                display: block;
                width: 60px;
                height: 60px;
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translate(-50%, 0);
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="fireSpace">

            </div>
            <img src="./gun.png" id="gun">
        </div>
    </body>
</html>

<script src="./jquery.js"></script>
<script>
    let initX = 0,
        initY = 300,
        initDeg = 90,
        thenDeg, gunX, gunY, boo, x = 0,
        y = 300,
        nx, ny, dg = 90,
        ndg, rdg, isLeft0, isLeft;
    document.getElementById("fireSpace").onmousemove = function(e) {
        if (e.offsetX - 220 >= 0) {
            // nx = e.offsetX - 220;
            // ny = 600-e.offsetY;
            gunX = e.offsetX - 220;
            isLeft = false;
        } else if (e.offsetX - 220 <= 0) {
            gunX = 220 - e.offsetX;
            isLeft = true;
        }
        gunY = 650 - e.offsetY;
        if (e.offsetX - 220 == 0) {
            thenDeg = 90;
        } else {
            thenDeg = gunY - gunX >= 0 ? (90 - Math.asin(gunX / gunY) * 180 / Math.PI) : (Math.asin(gunY / gunX) *
                180 / Math.PI);
            // thenDeg = Math.asin(gunY / gunX) * 180 / Math.PI;
        }
        if (initX - 220 == 0) {
            initDeg = 90;
        } else {
            initDeg = initY - initX >= 0 ? (90 - Math.asin(initX / initY) * 180 / Math.PI) : (Math.asin(initY /
                    initX) *
                180 / Math.PI);
        }
        if (initY <= 3) {
            initDeg = 0;
        }
        if (gunY <= 3) {
            thenDeg = 0;
        }
        if (!isLeft0 && isLeft) {
            rdg = -(180 - initDeg - thenDeg);
        } else if (isLeft0 && !isLeft) {
            rdg = 180 - initDeg - thenDeg;
        } else if (isLeft0 && isLeft) {
            rdg = (thenDeg - initDeg)
        } else if (!isLeft0 && !isLeft) {
            rdg = (initDeg - thenDeg)
        }
        document.getElementById("gun").style.transform = "translate(-50%, 0) rotate(" + rdg + "deg)";
        x = nx;
        y = ny;
        isLeft0 = isLeft;
    }
    let fireX,fireY,iX=0,iY=0
    document.getElementById("fireSpace").onclick = function(e) {
        fireX = e.offsetX;
        fireY = e.offsetY;
        let boll = document.createElement("img");
        boll.style.width = "50px";
        boll.style.height = "50px";
        boll.setAttribute("src", "./boll.png");
        boll.style.position = "absolute";
        boll.style.bottom = "0";
        boll.style.left = "50%";
        boll.style.transform = "translate(-40%,0)";
        boll.style.zIndex = "-1";
        document.getElementById("main").appendChild(boll);
        $(boll).animate({
            top: fireY,
            left: fireX
        }, 1000);
        setTimeout(function() {
            boll.parentNode.removeChild(boll);
        }, 1000);
    }
</script>