Javascript推箱子实训.docx

实训报告课 程 名 称：___JavaScript网页特效案例教程 项 目 名称：______ 推 箱 子_游_戏_____关 卡：______第 22 关_卡________专 业 班 级：______计网2013_班_______姓名：________张三___________指 导 老 师：____________李四______实训 时 间：_2014-2015学年第1学期_______ 目录实训一………………………………………………………………1实训二………………………………………………………………4实训三………………………………………………………………6实训四………………………………………………………………8实训五…………………………………………………………….11实训六…………………………………………………………….14实训七…………………………………………………………….15实训八…………………………………………………………….17实训总结………………………………………………………….19一、实训目的：推箱子是一种游戏界面简单，操作容易，在玩游戏的同时还可以锻炼大家的反应速度及灵敏程度。通过对推箱子的设计，让我们能熟练掌握HTML编写javascript程序的基本操作。把游戏画面描绘出来，利用方向键在规定游戏画面范围内移动小人来推动箱子是否到达目标点，如果全部箱子都到达目标点后即可过关。二、实训要求：每个同学随机一个关卡，用Javascript实现一个关卡推箱子游戏。用户可以通过方向键移动小人来推动全部箱子到达目标点后即过关。三、实训步骤要求：1、绘图游戏要的基本元素。如墙、箱子、目标地点等2、把个人随机的关卡的推箱子的所有元素在页面显示出来3、移动控制，让小人在墙壁内可以左右上下自由移动4、控制小人可以移动推箱子5、完善推箱子四、实训步骤与过程：(1)绘图游戏要的基本元素实现概述：运用styl/style的CSS将所有要用的元素描绘出来，图中的q为墙壁元素,r为人物元素，x为箱子元素，m为目标元素，z为箱子到达目标时的元素，d为地板元素。实现代码：html headmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/titlestyle 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/headbodyscript type=text/javascriptvar 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实训过程遇到错误问题：上述代码实现如图：实训过程遇到错误问题的概述：错误很明显，所有元素挤在了一样的位置中，因为geZi()和ren()的形参x和y表示上边距和左边距，调用geZi()和ren()时，给的实参如果都一样的话，在页面会显示同个位置，所以每个元素x和y的实参要记得做区分，除了z为箱子到达目标时的元素调用的两个geZi()要一样上边距