Javascript推箱子实训

1、目 录实训一1实训二4实训三6实训四8实训五.11实训六.14实训七.15实训八.17实训总结.19一、实训目的：推箱子是一种游戏界面简单，操作容易，在玩游戏的同时还可以锻炼大家的反应速度及灵敏程度。通过对推箱子的设计，让我们能熟练掌握HTML编写javascript程序的基本操作。把游戏画面描绘出来，利用方向键在规定游戏画面范围内移动小人来推动箱子是否到达目标点，如果全部箱子都到达目标点后即可过关。二、实训要求：每个同学随机一个关卡，用Javascript实现一个关卡推箱子游戏。用户可以通过方向键移动小人来推动全部箱子到达目标点后即过关。三、实训步骤要求：1、绘图游戏要的基本元素。如墙、箱子

2、、目标地点等2、把个人随机的关卡的推箱子的所有元素在页面显示出来3、移动控制，让小人在墙壁内可以左右上下自由移动4、控制小人可以移动推箱子5、完善推箱子四、实训步骤与过程：(1) 绘图游戏要的基本元素A 实现概述：运用的CSS将所有要用的元素描绘出来，图中的q为墙壁元素,r为人物元素，x为箱子元素，m为目标元素，z为箱子到达目标时的元素，d为地板元素。B 实现代码：无标题文档.dibanborder:1px outset #333333;.qiangbiborder:1px outset #333333;background-color:#FF6600.xiangziborder:1px ou

3、tset #333333;background-color:#CC3366;filter:Alpha(Opacity=0,finishOpacity=100,style=3);.mubiaoborder:1px outset #333333;background-color:#663399;filter:Alpha(Opacity=100,finishOpacity=0,style=2);var W=80;function geZi(x,y,w,s)document.write();function ren(x,y,w)document.write();geZi(100,200,W,qiang

4、bi);geZi(100,600,W,xiangzi);geZi(300,200,W,mubiao);geZi(300,400,W,mubiao);geZi(300,400,W,xiangzi);geZi(300,600,W,diban);ren(100,400,W);C 实训过程遇到错误问题： 上述代码实现如图：D 实训过程遇到错误问题的概述：错误很明显，所有元素挤在了一样的位置中，因为geZi()和ren()的形参x和y表示上边距和左边距，调用geZi()和ren()时，给的实参如果都一样的话，在页面会显示同个位置，所以每个元素x和y的实参要记得做区分，除了z为箱子到达目标时的元素调用的两

5、个geZi()要一样上边距和左边距以外，其他都要做区分。(2)把个人随机的关卡的推箱子的所有元素在页面显示出来A 实现概述：增加一个str的全局数组变量，下标值为关卡的元素,来实现整个关卡游戏显示的元素。运用了双层for循环来取出数组中每个下标的长度，又运用了charAt()方法取出每个下标的长度中的每个字符。然后对取出的字符进行相应的操作调用geZi()和ren()的参数，把元素显示在页面即可。B 实现代码：无标题文档.dibanborder:1px outset #333333;.qiangbiborder:1px outset #333333;background-color:#FF66

6、00.xiangziborder:1px outset #333333;background-color:#CC3366;filter:Alpha(Opacity=0,finishOpacity=100,style=3);.mubiaoborder:1px outset #333333;background-color:#663399;filter:Alpha(Opacity=100,finishOpacity=0,style=2);var W=50;X=10;Y=100;var str=qqqqqqqq0,qddddddq0,qdqxxddq0,qdmmmqdq0,qqmmmxdqq,0qd

