jQuery實(shí)現(xiàn)小球點(diǎn)擊發(fā)射動(dòng)畫(huà)
更新時(shí)間：2022年01月14日 13:28:31 作者：前后端雜貨鋪
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)小球點(diǎn)擊發(fā)射動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
今天花了兩個(gè)小時(shí)使用jQuery寫(xiě)了一個(gè)小動(dòng)畫(huà)游戲，如下圖所示，通過(guò)鼠標(biāo)點(diǎn)擊，發(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>圖片素材：
感興趣的的小伙伴可以去試試。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery編程動(dòng)畫(huà)的基本方法示例詳解
- 一篇文章帶你了解jQuery動(dòng)畫(huà)
- JQuery實(shí)現(xiàn)隱藏和顯示動(dòng)畫(huà)效果
- jQuery實(shí)現(xiàn)帶展開(kāi)動(dòng)畫(huà)的導(dǎo)航欄效果
- jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫(huà)
- jQuery框架實(shí)現(xiàn)元素顯示及隱藏三種動(dòng)畫(huà)方式
- jQuery實(shí)現(xiàn)移動(dòng)端下拉展現(xiàn)新的內(nèi)容回彈動(dòng)畫(huà)
- jQuery常見(jiàn)動(dòng)畫(huà)效果實(shí)現(xiàn)介紹
相關(guān)文章
基于Jquery的仿照f(shuō)lash放大圖片效果代碼
基于Jquery的仿照f(shuō)lash放大圖片效果代碼，需要的朋友可以參考下。2011-03-03
好的代碼會(huì)帶來(lái)速度的提升，快速渲染和響應(yīng)意味著更好的用戶體驗(yàn)。本文主要總結(jié)了如何高效的編寫(xiě)jQuery代碼的技巧，對(duì)提升你的jQuery和javascript代碼具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
jquery+正則實(shí)現(xiàn)統(tǒng)一的表單驗(yàn)證
表單驗(yàn)證一直很繁瑣，特別是大點(diǎn)的表單，如果每個(gè)input都去單獨(dú)寫(xiě)驗(yàn)證簡(jiǎn)直要寫(xiě)死人，最近寫(xiě)了一小段js統(tǒng)一的驗(yàn)證表單內(nèi)容是否正確。需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JQuery包裹DOM節(jié)點(diǎn)的方法,實(shí)例分析了wrap與wrapAll方法實(shí)現(xiàn)包裹DOM節(jié)點(diǎn)的技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Jquery中Event對(duì)象屬性的操作方法的總結(jié)，非常的詳細(xì)，是篇十分不錯(cuò)的文章，這里推薦給大家。2015-02-02
通過(guò)XMLHTTPRquest請(qǐng)求不同域上的數(shù)據(jù)，原來(lái)js跨域訪問(wèn)是后臺(tái)有個(gè)處理路徑“/test”的函數(shù)。下面給大家介紹jQuery跨域問(wèn)題解決方案，有需要的小伙伴可以參考下2015-08-08
jquery是javascript的類(lèi)庫(kù)，提供了大量的javascript的類(lèi)庫(kù)和API，方便javascript開(kāi)發(fā)。2010-04-04
全屏淡入淡出簡(jiǎn)潔banner，異步圖片文字效果切換圖片特效,需要的朋友可以參考下2014-04-04
JQ選擇器_選擇同類(lèi)元素的第N個(gè)子元素的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQ選擇器_選擇同類(lèi)元素的第N個(gè)子元素的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09