简版的植物大战僵尸

最新推荐文章于 2020-08-04 18:40:12 发布

iuMeng

最新推荐文章于 2020-08-04 18:40:12 发布

阅读量432

点赞数

分类专栏：代码知识

本文链接：https://blog.csdn.net/qq_44681288/article/details/89577038

版权

代码知识专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,img{
				margin:0;
				padding:0;
			}
			img{
				width:70px;
				height:70px;
				position: absolute;
			}
			p{
				width:20px;
				height:20px;
				background: green;
				border-radius: 50%;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<img src="imgs/peas.gif" />
		<script type="text/javascript">
			var oImg =document.getElementsByTagName("img")[0];
			setInterval(function(){
				var oP = document.createElement("p");
				document.body.appendChild(oP);
				oP.style.left = oImg.offsetLeft+oImg.offsetWidth+"px";
				oP.style.top = oImg.offsetTop-5+"px";
				var count =  oImg.offsetLeft+oImg.offsetWidth;
				var timer = setInterval(function(){
					count++;
					oP.style.left =count+"px";
					if(parseInt(oP.style.left)>1000){
						oP.style.display = "none";
						clearInterval(timer);
					}
				},1);
			},2000);
			
			
			oImg.onmousedown = function(e){
				var evt = e || event;
				var x= evt.offsetX;
           		var y = evt.offsetY;
				document.onmousemove=function(e){
					var evt = e||window.event;
					var _x = evt.clientX-x;
					var _y =evt.clientY-y;
					oImg.style.left = _x+"px";
					oImg.style.top = _y+"px";
					return false;
				}
				document.onmouseup = function(){
					document.onmousemove = null;
					document.onmouseup = null;
				}
			}		
		</script>
	</body>
</html>

iuMeng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简版的植物大战僵尸

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,img{ margin:0; padding:0; } img{ ...
复制链接

扫一扫