【项目】吃豆大作战

最新推荐文章于 2022-12-30 16:02:55 发布

希冀miracle

最新推荐文章于 2022-12-30 16:02:55 发布

阅读量186

点赞数

分类专栏： web前端相关

本文链接：https://blog.csdn.net/weixin_39843945/article/details/89929491

版权

web前端相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.图片展示
在这里插入图片描述

2.HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>吃豆大作战</title>
<link rel="stylesheet" href="CSS/eat.css">
</head>
<body>
	<div id="world">
		<!-- <div class="wall"></div>
		<div class="wall"></div> 
		<div class="wall"></div>
		<div class="wall"></div>
		<div class="wall"></div>
		<br/>
		<div class="wall"></div>
		<div class="coin"></div>
		<div class="pacman"></div>
		<div class="ground"></div>
		<div class="wall"></div>
		<br/>
		<div class="wall"></div>
		<div class="wall"></div>
		<div class="wall"></div>
		<div class="wall"></div>
		<div class="wall"></div> -->
	</div>
</body>
<script src="JS/eat.js"></script>
</html>

3.CSS

body{
		background-color: black;
		
}
#world{
		position: absolute;
		top: 50%;
		left: 50%;
		/* width: 400px;
		height: 400px;
		background-color: white; */
		/* margin-left: -50px;
		margin-top: -50px; 知道宽高*/
		/* 不知道宽高 */
		transform:translateX(-50%) translateY(-50%);
		font-size: 0;
}
#world >div{	
		width: 50px;
		height: 50px;
		display: inline-block;
}
.wall{
		background-image:url("../images/wall.png");
		
}
.coin{
		background-image:url("../images/coin.png");
}
.pacman{
		background-image:url("../images/pacman.png");
}
.ground{
		background-image:url("../images/bg.png");
	}
	.pacman.left{	
		background-image:url("../images/pacman-left.png");
	}
	.pacman.up{	
		background-image:url("../images/pacman-up.png");
	}
	.pacman.down{	
		background-image:url("../images/pacman-down.png");
	}

4.JS


		//1. <div class="wall"></div>
		//2.<div class="coin"></div>
		//3.<div class="ground"></div>
		//4.<div class="pacman"></div>
		var map=[
			[1,1,1,1,1,1,1,1,1,1,1,1,1],
			[1,2,2,2,2,2,1,2,2,2,2,2,1],
			[1,2,1,1,1,2,1,2,1,1,1,2,1],
			[1,2,1,2,2,2,2,2,2,2,1,2,1],
			[1,2,2,2,1,1,4,1,1,2,2,2,1],
			[1,2,1,2,2,2,2,2,2,2,1,2,1],
			[1,2,1,1,2,2,1,2,2,1,1,2,1],
			[1,2,2,2,2,2,1,2,2,2,2,2,1],
			[1,1,1,1,1,1,1,1,1,1,1,1,1]
		];
		//记录初始pacman位置
		var pacman={
			x:4,
			y:6,
			dir:"up"
		};
		
		
		var world=document.getElementById("world");
		
		function draw(){
			var html="";
			for(var i=0;i<map.length;i++){
				for(var j=0;j<map[i].length;j++){
					if(map[i][j]===1){
						html+='<div class="wall"></div>';
					}else if(map[i][j]===2){
						html+='<div class="coin"></div>';
					}else if(map[i][j]===3){
						html+='<div class="ground"></div>';
					}
					else if(map[i][j]===4){	
						html+='<div class="pacman '+pacman.dir+'"></div>';
					}
				}
				html+="<br/>";
			}
			world.innerHTML=html;
		}
		
		draw();
		
		//吃豆人移动
		document.onkeydown=function(event){
			event=event||window.event;
			
			//向右移动
			if(event.code==="ArrowRight"){
				pacman.dir="right";
				if(map[pacman.x][pacman.y+1]!==1){
					
					//吃豆人所在的div变成地板
					map[pacman.x][pacman.y]=3;
					
					//吃豆人向右移动一格
					//吃豆人纵坐标+1
					pacman.y=pacman.y+1;
					
					//变成吃豆人
					map[pacman.x][pacman.y]=4;
				}
			}
			
			//向左移动
			else if(event.code==="ArrowLeft"){
				pacman.dir="left";
				if(map[pacman.x][pacman.y-1]!==1){
						
						
						map[pacman.x][pacman.y]=3;
						
						pacman.y=pacman.y-1;
						
						
						map[pacman.x][pacman.y]=4;
					}

			}
			//向上移动
			else if(event.code==="ArrowUp"){
				pacman.dir="up";
				if(map[pacman.x-1][pacman.y]!==1){
					pacman.dir="up";
				
					map[pacman.x][pacman.y]=3;
					
					pacman.x=pacman.x-1;
					
					//变成吃豆人
					map[pacman.x][pacman.y]=4;
				}
			}
			//向下移动
			else if(event.code==="ArrowDown"){
				pacman.dir="down";
				if(map[pacman.x+1][pacman.y]!==1){
						
						map[pacman.x][pacman.y]=3;
						
						
						pacman.x=pacman.x+1;
						
						//变成吃豆人
						map[pacman.x][pacman.y]=4;
						}
				}
			draw();	
		};

希冀miracle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【项目】吃豆大作战

1.图片展示2.HTML<!DOCTYPE html><html><head><meta charset="UTF-8"><title>吃豆大作战</title><link rel="stylesheet" href="CSS/eat.css"></head><body>...
复制链接

扫一扫

专栏目录