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>

圖片素材:

感興趣的的小夥伴可以去試試。

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: