原生js实现推箱子代码和思路

小鱼儿 2024-04-17 23:15 113阅读 0赞

一 思路  
1.获取img图片  
2.创建map-10x10(必须将两个个图创好)(方便构建对象来使用)  
创建map的时候要返回人物的对象  
插入元素的时候将地图利用成二维数组  
并将人物的位置封装成对象  
copy节点 直接创造节点 或者声明创造节点的函数（）//第一种占内存 第二种占运存  
\***添加任务旋转的时候回在map函数中加对象**  
3.获取键盘上的值  
将键盘上的值封装起来转换成一个方向 ，再通过方向判断人物和盒子的去留  
***在调用函数前面***  
4.分析推箱子的步骤  
大体如下几步：  
1.人推空白  
2.人进终点  
3.人出终点  
4.人在空白推箱子，箱子进空白；  
5.人在空白推箱子，箱子进终点；  
6.人在终点推箱子，箱子在终点进空白；  
7.人在终点推箱子，箱子在空白进空白；  
8.人在终点推箱子，箱子在终点推终点；  
9.人在空白推箱子，箱子在空白推终点  
…  
（此方法不用判断是否撞墙）；  
5.设置定时器 检测事件随机事件的触发（箱子全部在终点）  
定时器进行跳关  
和通关事件;  
6.添加鼠标点击的按钮功能  
1.获取元素  
2.绑定事件  
3.给每个元素弄方向  
4.调用函数（将move函数放进去）；  
7.添加跳关功能  
1.获取元素  
2.绑定事件  
3.进行调用函数（将deepclone的初始数组copy进去);  
8.添加上一步功能  
1.获取元素  
2.绑定事件  
3.进行调用函数（将deepclone的上一步函数放到move前，并在执行此函数的时候调用函数）

\****封装功能***可以方便后面的代码和功能的实现  
**html 代码**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>推箱子</title>
    		<link rel="stylesheet" href="css/tuixiangzi.css" />
    		<script src="js/mapxinxi.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		
    		<div class="center">
    			
    			<div class="map">
    			</div>
    			
    			<div class="control">
    				<div>
    					请选择第<input type="text"  class="select" style="width: 100px;">关 <input type="button" id="btns" value="确定" />
    				</div>
    				<div class="fangxiang">
    					<a href="#"><img src="" class="touming"/></a>
    					<a href="#" class="cf"><img src="img/up.png" ></a>
    					<a href="#" ><img src="" class="touming"/></a>
    					<a href="#" class="cf"><img src="img/left.png"></a>
    					<a href="#" class="cf"><img src="img/down.png"></a>
    					<a href="#" class="cf"><img src="img/right.png"></a>
    				</div>
    				<a href="#" class="replay"><img src="img/replay.png"></a>
    				<a href="#" class="prevstep"><img src="img/backStep.png"/></a>
    			</div>
    			
    		</div>
    		<script src="js/map.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/other.js" type="text/javascript" charset="utf-8"></script>
    	</body>
    </html>

**css样式**

*{
    	margin: 0px;
    	padding: 0px;
    }
    body{
    	background-color: rgba(180,180,180,0.5);
    }
    ul,li{
    	list-style: none;
    }
    a{
    	text-align: center;
    }
    .center{
    	width: 800px;
    	height: 520px;
    	margin: 30px auto;
    	background-color: blue;
    	position: relative;
    }
    .map{
    	width: 500px;
    	height: 500px;
    	background-image: url(../img/ground.png);
    	left: 0;
    	top: 0;
    	border: 10px solid black;
    }
    /*地图模块结束*/
    
    .control{
    	position: absolute;
    	width: 280px;
    	height: 520px;
    	background-color: mistyrose;
    	left: 520px;
    	top: 0px;
    }
    .control .fangxiang{
    	width: 100%;
    	height: 180px;
    	margin-top: 100px;
    }
    #up{
    	display: block;
    	width: 100%;
    	height: 80px;
    }
    .control img{
    	/*margin: -1px;*/
    	width: 80px;
    	height: 80px;
    	border: none;
    	/*opacity: 0;*/
    }
    .touming{
    	opacity: 0;
    }
    .up{
    	transform:rotate(90deg);
    }
    .right{
    	transform: rotateY(180deg);
    }
    .down{
    	transform: rotate(-90deg);
    }

**地图js信息模块**

