《JavaScript程序设计教程》项目9：贪食蛇游戏设计_第1页
《JavaScript程序设计教程》项目9：贪食蛇游戏设计_第2页
《JavaScript程序设计教程》项目9：贪食蛇游戏设计_第3页
《JavaScript程序设计教程》项目9：贪食蛇游戏设计_第4页
《JavaScript程序设计教程》项目9：贪食蛇游戏设计_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaScript程序设计教程项目9：贪食蛇游戏设计项目9：贪食蛇游戏设计9.1功能与技术分析9.1.1功能分析游戏开始后，贪食蛇按照一定的速度移动，用户通过操控上、下、左、右四个按键改变蛇的运动方向。当蛇头碰撞到食物时，吞食食物并将其转变为新的蛇头，蛇身增长，同时游戏分值增加。在游戏期间若蛇头撞到蛇身或障壁则游戏结束。游戏人机交互界面以表格的形式构建，整个界面由两大部分构成，以横线间隔开。

上部为游戏标题，下部为游戏区，游戏区又由游戏得分及速度等运行状态区、游戏运行区和帮助信息提示区三个主要部分，运行界面如图9-1所示。项目9：贪食蛇游戏设计9.1功能与技术分析9.1.2技术分析项目中主要使用了HTML的表格构建游戏的背景，通过方向键按下的事件触发游戏开始，以时钟驱动型任务维持游戏的运行。

在项目中除了HTML和JavaScript基本知识外，涉及的技术主要包括是Array对象、String对象、Windows对象和Math对象。项目9：贪食蛇游戏设计9.2字符串对象字符串是JavaScript中应用最广泛的基本类型之一，无论是处理用户的输入数据，还是读取或设置DOM对象的属性，或者操作cookie等都离不开字符串类型。

而JavaScript的字符串对象，即String对象提供了一系列的属性和方法用于字符串及字符串对象的操作，如分割字符串，改变字符串的大小写，字符串拼接等等。项目9：贪食蛇游戏设计9.2字符串对象9.2.1字符串及字符串对象的创建1.字符串创建字符串的最简单办法是声明一个新的变量，并将一组由引号包含的字符作为值赋给它。例如：varmyStr1='Hello,Javascript!';对于上面的字符串的值，可以用单引号，也可以用双引号进行包含，但不能混用。因此，上面的声明也可以写作：varmyStr2

="Hello,Javascript!"

;项目9：贪食蛇游戏设计9.2字符串对象9.2.1字符串及字符串对象的创建1.字符串可以使用两种引号创建字符串为Javascript的操作提供了非常多的便利，例如将一种引号嵌入在另一种引号包含的内容之中，实现Javascript程序与HTML语言的混用。例如：document.write('<imgsrc="smp/sample1.jpg">');另外，创建字符串还可以通过String(

)函数来实现。例如：varmyStr3

=

String('Hello,Javascript!');当然，使用String(

)函数声明时可以赋初值，也可以不赋初值项目9：贪食蛇游戏设计9.2字符串对象9.2.1字符串及字符串对象的创建1.字符串当然，使用String(

)函数声明时可以赋初值，也可以不赋初值，例如：varmyStr4

=String();varmyStr5

=String

(myStr5);对于上述声明的myStr4值为空，而myStr5为undefined。项目9：贪食蛇游戏设计9.2字符串对象9.2.1字符串及字符串对象的创建2.字符串对象通过下面的例子可以发现，虽然前面创建的字符串本质上并不是真正的字符串对象，但是在JavaScript中，会把一个字符串从基本变量类型简单地转换成一个临时的String对象，并使用String对象的方法，然后再将其转换为字符串类型。

那么，如何去创建一个真正意义上的字符串对象呢？项目9：贪食蛇游戏设计9.2字符串对象9.2.1字符串及字符串对象的创建2.字符串对象在Javascript中，可以通过new运算符和String()函数联立使用创建一个字符串对象，所创建的字符串对象具有String类的属性并可以使用其所有的方法进行操作。例如：varmyStrObj1

=

new

String(

);在声明的同时，可以对其赋值，甚至可以前面定义过的字符串的值。例如：varmyStrObj2

=

new

String('abcd')

;varmyStrObj3

=

new

