《JavaScript程序设计教程》项目10：躲人游戏设计

JavaScript程序设计教程项目10：躲人游戏设计项目10：躲人游戏设计10.1功能与技术分析10.1.1功能分析在游戏初始时，表示己方的红色方块位于白色区域的正中，表示敌方的蓝色矩形块分布四周。

用户用鼠标拖动红色方块启动游行，敌方开始四处游走。红色方块必须在白色区域内活动，并且避免碰上蓝色敌方。一旦碰到黑色边界或是碰到蓝色矩形块，游戏即告结束。程序运行界面如图10-1所示。项目10：躲人游戏设计10.1功能与技术分析10.1.2技术分析项目中主要使用了HTML的块元素（div）构建游戏的基本框架、基本元素。无论是己方的红色方块、敌方的蓝色块，还是色块移动的白色、黑色区域，都是使用div来构建。

由于操控基于鼠标的拖动，所以在项目中除了HTML和JavaScript基本知识外，涉及的技术主要包括鼠标事件和数组等概念。项目10：躲人游戏设计10.2鼠标事件鼠标事件也是JavaScript程序与用户交互最常使用的，与之相关的事件处理程序通过鼠标的点击、移动等事件触发。10.2.1鼠标事件的触发条件

JavaScript中常见的与鼠标相关的事件、事件处理程序及其触发条件如表10-1所示。事件事件处理程序触发条件Clickonclick鼠标单击某个对象Dblclickondblclick鼠标双击某个对象Mousedownonmousedown鼠标任一键按下Mouseuponmmouseup鼠标任一键（按下后）释放Mouseoveronmouseover鼠标移至某对象上方Mouseoutonmouseout鼠标移出某对象Mousemoveonmousemove鼠标在某对象上方移动Contextmenuoncontextmenu鼠标弹出右键菜单项目10：躲人游戏设计10.2鼠标事件10.2.2鼠标事件处理程序鼠标事件是JavaScript中应用较为广泛的事件之一，在1.3节中已经介绍了与之相关的两个事件处理程序onmouseover和onmouseout，下面将对表10-1中其它的与鼠标事件相关的事件处理程序进行介绍。项目10：躲人游戏设计10.2鼠标事件10.2.2鼠标事件处理程序

(1)事件的捕获。

onmousedown、onmouseup分别用于Mousedown和Mouseup事件的捕获，即对鼠标任何按键的按下和松开事件进行捕获。

而Click事件可以通过onclick事件处理程序捕获，实际上一个Click事件相当于是Mousedown和Mouseup事件的组合。

ondblclick事件处理程序用于鼠标双击事件Dbclick的捕获，一般只在特定或刻意强调的情况下才使用ondblclick，通常使用onclick即可。项目10：躲人游戏设计10.2鼠标事件10.2.2鼠标事件处理程序

(2)事件处理程序的初始化。

在实际的应用中，要实现对鼠标相关事件的捕获有两种方法。一种方式是通过1.3节中介绍的在HTML标记中实现；

另一种是与键盘事件类似的捕获方式。如：document.onMouseDown=mouseDownFunction;

functionmouseDownFunction(){}其中，mouseDownFunction()定义了mousedown事件发生时相应的处理程序，由用户自行定义。项目10：躲人游戏设计10.2鼠标事件10.2.2鼠标事件处理程序从上面的描述中可以看出，这几个事件处理程序并没有给出是鼠标的哪一个按键完成相应的事件操作，若需确定还须使用MouseEvent对象的button属性，它是一个与浏览器相关的属性，不同的浏览器需不同的属性来定义其值，如果在FireFox或Opera浏览器中，button属性的值分别表示：0：按下左键1：按下中键（如果有的话）2：按下右键项目10：躲人游戏设计10.2鼠标事件10.2.2鼠标事件处理程序从上面的描述中可以看出，这几个事件处理程序并没有给出是鼠标的哪一个按键完成相应的事件操作，若需确定还须使用MouseEvent对象的button属性，它是一个与浏览器相关的属性，不同的浏览器需不同的属性来定义其值，如果在IE浏览器中，button属性的值分别表示：0：没有键被按下 1：按下左键2：按下右键 3：左键与右键同时被按下4：按下中键 5：左键与中键同时被按下6：中键与右键同时被按下 7：三个键同时被按下详细的内容读者可参看相关手册。项目10：躲人游戏设计10.2鼠标事件10.2.2鼠标事件处理程序【例10-1】鼠标事件处理程序的使用。利用鼠标事件处理程序可以判断用户点击了鼠标左键还是右键，单击还是双击，如图10-2、图10-3所示。项目10：躲人游戏设计10.2鼠标事件10.2.2鼠标事件处理程序【例10-1】鼠标事件处理程序的使用。

