原生js实现推箱子代码 和 思路
一 思路
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 代码
推箱子
请选择第关
![]()
![]()
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;iallMap.length){
alert("通关成功");
}
mand=creatMap(map1);
console.log(map1);
}
var time=setTimeout('jumpG()',500);
}
function creatMap(map1){
maxMap.innerHTML="";//清空地图
//console.log(qiang);//
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 人物移动模块
function move(keycode){
switch (keycode){
case 37:dir="left";
break;
case 38:dir="up";
break;
case 39:dir="right";
break;
case 40:dir="down";
break;
default:
break;
}
deepClone(mapobj,prevstep);//上一步的数组
finalBox(dir,mand,mand.addr);
moveBox(dir,mand,mand.addr);
moveNull(dir,mand,mand.addr);
movefinal(dir,mand,mand.addr);
}
function moveNull(code1,man,addr){//参数分别为 code 人物对象 和位置
// console.log(code1);//三个形参都能传进来
switch(code1){
case 'left':
if (map1[addr.y][addr.x-1]==0&&map1[addr.y][addr.x]==5){
man.addr={
y:addr.y,
x:addr.x-1
}
map1[addr.y][addr.x]=0;
map1[addr.y][addr.x-1]=5;
}
if (map1[addr.y][addr.x-1]==0&&map1[addr.y][addr.x]==15) {
man.addr={
y:addr.y,
x:addr.x-1
}
map1[addr.y][addr.x]=1;
map1[addr.y][addr.x-1]=5;
}
creatMap(map1);
break ;
case 'up':
if (map1[addr.y-1][addr.x]==0&&map1[addr.y][addr.x]==5) {
man.addr={
y:addr.y-1,
x:addr.x
}
map1[addr.y][addr.x]=0;
map1[addr.y-1][addr.x]=5;
creatMap(map1);
}
if (map1[addr.y-1][addr.x]==0&&map1[addr.y][addr.x]==15) {
man.addr={
y:addr.y-1,
x:addr.x
}
map1[addr.y][addr.x]=1;
map1[addr.y-1][addr.x]=5;
creatMap(map1);
}
break;
case 'right':
if (map1[addr.y][addr.x+1]==0&&map1[addr.y][addr.x]==5) {
man.addr={
y:addr.y,
x:addr.x+1
}
map1[addr.y][addr.x]=0;
map1[addr.y][addr.x+1]=5;
creatMap(map1);
}
if (map1[addr.y][addr.x+1]==0&&map1[addr.y][addr.x]==15) {
man.addr={
y:addr.y,
x:addr.x+1
}
map1[addr.y][addr.x]=1;
map1[addr.y][addr.x+1]=5;
creatMap(map1);
}
break;
case 'down' :
if (map1[addr.y+1][addr.x]==0&&map1[addr.y][addr.x]==5) {
man.addr={
y:addr.y+1,
x:addr.x
}
map1[addr.y][addr.x]=0;
map1[addr.y+1][addr.x]=5;
creatMap(map1);
}
if (map1[addr.y+1][addr.x]==0&&map1[addr.y][addr.x]==15) {
man.addr={
y:addr.y+1,
x:addr.x
}
map1[addr.y][addr.x]=1;
map1[addr.y+1][addr.x]=5;
creatMap(map1);
}
break;
}
}
function moveBox(code1,man,addr){//移动箱子
switch (code1){
case "left":if (map1[addr.y][addr.x-1]==4&&map1[addr.y][addr.x]==5&&map1[addr.y][addr.x-2]!=3){
if (map1[addr.y][addr.x-2]==0) {//当第二个是空的时候
man.addr={
y:addr.y,
x:addr.x-1
}
map1[addr.y][addr.x]=0;
map1[addr.y][addr.x-1]=5;
map1[addr.y][addr.x-2]=4;
creatMap(map1);
}
if (map1[addr.y][addr.x-2]==1&&map1[addr.y][addr.x-1]==4) {//推箱子进入终点
console.log(mand.addr);
man.addr={
y:addr.y,
x:addr.x-1
}
map1[addr.y][addr.x]=0;
map1[addr.y][addr.x-1]=5;
map1[addr.y][addr.x-2]=14;
creatMap(map1);
}
}
break;
case "up":if (map1[addr.y-1][addr.x]==4&&map1[addr.y][addr.x]==5&&map1[addr.y-2][addr.x]!=3){
if (map1[addr.y-2][addr.x]==0) {
man.addr={
y:addr.y-1,
x:addr.x
}
map1[addr.y][addr.x]=0;
map1[addr.y-1][addr.x]=5;
map1[addr.y-2][addr.x]=4;
creatMap(map1);
}
if (map1[addr.y-2][addr.x]==1&&map1[addr.y-1][addr.x]==4) {//推箱子进入终点
man.addr={
y:addr.y-1,
x:addr.x
}
map1[addr.y][addr.x]=0;
map1[addr.y-1][addr.x]=5;
map1[addr.y-2][addr.x]=14;
creatMap(map1);
}
}
break;
case "right":if (map1[addr.y][addr.x+1]==4&&map1[addr.y][addr.x]==5&&map1[addr.y][addr.x+2]!=3){
if (map1[addr.y][addr.x+2]==0) {
man.addr={
y:addr.y,
x:addr.x+1
}
map1[addr.y][addr.x]=0;
map1[addr.y][addr.x+1]=5;
map1[addr.y][addr.x+2]=4;
creatMap(map1);
}
if (map1[addr.y][addr.x+2]==1&&map1[addr.y][addr.x+1]==4) {//推箱子进入终点
man.addr={
y:addr.y,
x:addr.x+1
}
map1[addr.y][addr.x]=0;
map1[addr.y][addr.x+1]=5;
map1[addr.y][addr.x+2]=14;
creatMap(map1);
}
}
break;
case "down":if (map1[addr.y+1][addr.x]==4&&map1[addr.y][addr.x]==5&&map1[addr.y+2][addr.x]!=3){
if (map1[addr.y+2][addr.x]==0) {
man.addr={
y:addr.y+1,
x:addr.x
}
map1[addr.y][addr.x]=0;
map1[addr.y+1][addr.x]=5;
map1[addr.y+2][addr.x]=4;
creatMap(map1);
}
if (map1[addr.y+2][addr.x]==1&&map1[addr.y+1][addr.x]==4) {//推箱子进入终点
man.addr={
y:addr.y+1,
x:addr.x
}
map1[addr.y][addr.x]=0;
map1[addr.y+1][addr.x]=5;
map1[addr.y+2][addr.x]=14;
creatMap(map1);
}
}
break;
default:
break;
}
}
function movefinal(code1,man,addr){//人进终点，在终点移动
switch(code1){
case "left":
if (map1[addr.y][addr.x-1]==1&&map1[addr.y][addr.x]==5) {
man.addr={
y:addr.y,
x:addr.x-1
}
map1[addr.y][addr.x]=0;
map1[addr.y][addr.x-1]=15;
creatMap(map1);
}
if (map1[addr.y][addr.x-1]==1&&map1[addr.y][addr.x]==15) {
man.addr={
y:addr.y,
x:addr.x-1
}
map1[addr.y][addr.x]=1;
map1[addr.y][addr.x-1]=15;
creatMap(map1);
}
break;
case "up":
if (map1[addr.y-1][addr.x]==1&&map1[addr.y][addr.x]==5) {
man.addr={
y:addr.y-1,
x:addr.x
}
map1[addr.y][addr.x]=0;
map1[addr.y-1][addr.x]=15;
creatMap(map1);
}
if (map1[addr.y-1][addr.x]==1&&map1[addr.y][addr.x]==15) {
man.addr={
y:addr.y-1,
x:addr.x
}
map1[addr.y][addr.x]=1;
map1[addr.y-1][addr.x]=15;
creatMap(map1);
}
break;
case "right":
if (map1[addr.y][addr.x+1]==1&&map1[addr.y][addr.x]==5) {
man.addr={
y:addr.y,
x:addr.x+1
}
map1[addr.y][addr.x]=0;
map1[addr.y][addr.x+1]=15;
creatMap(map1);
}
if (map1[addr.y][addr.x+1]==1&&map1[addr.y][addr.x]==15) {
man.addr={
y:addr.y,
x:addr.x+1
}
map1[addr.y][addr.x]=1;
map1[addr.y][addr.x+1]=15;
creatMap(map1);
}
break;
case "down":
if (map1[addr.y+1][addr.x]==1&&map1[addr.y][addr.x]==5) {
man.addr={
y:addr.y+1,
x:addr.x
}
map1[addr.y][addr.x]=0;
map1[addr.y+1][addr.x]=15;
creatMap(map1);
}
if (map1[addr.y+1][addr.x]==1&&map1[addr.y][addr.x]==15) {
man.addr={
y:addr.y+1,
x:addr.x
}
map1[addr.y][addr.x]=1;
map1[addr.y+1][addr.x]=15;
creatMap(map1);
}
break;
default:
break;
}
}
function finalBox(code1,man,addr){
switch(code1){
case "left":
if (map1[addr.y][addr.x-1]==14&&map1[addr.y][addr.x-2]==1&&map1[addr.y][addr.x]==5&&map1[addr.y][addr.x-2]!=3){
man.addr={
y:addr.y,
x:addr.x-1
}
map1[addr.y][addr.x-1]=15;
map1[addr.y][addr.x-2]=14;
map1[addr.y][addr.x]=0;
creatMap(map1);
}
if (map1[addr.y][addr.x-1]==14&&map1[addr.y][addr.x-2]==0&&map1[addr.y][addr.x]==15&&map1[addr.y][addr.x-2]!=3){
man.addr={
y:addr.y,
x:addr.x-1
}
map1[addr.y][addr.x-1]=15;
map1[addr.y][addr.x-2]=4;
map1[addr.y][addr.x]=1;
creatMap(map1);
}
if (map1[addr.y][addr.x-1]==14&&map1[addr.y][addr.x-2]==1&&map1[addr.y][addr.x]==15&&map1[addr.y][addr.x-2]!=3){
man.addr={
y:addr.y,
x:addr.x-1
}
map1[addr.y][addr.x-1]=15;
map1[addr.y][addr.x-2]=14;
map1[addr.y][addr.x]=1;
creatMap(map1);
}
break;
case "up":
if (map1[addr.y-1][addr.x]==14&&map1[addr.y-2][addr.x]==1&&map1[addr.y][addr.x]==5&&map1[addr.y-2][addr.x]!=3){
man.addr={
y:addr.y-1,
x:addr.x
}
map1[addr.y-1][addr.x]=15;
map1[addr.y-2][addr.x]=14;
map1[addr.y][addr.x]=0;
creatMap(map1);
}
if (map1[addr.y-1][addr.x]==14&&map1[addr.y-2][addr.x]==0&&map1[addr.y][addr.x]==15&&map1[addr.y-2][addr.x]!=3){
man.addr={
y:addr.y-1,
x:addr.x
}
map1[addr.y-1][addr.x]=15;
map1[addr.y-2][addr.x]=4;
map1[addr.y][addr.x]=1;
creatMap(map1);
}
if (map1[addr.y-1][addr.x]==4&&map1[addr.y-2][addr.x]==0&&map1[addr.y][addr.x]==15&&map1[addr.y-2][addr.x]!=3){
man.addr={
y:addr.y-1,
x:addr.x
}
map1[addr.y-1][addr.x]=5;
map1[addr.y-2][addr.x]=4;
map1[addr.y][addr.x]=1;
creatMap(map1);
}
if (map1[addr.y-1][addr.x]==14&&map1[addr.y-2][addr.x]==1&&map1[addr.y][addr.x]==15&&map1[addr.y-2][addr.x]!=3){
man.addr={
y:addr.y-1,
x:addr.x
}
map1[addr.y-1][addr.x]=15;
map1[addr.y-2][addr.x]=14;
map1[addr.y][addr.x]=1;
creatMap(map1);
}
break;
case "right":
if (map1[addr.y][addr.x+1]==14&&map1[addr.y][addr.x+2]==1&&map1[addr.y][addr.x]==15&&map1[addr.y][addr.x+2]!=3){
man.addr={
y:addr.y,
x:addr.x+1
}
map1[addr.y][addr.x+1]=15;
map1[addr.y][addr.x+2]=14;
map1[addr.y][addr.x]=1;
creatMap(map1);
}
if (map1[addr.y][addr.x+1]==14&&map1[addr.y][addr.x+2]==0&&map1[addr.y][addr.x]==15&&map1[addr.y][addr.x+2]!=3){
man.addr={
y:addr.y,
x:addr.x+1
}
map1[addr.y][addr.x+1]=15;
map1[addr.y][addr.x+2]=4;
map1[addr.y][addr.x]=1;
creatMap(map1);
}
if (map1[addr.y][addr.x+1]==14&&map1[addr.y][addr.x+2]==1&&map1[addr.y][addr.x]==5&&map1[addr.y][addr.x+2]!=3){
man.addr={
y:addr.y,
x:addr.x+1
}
map1[addr.y][addr.x+1]=15;
map1[addr.y][addr.x+2]=14;
map1[addr.y][addr.x]=0;
creatMap(map1);
}
break;
case "down":
if (map1[addr.y+1][addr.x]==14&&map1[addr.y+2][addr.x]==1&&map1[addr.y][addr.x]==5&&map1[addr.y+2][addr.x]!=3){
man.addr={
y:addr.y+1,
x:addr.x
}
map1[addr.y+1][addr.x]=15;
map1[addr.y+2][addr.x]=14;
map1[addr.y][addr.x]=0;
creatMap(map1);
}
if (map1[addr.y+1][addr.x]==14&&map1[addr.y+2][addr.x]==0&&map1[addr.y][addr.x]==15&&map1[addr.y+2][addr.x]!=3){
man.addr={
y:addr.y+1,
x:addr.x
}
map1[addr.y+1][addr.x]=15;
map1[addr.y+2][addr.x]=4;
map1[addr.y][addr.x]=1;
creatMap(map1);
}
if (map1[addr.y+1][addr.x]==14&&map1[addr.y+2][addr.x]==1&&map1[addr.y][addr.x]==15&&map1[addr.y+2][addr.x]!=3){
man.addr={
y:addr.y+1,
x:addr.x
}
map1[addr.y+1][addr.x]=15;
map1[addr.y+2][addr.x]=14;
map1[addr.y][addr.x]=1;
creatMap(map1);
}
break;
default:
break;
}
}
按钮功能控制模块
window.onload=function(){
creatMap(map1);
document.body.onkeydown=function(event){
move(event.keyCode);
}
//****键盘控制模块****//
for (var i=0;i素材请私聊 博主 或者自行寻找
联系QQ918922703