实训报告课程名称：___JavaScript网页特效案例教程项目名称：______ 推箱子_游_戏_____关卡：______第 22 关_卡________专业班级：______计网2013_班_______姓名：________张三___________指导老师：____________李四______实训时间：_2014-2015学年第1学期_______目录实训一 (1)实训二 (4)实训三 (6)实训四 (8)实训五 (11)实训六 (14)实训七 (15)实训八 (17)实训总结 (19)一、实训目的：推箱子是一种游戏界面简单，操作容易，在玩游戏的同时还可以锻炼大家的反应速度及灵敏程度。
通过对推箱子的设计，让我们能熟练掌握HTML编写javascript程序的基本操作。
把游戏画面描绘出来，利用方向键在规定游戏画面范围内移动小人来推动箱子是否到达目标点，如果全部箱子都到达目标点后即可过关。
二、实训要求：每个同学随机一个关卡，用Javascript实现一个关卡推箱子游戏。
用户可以通过方向键移动小人来推动全部箱子到达目标点后即过关。
三、实训步骤要求：1、绘图游戏要的基本元素。
如墙、箱子、目标地点等2、把个人随机的关卡的推箱子的所有元素在页面显示出来3、移动控制，让小人在墙壁内可以左右上下自由移动4、控制小人可以移动推箱子5、完善推箱子四、实训步骤与过程：(1)绘图游戏要的基本元素A．实现概述：运用<styl></style>的CSS将所有要用的元素描绘出来，图中的q为墙壁元素,r 为人物元素，x为箱子元素，m为目标元素，z为箱子到达目标时的元素，d 为地板元素。
B．实现代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.diban{border:1px outset #333333;}.qiangbi{border:1px outset #333333;background-color:#FF6600}.xiangzi{border:1px outset #333333;background-color:#CC3366;filter:Alpha(Opacity=0,finishOpacity=100,style=3);}.mubiao{border:1px outset #333333;background-color:#663399;filter:Alpha(Opacity=100,finishOpacity=0,style=2);}</style></head><body><script type="text/javascript">var W=80;functiongeZi(x,y,w,s){document.write("<span style='position:absolute; top:"+x+"px; left:"+y+"px; width:"+w+"px; height:"+w+"px' class='"+s+"'></span>");}functionren(x,y,w){document.write("<imgsrc='2012071616264969.gif' style='position:absolute; top:"+x+"px; left:"+y+"px; width:"+w+"px; height:"+w+"px' />");}geZi(100,200,W,"qiangbi");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);</script></body></html>C．实训过程遇到错误问题：上述代码实现如图：D．实训过程遇到错误问题的概述：错误很明显，所有元素挤在了一样的位置中，因为geZi()和ren()的形参x和y表示上边距和左边距，调用geZi()和ren()时，给的实参如果都一样的话，在页面会显示同个位置，所以每个元素x和y的实参要记得做区分，除了z为箱子到达目标时的元素调用的两个geZi()要一样上边距和左边距以外，其他都要做区分。
(2)把个人随机的关卡的推箱子的所有元素在页面显示出来A．实现概述：增加一个str[]的全局数组变量，下标值为关卡的元素,来实现整个关卡游戏显示的元素。
运用了双层for循环来取出数组中每个下标的长度，又运用了charAt()方法取出每个下标的长度中的每个字符。
然后对取出的字符进行相应的操作调用geZi()和ren()的参数，把元素显示在页面即可。
B．实现代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.diban{border:1px outset #333333;}.qiangbi{border:1px outset #333333;background-color:#FF6600}.xiangzi{border:1px outset #333333;background-color:#CC3366;filter:Alpha(Opacity=0,finishOpacity=100,style=3);}.mubiao{border:1px outset #333333;background-color:#663399;filter:Alpha(Opacity=100,finishOpacity=0,style=2);}</style></head><body bgcolor=white><script type="text/javascript">var W=50;X=10;Y=100;varstr=["qqqqqqqq0","qddddddq0","qdqxxddq0","qdmmmqdq0","qqmmmxdqq","0qdqqdxdq","0qxddxddq","0qddqddrq","0qqqqqqqq"];functiongeZi(x,y,w,s){document.write("<span style='position:absolute; top:"+x+"px; left:"+y+"px;width:"+w+"px; height:"+w+"px' class='"+s+"'></span>");}functionren(x,y,w){document.write("<imgsrc='2012071616264969.gif' style='position:absolute; top:"+x+"px; left:"+y+"px; width:"+w+"px; height:"+w+"px' />");}duqu()functionduqu(){x=X;y=Y;for(var i=0;i<str.length;i++){for(j=0;j<str[i].length;j++){switch(str[i].charAt(j)){case 'q': geZi(x,y,W,"qiangbi");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': 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+=W}x+=Wy=Y}}</script></body></html>C．实训过程遇到错误问题：a.错误一：b.错误二:错误二代码实现如图：D．实训过程遇到错误问题的概述：a的错误是，最后一行不能加(,)逗号，虽然可以显示图，但是会提示错误。
b的错误，少了代码。