7、qqdxdq,0qxddxddq,0qddqddrq,0qqqqqqqq;function geZi(x,y,w,s)document.write();function ren(x,y,w)document.write();duqu()function duqu()x=X;y=Y;for(var i=0;istr.length;i+)for(j=0;jstri.length;j+) switch(stri.charAt(j)case q:geZi(x,y,W,qiangbi);break;case d:geZi(x,y,W,diban);break;case x:geZi(x,y,W,xian

8、gzi);break;case m:geZi(x,y,W,mubiao);geZi(x,y,W,diban);break;case r:geZi(x,y,W,diban);ren(x,y,W);break;case z:geZi(x,y,W,mubiao);geZi(x,y,W,xiangzi);break;default:;y+=Wx+=Wy=YC 实训过程遇到错误问题：a. 错误一：b. 错误二:错误二代码实现如图：D实训过程遇到错误问题的概述：a的错误是，最后一行不能加(,)逗号，虽然可以显示图，但是会提示错误。b的错误，少了代码。因为外循环表示左边距，如果左边距不归为起点的话，左边距就

9、会一直增加，就会出现b错误代码实现的结果。所以要在外循环内加上y=Y即可。(3)移动控制，让小人在墙壁内可以左右上下自由移动A 实现概述：第三步骤，要实现的代码很多。我总结分为几个概述： 为了得到小人，先来到ren()函数中，为小人图片设定ID为man 增加了全局变量manX,manY记录小人在地图数组中的实时位置信息， manLeft,manTop小人在网页图中的位置信息，next小人的下一个位置的字符，man获取整个小人图片元素 创建了moveleft(),moveRight(),moveUp(),moveDown()分别表示左移动、右移动、上移动、下移动。四个函数内都有if(next!=

10、 q)，来判断只有不等于墙壁，小人就可以在除了墙壁的其他元素移动 创建了函数keyUp()对上右下左按键的处理,在函数中定义了局部变量key，用来获取按键代码值，分别把小人的ID、小人的左边距、小人的上边距赋值给man，manLeft,manTop。运用switch来判断key按键代码值，来运行相应的上下左右。B 实现代码：无标题文档.dibanborder:1px outset #333333;.qiangbiborder:1px outset #333333;background-color:#FF6600;.xiangziborder:1px outset #333333;backgro

11、und-color:#CC3366;filter:Alpha(Opacity=0,finishOpacity=100,style=3);.mubiaoborder:1px outset #333333;background-color:#663399;filter:Alpha(Opacity=100,finishOpacity=0,style=2);var W=50;var X=10;var Y=400;var manX,manY; var manLeft,manTop; var man; var next; var str=qqqqqqqq0,qddddddq0,qdqxxddq0,qdmm

12、mqdq0,qqmmmxdqq,0qdqqdxdq,0qxddxddq,0qddqddrq,0qqqqqqqq;readStr();function geZi(x,y,w,s)if(s=xiangzi)document.write();elsedocument.write();function ren(x,y,w)document.write();function readStr() x=X,y=Y;for(var i=0;istr.length;i+) for(j=0;jstri.length;j+) switch(stri.charAt(j)case q:geZi(x,y,W,qiangb

13、i);break;case d:geZi(x,y,W,diban);break;case x:geZi(x,y,W,xiangzi);break;case m:geZi(x,y,W,mubiao);geZi(x,y,W,diban);break;case r:manX=j;manY=i;geZi(x,y,W,diban);ren(x,y,W);break;case z:geZi(x,y,W,mubiao);geZi(x,y,W,xiangzi);break;default:;y+=Wx+=Wy=Yfunction keyUp() var key=window.event.keyCode; ma

14、n=document.getElementById(man); manLeft=man.offsetLeft; manTop=man.offsetTop; /alert(小人的位置:+manLeft+,+manTop); next;switch(key)case 37:moveLeft();break;case 38:moveUp(); break;case 39:moveRight(); break;case 40:moveDown(); break;default:;function moveLeft()next=strmanXmanY-1;if(next!=q)man.style.lef

15、t=manLeft-W;manY-;function moveRight()next=strmanXmanY+1;if(next!=q)man.style.left=manLeft+W;manY+;function moveUp()next=strmanX-1manY;if(next!=q)man.style.top=manTop-W;manX-;function moveDown()next=strmanX+1manY;if(next!=q)man.style.top=manTop+W;manX+;C 实训过程遇到错误问题：a. 错误一:错误一代码实现打开出现提示如图：b. 错误二:错误二代

16、码打开按下上下左右任意一个键就出现提示如图：D 实训过程遇到错误问题的概述：a的错误是，readStr()的位置放错，readStr();的调用应该要出现在所有全局变量的后面，不能出现全局变量的前面。b 的错误是，少了代码。因为移动人物的话，小人在地图数组中的实时位置就会不同。每次调用r就应该保存每次调用时的那个数组实时位置坐标，所以要在r中增加manX=j;manY=i; 记录小人在地图数组中的实时位置信息。(4)控制小人可以移动推箱子1.创建selectBox(bx，by)带有参数的函数。用来找想要移动的箱子位置信息找到箱子在数组中对应的下标值，即箱子ID在moveleft(),moveR

17、ight(),moveUp(),moveDown()四个函数中增加代码来实现移动箱子的功能。函数代码中先判断小人的下一个位置，如果空的，小人直接移动，如果是箱子的话，又判断箱子的下一个位置是否是空的，如果是空的，运用selectBox(bx，by)函数获取箱子的ID，小人就可以推动箱子一起移动，移动过后，变化过的地图数组位置要更新。创建MB(bx,by)带有参数的函数，bx表示箱子的上边距，by表示箱子的左边距。函数的作用是拿一个箱子的位置跟所有的目标位置比较，如果有一样的，则返回true 创建check()函数，表示如果箱子数组中所有的箱子都能在目标数组找到对应的位置，则返回true，说明过关。在keyUp()函数中号后面增加if(check(),如果是true,出现提示恭喜您，过关！，并停止按键的执行。这实现了完善游戏。错误是图中最后面少了代码，因为小人和箱子移动过后，它们在地图数组就发生了变化，如果不更新小人和箱子的位置的话，又继续移动，就会发生乱码。所以要在最后面增加manY-；