String(myStr3);项目9：贪食蛇游戏设计9.2字符串对象9.2.1字符串及字符串对象的创建2.字符串对象【例9-1】字符串及字符串对象创建。项目9：贪食蛇游戏设计9.2字符串对象9.2.1字符串及字符串对象的创建2.字符串对象【例9-1】字符串及字符串对象创建。

(1)编写网页界面，使用表格来规范各项输出内容的大小和位置

(2)在<head></head>标记中添加网页读入事件处理器onload()函数程序运行结果如图9-2所示。项目9：贪食蛇游戏设计9.2字符串对象9.2.2字符串对象属性字符串对象拥有三个属性，即constructor、length和prototype，其中，length是最常使用的字符串属性。字符串属性描述如表9-1所示：属性说明constructor指定创建一个对象的函数length返回字符串的长度prototype向对象添加属性和方法项目9：贪食蛇游戏设计9.2字符串对象9.2.2字符串对象属性【例9-2】字符串对象的length属性。项目9：贪食蛇游戏设计9.2字符串对象9.2.2字符串对象属性【例9-2】字符串对象的length属性。正如9.2.1所述，在Javascript中不仅字符串对象可以使用其属性进行描述，字符串也会被临时转换为字符串对象，从而使用字符串对象的属性与方法对其进行描述。

本例即是利用例9-1中生成的字符串及字符串对象的length属性返回其字符数量。项目9：贪食蛇游戏设计9.2字符串对象9.2.2字符串对象属性【例9-2】字符串对象的length属性。(1)编写网页界面，使用表格来规范各项输出内容的大小和位置

(2)在<head></head>标记中添加网页读入事件处理onload()函数：程序运行结果如图9-3所示。项目9：贪食蛇游戏设计9.2字符串对象9.2.3字符串对象方法字符串对象提供丰富的方法用于字符串操作，最常见的方法是加（+）方法，在2.2.3中已经介绍过。其它的一些常见方法参见表9-2所示：方法说明big()使用大号字体显示字符串small()使用小号字体显示字符串fontsize()使用指定的尺寸来显示字符串fontcolor()使用指定的颜色来显示字符串blink()显示闪动字符串bold()使用粗体显示字符串italics()使用斜体显示字符串项目9：贪食蛇游戏设计9.2字符串对象9.2.3字符串对象方法字符串对象提供丰富的方法用于字符串操作，最常见的方法是加（+）方法，在2.2.3中已经介绍过。其它的一些常见方法参见表9-2所示：方法说明strike()使用删除线来显示字符串sub()把字符串显示为下标sup()把字符串显示为上标concat()连接字符串split()把字符串分割为字符串数组*indexOf()检索字符串lastIndexOf()从后向前搜索字符串项目9：贪食蛇游戏设计9.2字符串对象9.2.3字符串对象方法字符串对象提供丰富的方法用于字符串操作，最常见的方法是加（+）方法，在2.2.3中已经介绍过。其它的一些常见方法参见表9-2所示：方法说明charAt()返回在指定位置的字符substr()从起始索引号提取字符串中指定数目的字符substring()提取字符串中两个指定的索引号之间的字符toLowerCase()把字符串转换为小写toUpperCase()把字符串转换为大写项目9：贪食蛇游戏设计9.2字符串对象9.2.3字符串对象方法【例9-3】字符串对象修饰字符串方法的应用。项目9：贪食蛇游戏设计9.2字符串对象9.2.3字符串对象方法【例9-3】字符串对象修饰字符串方法的应用。

(1)编写网页界面,使用表格来规范各项输出内容的大小和位置

(2)在<head></head>标记中添加网页读入事件处理onload()函数程序运行结果如图9-4所示。项目9：贪食蛇游戏设计9.2字符串对象9.2.3字符串对象方法【例9-4】字符串对象处理字符串方法的应用。项目9：贪食蛇游戏设计9.2字符串对象9.2.3字符串对象方法【例9-4】字符串对象处理字符串方法的应用。

(1)编写网页界面，使用表格来规范各项输出内容的大小和位置

(2)在<head></head>标记中添加网页读入事件处理onload()函数：程序运行结果如图9-5所示。项目9：贪食蛇游戏设计9.3贪食蛇游戏的设计贪食蛇游戏是Array对象、String对象、Window对象和Math对象等知识的综合应用，当然其中还用到了Document对象。

贪食蛇游戏要通过上、下、左、右四个方向键中任意一个按键开始，其它按键无效。