var mapobj={
    	map0:[
    	[0,0,0,0,0,0,0,0,0,0],
    	[0,0,0,3,3,3,3,3,0,0],
    	[0,3,3,3,0,0,0,0,3,0],
    	[3,3,1,0,4,3,3,0,3,3],
    	[3,1,1,4,0,4,0,0,5,3],
    	[3,1,1,0,4,0,4,0,3,3],
    	[3,3,3,3,3,3,0,0,3,0],
    	[0,0,0,0,0,3,3,3,3,0],
    	[0,0,0,0,0,0,0,0,0,0],
    	[0,0,0,0,0,0,0,0,0,0]
    ],
    	map1:[
    	[0,0,0,0,0,0,0,0,0,0],
    	[0,0,0,3,3,3,0,0,0,0],
    	[0,0,0,3,1,3,0,0,0,0],
    	[0,0,0,3,0,3,3,3,3,0],
    	[0,3,3,3,4,0,4,1,3,0],
    	[0,3,1,0,4,5,3,3,3,0],
    	[0,3,3,3,3,4,3,0,0,0],
    	[0,0,0,0,3,1,3,0,0,0],
    	[0,0,0,0,3,3,3,0,0,0],
    	[0,0,0,0,0,0,0,0,0,0]
    ],
    	map2:[
    	[0,0,0,0,0,0,0,0,0,0],
    	[0,0,3,3,3,3,3,3,3,0],
    	[0,0,3,0,0,1,1,14,3,0],
    	[0,0,3,0,0,0,3,3,3,3],
    	[0,3,3,3,0,0,0,0,0,3],
    	[0,3,0,0,0,3,4,3,0,3],
    	[0,3,0,5,4,3,0,0,0,3],
    	[0,3,0,0,0,3,3,3,3,3],
    	[0,3,3,3,3,3,0,0,0,0],
    	[0,0,0,0,0,0,0,0,0,0]
    	],
    	map3:[
    	[0,0,0,0,0,0,0,0,0,0],
    	[0,0,0,0,3,3,3,3,0,0],
    	[0,0,3,3,3,0,5,3,0,0],
    	[0,0,3,0,0,4,0,3,0,0],
    	[0,3,3,0,3,0,3,3,3,0],
    	[0,3,0,0,3,0,3,1,3,0],
    	[0,3,0,3,0,0,4,1,3,0],
    	[0,3,0,4,0,0,0,1,3,0],
    	[0,3,3,3,3,3,3,3,3,0],
    	[0,0,0,0,0,0,0,0,0,0]
    	],
    	map4:[
    	[0,0,3,3,3,3,0,0,0,0],
    	[0,0,0,3,0,0,3,3,3,0],
    	[0,0,3,3,0,4,0,0,3,0],
    	[0,0,3,0,0,0,4,0,3,0],
    	[0,0,3,0,3,0,0,0,3,0],
    	[0,0,3,0,3,4,14,14,3,0],
    	[0,0,3,0,3,0,1,1,3,0],
    	[0,0,3,0,4,5,1,1,3,0],
    	[0,0,3,3,3,3,3,3,3,0],
    	[0,0,0,0,0,0,0,0,0,0]
    	]
    }

**创建地图模块**

