ajax之移动小英雄

最新推荐文章于 2024-10-01 20:12:28 发布

FJSAY

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量186

点赞数

分类专栏： Ajax 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_15715889/article/details/125458956

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

源码如下

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>移动小英雄</title>

		<style type="text/css">
			#map {
				width: 512px;
				height: 480px;
				background-image: url(img/background.png);
			}
			
			#hero {
				position: absolute;
				top: 120px;
				left: 120px;
			}
			#score{
				position: absolute;
				top: 90px;
				left: 120px;
				color: red;
			}
			#monster {
				position: absolute;
				top: 120px;
				left: 220px;
			}
			
			#timecounter{
				position: absolute;
				top: 90px;
				left: 220px;
				color: gold;
			}
		</style>

		<script type="text/javascript">
			//定义速度的变量
			var speed = 10;
			//分数
			var score = 0;
			
			//时间
			var second = 10;
			
			window.onload = function(){
				starCount();
			}
			
			//DOM0级别绑定键盘事件
			window.onkeydown = function(event) {

				moveHero(event);
				
				
			}
			
			
			function timecounter(){
				
				second--;
				
				console.log("second="+second);
				let objCounter= document.getElementById("timecounter");
				if(objCounter){					
					objCounter.innerHTML = second+"秒";
				}
				
				//游戏结束
		 		if(second<=0){
		 			alert("游戏结束");
		 			
		 			second = 10;
		 			score=0;
		 			
		 		}
				
				
				
			}
			
			function starCount(){
				setInterval("timecounter()",1000);
			}
			
			
			
			//event ：事件对象   --》 键盘的值： event.keyCode
			function moveHero(event) {
				
				
				
				let objHero = document.getElementById("hero");
				let objScore = document.getElementById("score");
				
				
				
				
				let objMonster = document.getElementById("monster");
				
				let objMapDiv = document.getElementById("map");
				//console.log(event.keyCode);
				
				//console.log(score);
				
				objScore.innerHTML = score+"分";
				
				
				//获取当前英雄所在的位置
				let heroLeft = objHero.offsetLeft;//120

				let heroTop = objHero.offsetTop;
				
				
				//获取当前怪兽所在的位置
				let monsterLeft = objMonster.offsetLeft;//120

				let monsterTop = objMonster.offsetTop;
				
				
				//获取地图的宽度
				let mapWidth = document.getElementById("map").clientWidth;
				let mapHeight = document.getElementById("map").clientHeight;
				
				//console.log(second);
				
				//游戏结束
		 		if(second<=0){
		 			alert("游戏结束");
		 			second = 10;
		 			score=0;
		 			//return;
		 		}else{
		 			
				
				//碰撞

				/*
				 ←:37
				 →：39
				 ↑：38
				 ↓：40
				  */
			 	//碰撞
			 	//if(heroLeft >=monsterLeft-32){
		 		if(Math.abs(monsterLeft-heroLeft)<=32 && Math.abs(monsterTop-heroTop)<=32 ){
		 			
		 			score++;
		 			
		 			
					objScore.innerHTML = score+"分";
		 			
		 			//alert("碰到了");
		 			//console.log('碰到了');
		 			//小怪兽位置要随机出现
					//38~460之间
					let leftRandom = Math.random()* 422+38;
					//30~450之间
					let topRandom = Math.random()* 420+30;
					
					let monsterImg =document.getElementById("monsterimg");
					
					let objCounter = document.getElementById("timecounter");
					
					if(monsterImg){
						//移除小怪兽
		 				objMonster.removeChild(monsterImg);
		 				objMapDiv.removeChild(objCounter);
		 				
		 				second = 10;
					}

		 			
		 			//在随机的位置生成
		 			//生成小怪兽
		 			let newMonster = document.createElement("img");
		 			newMonster.src='img/monster.png';

		 			newMonster.id="monsterimg";
		 			
		 			//计时器
		 			let newCounter =document.createElement("div");
		 			newCounter.innerHTML=second+"秒";
		 			
		 			newCounter.id="timecounter";
	
		 				//坐标随机
		 			objMonster.style.left = leftRandom+"px";
		 			objMonster.style.top = topRandom+"px";
		 			
		 			newCounter.style.left=leftRandom+"px";
		 			newCounter.style.top=(topRandom-30)+"px";
		 			
		 			
		 			objMonster.appendChild(newMonster);
		 			objMapDiv.appendChild(newCounter);
		 		
		 			
		 		}
		 		
		 		
		 		
		 		
		 		
		 		
			
				 switch (event.keyCode){
				 	case 39: //往右
	
				 	
				 		heroLeft+=speed;
				 		
				 		if(heroLeft>=mapWidth-46){
				 			heroLeft=mapWidth-46;
				 			//heroLeft=38;
				 		}
				 		
				 		
				 		objHero.style.left = heroLeft+"px";
				 		objScore.style.left = heroLeft+"px";
				 		
				 		break;
				 		
					case 37: //往左
					
						
					
				 		heroLeft-=speed;
				 		
				 		
				 		if(heroLeft<=38){
				 			heroLeft=38;
				 		}
				 		
				 		objHero.style.left = heroLeft+"px";
				 		objScore.style.left = heroLeft+"px";
				 		
				 		break;				 		
				 	
				 	case 38: //往上
				 		heroTop-=speed;
				 		
				 		
				 		if(heroTop<=8){
				 			heroTop=8;
				 		}
				 		
				 		objHero.style.top = heroTop+"px";
				 		objScore.style.top = (heroTop-30)+"px";
				 		break;		
				 	case 40: //往下
				 		heroTop+=speed;

				 		if(heroTop>=mapHeight-60){
				 			heroTop=mapHeight-60;
				 		}
				 		
				 		objHero.style.top = heroTop+"px";
				 		objScore.style.top = (heroTop-30)+"px";
				 		break;		
				 	
				 	
				 	default:
				 		break;
				 }
		 		}
				
				
				 

			}
		</script>
	</head>

	<body>

		<div id="map">
			<div id="timecounter">10秒</div>
			<div id="monster">
				<img id="monsterimg" src="img/monster.png" />
			</div>
			
			<div id="score">0分</div>
			<div id="hero">
				<img src="img/hero.png" />
			</div>
			
			
		</div>
		
		

	</body>

</html>