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。