jQuery實現(xiàn)小球點擊發(fā)射動畫

更新時間：2022年01月14日 13:28:31 作者：前后端雜貨鋪

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)小球點擊發(fā)射動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天花了兩個小時使用jQuery寫了一個小動畫游戲，如下圖所示，通過鼠標(biāo)點擊，發(fā)射球。

代碼：

<!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>

圖片素材：