(1)编写网页界面，使用div来规范输出内容的位置。

(2)本例中给出mousedown、mouseup、click和dblclick等鼠标事件的处理程序，具体JavaScript代码实现项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标在动态网页编程中，要设置元素的大小与位置，必须使用样式（CSS）对象的长度属性；而要获取元素的大小与位置，通常是使用元素对象的长度属性。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标1.设置元素的大小与位置根据CSS元素框模型，任何一个可显示的页面元素都显示为一个元素框（如div、p、table等等），而每个元素框由里至外依次包括内容区（Width、Height）、内边距（padding）、边框（border）和外边距（margin）4个部分。在Javascript程序中，要设置元素框的大小与位置，可以使用元素对象的style属性引用的Style对象。该对象表示元素的内嵌样式，含有以下3组长度属性：项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标1.设置元素的大小与位置

(1)CSS长度属性：包括width、height、left和top属性。其中，width、height属性分别指定元素内容区的宽度、高度，而left、top属性分别指定元素框与其包含块边界之间的水平、垂直偏移。注意，这些属性直接对应于CSS属性，其属性值是字符串类型，并且带单位。

例如：testBlock.style.width=“6cm”;

//将内容区宽度设置为6cm项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标1.设置元素的大小与位置

(2)pixel长度属性：包括pixelwidth、pixelHeight、pixelLeft和pixeltop属性。

这些属性表示的长度与width、height、left和top属性表示的长度含义相同。但是，这些属性值的类型是整数，单位是px（像素）。

例如：testBlock.style.pixelLeft=15;

//将水平偏移设置为15个象素项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标1.设置元素的大小与位置

(3)pos长度属性：包括posWidth、posHeight、posLeft和posTop属性。

这些属性值的类型是浮点数，表示width、height、left和top属性值中的数值部分。

例如：testBlock.style.posHeight=0.5;

//将内容区高度值设置为0.5项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标1.设置元素的大小与位置

(3)pos长度属性：包括posWidth、posHeight、posLeft和posTop属性。必须注意，以上3组长度属性总是保持一致性。也就是，当修改某个长度属性时，其他两组对应的属性将自动转换为相应的长度值。此外，当对pixel长度属性或pos长度属性进行赋值时，不会改变相应的CSS长度属性值的单位。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标1.设置元素的大小与位置虽然pixel长度属性与pos长度属性给编程带来了方便，但是遗憾的是这些属性在“火狐”等浏览器中无效。2.定位方式元素定位是动态网页设计的基础，通过访问和设置元素的CSS位置属性（left和top）可以模拟各种网页运动效果。CSS定位方式主要包括以下4种。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标2.定位方式

(1)静态定位（static），这是所有元素的默认定位方式。它遵循文档的自然流动方式在页面中显示，此时无法通过CSS对其定位。

例如，下面的框元素不会因为属性值而移动其在文档中的位置：<divstyle="width:200px;height:100px;border:

solid

1pxred;

position:static;top:100px;left:100px;">

</div>项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标2.定位方式

(2)相对定位（relative），它是流动布局的一种特殊形式，因为元素会继续遵循文档流动的规则，同时也会受left和top属性的影响，但是它会强制元素在原来文档中的位置进行偏移，而不是参照上级元素进行定位。

例如，下面的框元素会在原来文档的位置向右下角偏移（100,100）的距离：<divstyle="width:200px;height:100px;border:solid1pxred;

position:relative;top:100px;

left:100px;"></div>项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标2.定位方式

(3)绝对定位（absolute），绝对定位完全脱离了文档，它能够根据最近的上级非静态定位的元素为参照对象进行定位。如果没有相应的上级非静态元素，则会以整个文档为参照对象进行定位。

例如，下面的框元素将会根据窗口左上角为参照原点进行定位：<divstyle

="width:200px;height:100px;

border:solid

1pxred;position:absolute;top:100px;left:100px;">＜/div>项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标2.定位方式

(4)固定定位（fixed），固定定位是一种特殊的定位方式，它将始终根据浏览器窗口左上角为原点进行定位，同时不会受窗口内容的影响，当拖动滚动条时，它的位置始终保持在窗口可视区域内。

