JS豌豆射手实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				position: absolute;
			}
			span{
				display: block;
				width: 25px;
				height: 25px;
				border-radius: 50%;
				background-image: radial-gradient(rgb(0,255,100),green);
				position: absolute;
			}
		</style>
	</head>
	<body>
		<img src="img/wandou.gif"/>
		<script type="text/javascript">
			var oBox = document.getElementsByTagName("img")[0];
			function bean(){
				//创建豆子span元素，并添加到body中
				var oSpan = document.createElement("span");
				document.body.appendChild(oSpan);
				//豆子原始左边距=豌豆的左外边距+豌豆射手宽度（高度一样）
				oSpan.style.left = oBox.offsetLeft+oBox.offsetWidth+"px";
				oSpan.style.top = oBox.offsetTop+"px";
				//豆子移动时的左边距
				var moveWay = oBox.offsetLeft+oBox.offsetWidth;
				var timer = setInterval(function(){
					moveWay++;
					oSpan.style.left = moveWay+"px";
					//设置豆子左边距大于1000时消失，不在移动
					if(parseInt(oSpan.style.left)>1000){
						document.body.removeChild(oSpan);
						/*oSpan.style.display = "none";*/
						clearInterval(timer);
					}
				},1);			
			}			
			
			var timer2 = "";
			oBox.onmousedown = function(e){
				//鼠标按下时清除计时器效果，防止计时器叠加豆子速度改变
				clearInterval(timer2);
				var evt = e || event;
				//一开始鼠标距离豌豆射手的左侧和上侧距离
				var _left = evt.offsetX;
				var _top = evt.offsetY;
				document.onmousemove = function(e){
					var evt = e || event;
					//获取移动时鼠标距离可视区域左边距和上边距并减去一开始鼠标距离方块的左边距和上边距，得出豌豆射手距离可视区域的左边的上边距离即定位的left和top值
					var x = evt.clientX - _left;
					var y = evt.clientY- _top;
					oBox.style.left = x + "px";
					oBox.style.top = y + "px";
					return false;
				}
				document.onmouseup = function(){
					//鼠标抬起后每0.5秒执行一次函数bean
					timer2 = setInterval(bean ,500);
					document.onmouseup = null;
					document.onmousemove = null;
				}
			}
		</scri
猜你喜欢
