jQuery小球点击发射动画

最新推荐文章于 2022-10-06 17:38:34 发布

前后端杂货铺

最新推荐文章于 2022-10-06 17:38:34 发布

阅读量1.9k

点赞数

文章标签： css3 jquery javascript

本文链接：https://blog.csdn.net/qq_36604863/article/details/122474462

版权

今天花了两个小时使用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>

图片素材：
在这里插入图片描述

感兴趣的的小伙伴可以去试试。。。