例如，下面这个框元素将会始终显示在浏览器窗口的左上角，且不会因为滚动内容而被隐藏：<divstyle="width:200px;height:100px;border:solid1pxred;position:fixed;top:0;left:0;"></div>项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标2.定位方式【例10-2】对框元素的定位。在页面上放置一个框元素，通过单击按钮来改变框元素的定位方式。程序较为简单，具体代码实现如下：程序的运行结果如图10-4所示。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标3.获取元素的大小与位置显然，获取元素大小与位置的一种方法是使用CSS对象访问相应的长度属性。但这种方法有以下两个缺陷：(l)若要访问的长度属性没有设置，则读取的值是空字符串；(2)若元素的定位方式是静态定位（static），则其样式属性left、top无效。不过，几乎所有元素对象都具有表10-2所示的长度属性（注：这些属性的值是整数，长度单位是像素px）。通过访问这些属性，可以获取元素的实际大小与位置。属性说明clientWidth获取元素客户区的宽度，等于内容区宽度＋左右两边的内边距，但不包括可能出现的垂直滚动条宽度clientHeight获取元素客户区的高度，等于内容区高度＋上下两边的内边距，但不包括可能出现的水平滚动条高度clientLeft获取客户区与偏移区的左边界之间的距离，即左边框宽度style.borderLeftWidthclientTop获取客户区与偏移区的上边界之间的距离，即上边框宽度style.borderTopWidthoffsetWidth获取偏移区的宽度，等于内容区宽度＋左右两边的内边距＋左右两边的边框offsetHeight获取偏移区的高度，等于内容区高度＋上下两边的内边距＋上下两边的边框offsetLeft获取偏移区与其包含块客户区的左边界之间的距离offsetTop获取偏移区与其包含块客户区的上边界之间的距离项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标3.获取元素的大小与位置要理解这些属性的含义，必须基于CSS的框模型，即一个元素框，由里至外，依次包括内容区、内边距、边框和外边距。

此外，在一个元素框中，也包括以下两个区域。

(l)客户区：由里至外，依次包括内容区和内边距，但不包括可能出现的滚动条。

在元素对象中，clientWidth、clientHeight属性表示客户区的大小；而clientLeft、clielltTop属性表示客户区在偏移区中的水平、垂直距离，实际上就是元素的边框宽度。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标3.获取元素的大小与位置要理解这些属性的含义，必须基于CSS的框模型，即一个元素框，由里至外，依次包括内容区、内边距、边框和外边距。

此外，在一个元素框中，也包括以下两个区域。

(2)偏移区：由里至外，依次包括内容区、内边距和边框。

在元素对象中，offsetWidth、offsetHeight属性表示偏移区的大小；而offsetLeft、offsetTop属性表示偏移区在其包含块客户区中的水平、垂直距离。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标3.获取元素的大小与位置【例10-3】理解<div>元素的CSS属性和对象属性。

(1)制作一个页面。在页面上放置一个<div>块，并设置内嵌样式：style="top:0px;left:0px;width:

200px;height:200px;padding:3px;border:10pxsolidblack;"再在其中放置一个<div>子块，设置内嵌样式：style="position:relative;width:60px;height:60px;padding:3px;border:15pxsolidred;”项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标3.获取元素的大小与位置【例10-3】理解<div>元素的CSS属性和对象属性。最后设置不同的按钮，以显示<div>块及其子块的各种大小与位置属性。页面设计如图10-5所示。代码如下：项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标3.获取元素的大小与位置【例10-3】理解<div>元素的CSS属性和对象属性。

(2)在<head></head>中加入JavaScript代码：运行网页程序，单击按钮可得到相应的CSS属性和对象属性值，运行结果如图10-6所示。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标3.获取元素的大小与位置【例10-3】理解<div>元素的CSS属性和对象属性。说明：

(l)在访问<d2>元素的style对象中的长度属性时，由于只为<d2>设置了width和height长度属性，因此style.left、style.top返回空字符串。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标3.获取元素的大小与位置【例10-3】理解<div>元素的CSS属性和对象属性。说明：

(2)在访问<d1>元素的长度属性时，由于设置了样式属性，“border:10px”，因此d1.clientLeft和d1.clientTop的值都是10；由于设置了样式属性“width:200px;padding:3px”，因此d1.clientWidth=200+23

=206；而offsetTop和offsetLeft属性则表示d1的外边界距离距离浏览器窗口的顶部和左边界的距离；d1.offsetWidth=200+23+210=226。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.1获取与设置对象的坐标3.获取元素的大小与位置【例10-3】理解<div>元素的CSS属性和对象属性。说明：

