Javascript推箱子实训

实训报告

课程名称：___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．实现概述：

运用的CSS将所有要用的元素描绘出来，图中的q为墙壁元素,r 为人物元素，x为箱子元素，m为目标元素，z为箱子到达目标时的元素，d 为地板元素。

B．实现代码：

C．实训过程遇到错误问题：

上述代码实现如图：

D．实训过程遇到错误问题的概述：

错误很明显，所有元素挤在了一样的位置中，因为geZi()和ren()的形参x和y表示上边距和左边距，调用geZi()和ren()时，给的实参如果都一样的话，在页面会

显示同个位置，所以每个元素x和y的实参要记得做区分，除了z为箱子到达目标时的元素调用的两个geZi()要一样上边距和左边距以

外，其他都要做区分。

(2)把个人随机的关卡的推箱子的所有元素在页面显示出来

A．实现概述：

增加一个str[]的全局数组变量，下标值为关卡的元素,来实现整

个关卡游戏显示的元素。运用了双层for循环来取出数组中每个下标的

长度，又运用了charAt()方法取出每个下标的长度中的每个字符。

然后对取出的字符进行相应的操作调用geZi()和ren()的参数，把元素显示在页面即可。

B．实现代码：