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

魁首哥

作者

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

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

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

代码：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style>#main{width:500px;height:650px;border:3pxsolid#efefef;margin:30pxauto;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><divid="main"><divid="fireSpace"></div><imgsrc="./gun.png"id="gun"></div></body></html><scriptsrc="./jquery.js"></script><script>letinitX=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;}elseif(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);}elseif(isLeft0&&!isLeft){rdg=180-initDeg-thenDeg;}elseif(isLeft0&&isLeft){rdg=(thenDeg-initDeg)}elseif(!isLeft0&&!isLeft){rdg=(initDeg-thenDeg)}document.getElementById("gun").style.transform="translate(-50%,0)rotate("+rdg+"deg)";x=nx;y=ny;isLeft0=isLeft;}letfireX,fireY,iX=0,iY=0document.getElementById("fireSpace").onclick=function(e){fireX=e.offsetX;fireY=e.offsetY;letboll=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>

图片素材：