//地图数据    0代表不可到达的路径   1代表要被推到的地方 2代表普通路径 3代表墙  4箱子，5人物，  14终点被推到的地方   15人和被推到的地方重叠
    var dir=null;
    var prevstep1=document.getElementsByClassName("prevstep")[0];
    var fangxiang=document.getElementsByClassName("cf");//获取方向键
    var replay=document.getElementsByClassName("replay")[0];//获取刷新键
    var allMap=Object.getOwnPropertyNames(mapobj);//获取所有地图的key值或者索引值；
    var btns=document.getElementById("btns");
    var startIndex=0;//定义地图的初始下标位置
    var map1=mapobj.map0;//初始地图
    var maxMap=document.getElementsByClassName("map")[0];//获取地图的div
    var mand=creatMap(map1);//将人物的位置从地图中拿出来
    var jumNum=0;
    var abjcopy={};//初始数组数据
    var prevstep={};//上一步的数组
    jumpG();
    deepClone(mapobj,abjcopy);
    var allMap2=Object.getOwnPropertyNames(abjcopy);//获取地图二的索引
    //console.log(abjcopy);
    function jumpG(){
    //	console.log(allMap);//Array(5) [ "map1", "map2", "map3", "map4", "map5" ]
        var num=0; 
    	for (var i=0;i<map1.length;i++) {
    		for (var j=0;j<map1[i].length;j++) {
    			if (map1[i][j]==1) {
    				num++;
    			}
    			if (map1[i][j]==4) {
    				num++;
    			}
    		}
    	}
    		if (num==0) {
    			console.log(num);
    			map1=mapobj[allMap[++startIndex]]
    			if(startIndex>allMap.length){
    				alert("通关成功");
    			}
    			mand=creatMap(map1);
    			console.log(map1);
    		}
    		
    		
    		var time=setTimeout('jumpG()',500);
    }
    function creatMap(map1){
    	   maxMap.innerHTML="";//清空地图    
    	//console.log(qiang);//<img src="img/wall.png" style="width: 50px; height: 50px; position: absolute;">
    	var box=document.createElement("img");
    		box.src="img/box.png";
    		box.style.width=50+"px";
    		box.style.height=50+"px";
    		box.style.position="absolute";//创建箱子
    	var man=document.createElement("img");
    		man.src="img/man.png";
    		man.style.width=50+"px";
    		man.style.height=50+"px";
    		man.style.position="absolute";
    			if(dir=="up"){
    		man.setAttribute("class","up");
    //		mand.className="up";
    	}else if(dir=="right")
    	{
    		man.className="right";
    	}
    	else if (dir=="down") {
    		man.className="down";
    	}
    	else{
    		man.className=""
    	}
    	var fx=document.createElement("img");
    		fx.src="img/boxArrival.png";
    		fx.style.width=50+"px";
    		fx.style.height=50+"px";
    		fx.style.position="absolute";	
    	var fr=document.createElement("img");
    		fr.src="img/mandian.png";
    		fr.style.width=50+"px";
    		fr.style.height=50+"px";
    		fr.style.position="absolute";
    	for(var i=0;i<map1.length;i++){
    //		console.log(map1[i]);//Array(10) [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
    		for(var j=0;j<map1[i].length;j++){
    //			console.log(map1[i][j]);//每行的数据
    				switch (map1[i][j]){
    					case 1:	var finall=document.createElement("img");
    								finall.src="img/terminal.png";
    								finall.style.width=50+"px";
    								finall.style.height=50+"px";
    								finall.style.position="absolute";//创建终点
    								finall.style.left=j*50+10+"px";
    								finall.style.top=i*50+10+"px";
    								maxMap.appendChild(finall);
    						break;
    					case 2:
    						break;
    					case 3:var qiang=document.createElement("img");
    							qiang.src="img/wall.png"
    							qiang.style.width=50+"px";
    							qiang.style.height=50+"px";
    							qiang.style.position="absolute";//创建墙					
    							qiang.style.left=j*50+10+"px";
    							qiang.style.top=i*50+10+"px";
    							maxMap.appendChild(qiang);
    						break;
    					case 4:var s=box.cloneNode();					
    							s.style.left=j*50+10+"px";
    							s.style.top=i*50+10+"px";
    							maxMap.appendChild(s);
    						break;
    					case 5:	
    							man.style.left=j*50+10+"px";
    							man.style.top=i*50+10+"px";
    							maxMap.appendChild(man);//需要用来返回位置
    							man.addr={//将位置对象设置为man的属性
    								y:i,
    								x:j
    							}
    						break;
    					case 14:var s=fx.cloneNode();					
    							s.style.left=j*50+10+"px";
    							s.style.top=i*50+10+"px";
    							maxMap.appendChild(s);
    						break;
    					case 15:var s=fr.cloneNode();					
    							s.style.left=j*50+10+"px";
    							s.style.top=i*50+10+"px";
    							maxMap.appendChild(s);
    						break;
    					default:
    						break;
    				}
    		}
    	}
    	return man;
    }
    
    
    function deepClone(a, b) {  //deepcopy复制数组  
      var obj = b || {};    
      for (var i in a) {        
        if (typeof a[i] === 'object') {
          obj[i] = (a[i].constructor === Array) ? [] : {}; //判断是不是数组         
          arguments.callee(a[i], obj[i]);//执行递归
        } else {
          obj[i] = a[i];
        }
      }    
      return obj;
    }
    //function(){
    //	
    //}

**人物移动模块**

**按钮功能控制模块**

素材请私聊 博主 或者自行寻找  
联系QQ918922703