乌龟捉鸡

最新推荐文章于 2021-05-24 22:59:21 发布

蟹道人

最新推荐文章于 2021-05-24 22:59:21 发布

阅读量660

点赞数

分类专栏： javascript基础部分学习文章标签： javascript

本文链接：https://blog.csdn.net/csdt_csdt/article/details/18664401

版权

javascript基础部分学习专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<script language = "javascript" type = "text/javascript">
			//响应用户点击按钮，或者是按下键盘
			function move(eobj){
				//得到乌龟
				var wugui_height = 56;
				var wugui_width = 79;
				//得到公鸡
				var cock_height = 61;
				var cock_width = 64;
				
				var wugui = document.getElementById("tortoise");
				  //响应键盘 window.event可以判断用户是通过按键盘来控制乌龟
				if(window.event){
					key = eobj.keyCode;
				}
				  //得到乌龟当前的top 和 left
				var wugui_top = wugui.style.top;
				var wugui_left = wugui.style.left;
				//window.alert(wugui_left);
					  //去掉px
				wugui_top = parseInt(wugui_top.substring(0,wugui_top.indexOf("p")));
				wugui_left = parseInt(wugui_left.substring(0,wugui_left.indexOf("p")));
					//得到cock的top 和 left
				var cock = document.getElementById("cock");
				var cock_top = cock.style.top;
				var cock_left = cock.style.left;
				
				cock_top = parseInt(cock_top.substr(0,cock_top.length-2));
			  cock_left = parseInt(cock_left.substr(0,cock_left.length-2)); 
				
				//得到用户点击按钮的value
				var val = eobj.value;
				if(val == "向下走" || key == 83){
					wugui.style.top = (wugui_top+10)+"px";
					wugui_top = wugui_top + 10;
				}else if(val == "向右走" || key == 68){
					wugui.style.left = (wugui_left+10)+"px";
					wugui_left = wugui_left + 10;
				}else if(val == "向左走" || key == 83){
					wugui.style.left = (wugui_left-10)+"px";
					wugui_left = wugui_left - 10;
				}else if(val == "向上走" || key == 87){
					wugui.style.top = (wugui_top-10)+"px";
					wugui_top = wugui_top - 10;
				}
				//判断是否相撞
				var y = Math.abs(cock_top - wugui_top);
				var x = Math.abs(cock_left - wugui_left);
				 //标记，用于记录是否有可能相撞
				var xx = 0;
				var yy = 0;
				//在纵向上
				if(wugui_top<cock_top){
					if(y<=wugui_height){
						yy = 1;
					}
				}else{
					if(y<=cock_height){
						yy = 1;
					}
				}
				//在横向上
				if(wugui_left<cock_left){
					if(x<=wugui_width){
						xx = 1;
					}
				}else{
					if(x<=cock_width){
						xx = 1;
					}
				}
				
				//判读是否相撞
				if(xx == 1 && yy == 1){	
					xx = 0;
					yy = 0;
					window.alert("已抓到！");
					//撞到后，让乌龟重新回到原来的位置
					wugui.style.top = 120 + "px";
					wugui.style.left = 100 + "px";
				}
			}
		</script>
	</head>
	<body onkeydown = "return move(event)">
		<table border = "1">
			<tr><td></td><td><input type = "button" value = "向上走" onclick = "move(this)"/></td><td></td></tr>	
			<tr><td><input type = "button" value = "向左走" onclick = "move(this)"/></td><td></td>
				<td><input type = "button" value = "向右走" onclick = "move(this)"/></td></tr>	
			<tr><td></td><td><input type = "button" value = "向下走" onclick = "move(this)"/></td><td></td></tr>	
		</table>
		<div id = "tortoise" style = "position:absolute;top:120px;left:100px">
			<img src = "tortoise.png" title = "乌龟"/>
		</div>
		<div id = "cock" style = "position:absolute;top:200px;left:200px">
			<img src = "cock.png" title = "公鸡"/>	
		</div>
	</body>	
</html>