jQuery實現(xiàn)小球點擊發(fā)射動畫
更新時間：2022年01月14日 13:28:31 作者：前后端雜貨鋪
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)小球點擊發(fā)射動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天花了兩個小時使用jQuery寫了一個小動畫游戲，如下圖所示，通過鼠標點擊，發(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>圖片素材：
感興趣的的小伙伴可以去試試。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了JQuery日期插件datepicker的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
Jquery uploadify圖片上傳插件無法上傳的解決方法
很多的朋友都有遇到Jquery uploadify圖片上傳插件無法上傳的情況，下面為大家介紹下不錯的解決方法，感興趣的朋友可以參考下2013-12-12
jQuery EasyUI API 中文文檔 可調整尺寸，學習jQuery EasyUI的朋友可以參考下。2011-09-09
phpcms的地區(qū)級聯(lián)菜單，感覺寫的挺有意思于是自己也實現(xiàn)了個，感興趣的各位路過的可以參考下哈，希望本例可以幫助到你2013-03-03
基于jQuery實現(xiàn)列表循環(huán)滾動小技巧(超簡單)
只要能夠不停地把第一個item移動到末尾，其余的自會往上填補空缺，填補的過程用動畫放慢些，就能有不斷滾動的視覺效果了，這種效果基于jquery怎么實現(xiàn)呢？下面小編給大家?guī)砹薺Query列表循環(huán)滾動效果的實現(xiàn)思路代碼，一起看看吧2021-08-08
jQuery 中$(this).index與$.each的使用指南
這篇文章主要介紹了jQuery 中$(this).index與$.each的使用方法，以及使用環(huán)境，有需要的小伙伴自己參考下吧2014-11-11
jQuery實現(xiàn)的背景動態(tài)變化導航菜單效果
這篇文章主要介紹了jQuery實現(xiàn)的背景動態(tài)變化導航菜單效果,涉及jquery頁面元素背景動態(tài)變換的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
JQuery制作的選項卡改進版，已經(jīng)有人將這個效果改進下封裝成一個完整的方法。2010-04-04
這篇文章主要分享jQuery實現(xiàn)地圖map懸停顯示省市代碼,需要的朋友可以參考下2015-08-08
jquery插件uploadify多圖上傳功能實現(xiàn)代碼
這篇文章主要為大家詳細介紹了jquery插件uploadify多圖上傳功能實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08