游戏的过程中可以实现蛇对食物的吞食，还可以进行游戏难度的设置，以及游戏得分记录。项目9：贪食蛇游戏设计9.3贪食蛇游戏的设计9.3.1贪食蛇游戏的界面设计与实现贪食蛇游戏的界面设计主要由两个分区构成，一个是标题区，另一个是游戏区。而游戏区又由三个部分构成，分别是游戏运行状态显示区，显示当前的得分及贪食蛇运动的速度；游戏操作区是食物随机产生以及贪食蛇可以运动的区域；帮助信息显示区主要提供游戏过程中可以使用的按键信息。

设计界面及其分区如图9-6所示。运行状态显示区

游戏操作区

帮助信息显示区项目9：贪食蛇游戏设计9.3贪食蛇游戏的设计9.3.1贪食蛇游戏的界面设计与实现1.主界面的设计与实现主界面中游戏标题、帮助信息通常不会发生改变，因此，采用静态的页面设计即可，而游戏运行状态区与操作区显示的信息需随游戏的进程而不断变化，因而采用动态页面。在代码实现上，标题采用标签<h2>定义，游戏区采用表格标签<table>定义，并使用水平分隔线标签<hr>对标题与游戏区进行分割。项目9：贪食蛇游戏设计9.3贪食蛇游戏的设计9.3.1贪食蛇游戏的界面设计与实现2.游戏状态显示与操作区的设计与实现贪食蛇游戏中运行状态显示区在主表格的第一行出现，游戏运行区则采用子表格的形式显示，表格中的单元格边框可以为用户的操作提供便利，同时表格以淡绿色为背景有益于用户视力保护。单元格的尺寸与数量以变量的形式确定，也为后期维护提供了便利。这一部分的实现采用函数形式，定义出相应的表格格式、表行格式以及单元格格式等，并采用二重嵌套循环的形式绘制出表格项目9：贪食蛇游戏设计9.3贪食蛇游戏的设计9.3.1贪食蛇游戏的界面设计与实现2.游戏状态显示与操作区的设计与实现表格画出后即依次调用初始化蛇头函数initSnake()和初始化食物函数initFood()。项目9：贪食蛇游戏设计9.3贪食蛇游戏的设计9.3.2贪食蛇游戏应用逻辑的设计与实现贪食蛇游戏首先是初始化，包括主界面、食物和蛇身的初始化。初始化完成后，只有当用户键入上、下、左、右四个方向键时才开始游戏，游戏初始或进行过程中用户可以按下F(f)键、S(s)键进行游戏速度的设置，也可以按下P(p)键进行游戏的暂停或继续。

游戏进行过程中用户通过方向键改变蛇的运动轨迹，当蛇头吞食到食物时蛇身会增长，当蛇头触及蛇身或障壁则游戏结束。游戏的程序流程图如图9-7所示。项目9：贪食蛇游戏设计9.3贪食蛇游戏的设计9.3.2贪食蛇游戏应用逻辑的设计与实现1.食物与贪食蛇的设计与实现食物及蛇是以单元格构成。食物以一个背景为绿色的单元格表示，可以在整个游戏操作区内随机出现；蛇身以若干背景为红色的单元格表示，游戏开始时蛇身由一个单元格构成，随着吞食食物而不断增加长度，并随着蛇头方向的改变而变换蛇身的形状。食物是通过Math对象的random()方法与parseInt()随机产生在游戏操作区的表格中，如果随机生成的表示食物的单元格与蛇身重合则重新生成。图9-8为食物产生的程序流程图项目9：贪食蛇游戏设计9.3贪食蛇游戏的设计9.3.2贪食蛇游戏应用逻辑的设计与实现1.食物与贪食蛇的设计与实现蛇身的设计分为初始化和移动两部分，初始化部分与食物生成类似，只是以红色的单元格表示，并且由于先生成蛇头，无需考虑与食物的重合问题。蛇身的移动是根据当前的方向键值确定蛇头的坐标，并将蛇尾擦除。在蛇移动的过程中，如果蛇头碰到壁障或蛇身，则游戏结束，可重新开始或退出；如果吃到食物，则蛇身增长，并产生新的食物。程序流程图如图9-9所示项目9：贪食蛇游戏设计9.3贪食蛇游戏的设计9.3.2贪食蛇游戏应用逻辑的设计与实现1.食物

人人文库> 全部分类> 行业资料 > 医学制药

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论