(3)在访问<d2>元素的长度属性时，由于没有为d2的style设置top和left属性，因此d2.

style.top和d2.

style.left均无返回值；由于设置了d2的样式属性，“border:15px”，因此d2.clientLeft和d2.clientTop的值都是15；d2.clientWidth=60+23

=66；而d2.offsetWidth=60+23

+215

=96。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.2获取鼠标的坐标通过鼠标在网页上的点击，还可以获得当前鼠标的坐标。1.返回鼠标指针的位置通过鼠标在网页上的点击，可以获得许多有用的参数，如获得当前鼠标的坐标。

根据其参照物的不同，分为以下几套坐标系。一套是以当前浏览器的可视区为参照物（clientX,clientY），另一套是以显示器的屏幕为参照物（screenX,screenY）。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.2获取鼠标的坐标通过鼠标在网页上的点击，还可以获得当前鼠标的坐标。1.返回鼠标指针的位置此外微软还有一套坐标系（x,

y），它是相对于触发事件的对象的offsetParent的，火狐有另一套坐标系（pageX,pageY），它是相对于当前网页的。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.2获取鼠标的坐标1.返回鼠标指针的位置例如，在鼠标事件中，可用clientX和clientY属性获取鼠标指针在客户端区域的位置：variClientX

=

oEvent.clientX;variClientY

=

oEvent.clientY;客户端区域是指当前浏览器的可视区（显示网页的窗口部分），这些属性描述鼠标在该区域内的位置离边界有多远（单位是像素）。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.2获取鼠标的坐标1.返回鼠标指针的位置用screenX和screeny属性则可以获取鼠标指针在计算机屏幕中的位置：variScreenX=

oEvent.screenX;variScreenY

=

oEvent.screenY;这两个属性返回表示离用户屏幕的边界有多少个像素的整数。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.2获取鼠标的坐标2.鼠标拖动对象

Javascript的mousemove事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动1个像素），就会触发mousemove事件。

该事件响应的灵敏度主要参考鼠标指针移动速度的快慢，以及浏览器跟踪更新的速度。项目10：躲人游戏设计10.3JavaScript的坐标系10.3.2获取鼠标的坐标2.鼠标拖动对象【例10-4】鼠标拖动方块。用鼠标可以在网页中拖动绿色方块，如图10-8所示。程序的实现很简单，完整的代码如下：项目10：躲人游戏设计10.4躲人游戏的设计与实现10.4.1躲人游戏的界面设计与实现躲人游戏的界面主要由两个分区构成，一个是标题区，另一个是游戏区。而游戏区又由两个部分构成，分别是游戏操作区和帮助信息显示区。设计界面及其分区如图10-9所示。游戏操作区帮助信息显示区项目10：躲人游戏设计10.4躲人游戏的设计与实现10.4.1躲人游戏的界面设计与实现1.主界面的设计与实现主界面中游戏标题、帮助信息通常不会发生改变，因此，采用静态的页面设计即可，而游戏操作区显示的信息需随游戏的进程而不断变化，因而采用动态页面。在代码实现上，标题采用标记<h2>定义，游戏区及其中的矩形块均采用块区域标记<div>定义，并使用水平分隔线标记<hr>对标题与游戏区进行分割。具体的实现代码项目10：躲人游戏设计10.4躲人游戏的设计与实现10.4.1躲人游戏的界面设计与实现2.红色方块的居中显示游戏中的红色方块box以块区域的形式出现，其居中实现采用函数形式，在初始化相应的变量后定位于游戏区的中央，具体代码项目10：躲人游戏设计10.4躲人游戏的设计与实现10.4.2躲人游戏应用逻辑的设计与实现躲人游戏首先是初始化，包括主界面、红色和蓝色矩形的初始化。

初始化完成后，只有当用户拖动红色方块时才开始游戏。游戏的流程分为两条线，一条线是红色方块的拖动、检查是否碰到边界；另一条线是蓝色矩形在游戏区内的四处游走、检查是否碰到红色方块。

无论是红色方块碰到边界还是蓝色矩形碰到红色方块，都将导致游戏结束。游戏的程序流程图如图10-10所示。项目10：躲人游戏设计10.4躲人游戏的设计与实现10.4.2躲人游戏应用逻辑的设计与实现游戏的启动是由按下鼠标，激发onmousedown事件开始：document.onmousedown=function(e){

//按下鼠标

if(started==0){

/