版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
JavaScript程序设计教程项目7：数字拼图游戏项目7：数字拼图游戏7.1功能与技术分析7.1.1功能分析程序运行界面如图7-1所示。项目7：数字拼图游戏7.1功能与技术分析7.1.2技术分析项目中主要使用了HTML的表格构建游戏的基本框架，以单元格作为游戏的基本元素，用户可以通过下拉列表选择表格中单元格的数量。
在游戏初始化时，按规则随机在单元格内填入相应的数字，有且仅有一个单元格为空白。在游戏中用户可以利用方向键将空白单元格与其周围数字或子图像互换从而实现数字的移动，最终完成数字按顺序或子图像按原图排列。
在项目中除了HTML和JavaScript基本知识外，涉及的技术主要包括数组和键盘事件等。项目7：数字拼图游戏7.2键盘事件键盘事件是JavaScript程序与用户交互最常使用的事件，与之相关的事件处理程序通过键盘的点击、释放等事件触发。7.2.1键盘事件的触发条件
JavaScript中常见的与键盘相关的事件、事件处理程序及其触发条件如表7-1所示。事件事件处理程序触发条件Keydownonkeydown键盘某按键按下Keypressonkeypress键盘某按键按住Keyuponkeyup键盘某按键（按下后）释放项目7：数字拼图游戏7.2键盘事件7.2.1键盘事件的触发条件当按下键盘键时，会连续触发多个事件，它们将按顺序发生。
(1)对于字符键来说，键盘事件的响应顺序为：Keydown→keypress→keyup
(2)对于非字符键（如功能键或特殊键）来说，键盘事件的响应顺序为：Keydown→keyup项目7：数字拼图游戏7.2键盘事件7.2.1键盘事件的触发条件当按下键盘键时，会连续触发多个事件，它们将按顺序发生。
(3)如果按下字符键不放，则Keydown和keypress事件将逐个持续发生，直至松开按键。
(4)如果按下非字符键不放，则只有Keydown事件持续发生，直至松开按键。项目7：数字拼图游戏7.2键盘事件7.2.2键盘事件处理程序与键盘输入事件相关的事件处理程序包括onkeydown、onkeyup、onkeypress三个。
它们分别可以完成键盘按下、键盘释放和键盘按下并释放等的检测，每一个典型的按键操作都会产生上述事件处理程序对应的事件。
它们的顺序依次为Keydown事件、Keypress事件，然后是Keyup事件。当然，onkeydown、onkeyup与onkeypress三个事件处理程序并不是层次完全等同的，它们不仅对用户按下键盘事件的响应有所差异，而且对于不同类型的浏览器也不尽相同。项目7：数字拼图游戏7.2键盘事件7.2.2键盘事件处理程序onkeydown和onkeyup是属于底层的事件处理程序，可以捕获到除prtscrn外的所有按键事件。但事件截获的位置不同，并且它们仅仅是对按键的捕获，不会解析按键的组合。
onkeypress是相对于字符层面的事件处理程序，不能对系统功能键（例如：后退、删除等）进行正常的响应，并且对中文输入法也不能有效响应。但对可以打印的字符键均可以捕获，而且可以完成按键组合的解析。项目7：数字拼图游戏7.2键盘事件7.2.2键盘事件处理程序由于onkeypress不能对系统功能键进行捕获，导致window.event对象的keyCode属性值与onkeydown，onkeyup键盘事件中获取的keyCode属性值不同。
主要表现在onkeypress事件处理程序的keyCode属性对字母的大小写敏感，而onkeydown、onkeyup事件处理程序不敏感；
onkeypress事件的keyCode属性值无法区分主键盘上的数字键，还是副键盘数字键，而onkeydown、onkeyup事件处理程序的keyCode属性值对主、副键盘的数字键敏感。项目7：数字拼图游戏7.2键盘事件7.2.3键盘事件的初始化在实际的应用中，要实现对按下键盘事件的捕获，一种方式是在HTML标签中设置相应的事件处理程序具体语句如下：<bodyonkeypress
="keyPressFunction()">。在实际的使用中不一定是<body>标签，可以支持键盘事件的标签有很多，详细的可以查阅相关的参考手册。项目7：数字拼图游戏7.2键盘事件7.2.3键盘事件的初始化对于键盘事件捕获的另一种方式是在JavaScript程序中设置相应的如下语句：document.
onkeypress=
keyPressFunction;function
keyPressFunction
(){……}
当浏览器读到这个语句时，无论按下键盘上的哪个键，都将调用keyPressFunction()函数。项目7：数字拼图游戏7.2键盘事件7.2.3键盘事件的初始化同样，对于键盘释放和键盘按住操作可以通过下面的语句实现事件的捕获：document.onkeyup
=keyUpFunction;functionkeyUpFunction(){……}和document.onkeydown=keyDownFunction;
functionkeyDownFunction(){……}项目7：数字拼图游戏7.2键盘事件7.2.3键盘事件的初始化其中,keyDownFunction、keyUpFunction和keyPressFunction为各事件处理程序对应的函数，由用户自行定义。
当相应事件发生时，各对应函数便执行用户定义的操作，需要注意的是在使用这种函数分配方式时，事件处理程序名称必须小写，即onkeypress，onkeyup和onkeydown必须是小写字母，否则不能正确捕获相应的事件。
与Keypress类似，Keyup和Keydown事件也可以通过加载在HTML标签中的形式来实现捕获。项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器对于不同的浏览器在使用键盘事件处理程序时有所不同。
基于IE内核的浏览器在键盘事件中只有一个keyCode属性，对于Keydown和Keyup事件，keyCode属性值表示所按下的具体键(也称为virtualkeycode)，而Keypress事件keyCode属性值是指所键入的字符(charactercode)。
与基于IE内核的浏览器相比，基于Mozilla内核的Firefox及Opera对于键盘事件的响应情况有些不同。
Firefox浏览器的event对象不包含keyCode属性但有which和charCode属性，而Opera中有which和keyCode属性。项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器在基于IE内核的浏览器中onkeypress不能捕获到系统功能键，但在基于Mozilla内核的Firefox中“PgUp”、“PgDn”等功能按键却能够产生Keypress事件。项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器
(1)FireFox和Opera的实现方法
keyDown()函数有一个隐藏的变量，一般使用字母“e”来表示此变量，当然也可以用其它的变量名。function
keyDown(e)变量e表示发生击键事件，寻找是哪个键被按下，要使用which属性：e.which
e.which将给出该键的键码，把键码转化成该键的字母或数字值的方法需要用到静态函数String.fromCharCode()：String.fromCharCode(e.which)
项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器
(1)FireFox和Opera的实现方法把上面的语句放在一起，就可以在FireFox中得到被按下的是哪一个键：function
keyDown(e)
{
var
keycode
=
e.which;
var
realkey
=
String.fromCharCode(e.which);
alert("按键码:
"
+
keycode
+
"字符:
"
+
realkey);
}
document.onkeydown
=
keyDown;项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器
(2)IE的实现方法
IE的程序不需要e变量，用window.event.keyCode来代替e.which：function
keyDown()
{
var
keycode
=
event.keyCode;
var
realkey
=
String.fromCharCode(event.keyCode);
alert("按键码:
"
+
keycode
+
"字符:
"
+
realkey);
}document.onkeydown
=
keyDown;
项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器表7-2给出了三个不同的浏览器的不同事件与事件属性的对应关系，为键盘事件的编程提供参考。浏览器KeydownKeypressKeyupIEkeyCode=键码keyCode=键码keyCode=字符编码Firefoxwhich=键码charCode=0which=键码charCode=0which=字符编码charCode=字符编码OperakeyCode=键码charCode=键码keyCode=键码charCode=键码keyCode=字符编码which=字符编码项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器由表7-2可知，不同的浏览器支持不同的事件属性。为兼容这几种浏览器，往往在JavaScript编程时需进行浏览器类型的判断，针对不同类型的浏览器采用不同的事件属性去实现键值或键字符的获取。项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器函数实现如下：functionkeyDownFunction(e){
if
(navigator.appName=="MicrosoftInternetExplorer"){
varkeycode=event.keyCode;
varkeyname
=String.fromCharCode(event.keyCode);
}
else
if(navigator.appName=="Netscape"){
varkeycode=e.which;
varkeyname
=String.fromCharCode(e.which);
}...}
项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器当然上面的函数也可以简写为如下形式：functionkeyDownFunction(e){
varkeycode
=0,e=e||event;
keycode
=e.keyCode||e.which||e.charCode;
varkeyname=String.fromCharCode(keycode);}其中，代码e
=
e
||
event是为了进行浏览器事件对象获取的兼容。在JavaScript中，代码的意义如下:
如果在FireFox或Opera中，隐藏的变量e存在，那么e
||
event返回e，如果在IE中，隐藏变量e不存在，则返回event。项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器当然上面的函数也可以简写为如下形式：functionkeyDownFunction(e){
varkeycode
=0,e=e||event;
keycode
=e.keyCode||e.which||e.charCode;
varkeyname=String.fromCharCode(keycode);}代码keycode
=
e.keyCode
||
e.which
||
e.charCode是为了兼容浏览器按键事件对象的按键码属性，如IE中，只有keyCode属性，而FireFox中有which和charCode属性，Opera中有keyCode和which属性等。项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器【例7-1】键盘事件处理程序的使用:测试按键及其键码.仅按下字符键“A”时，由onKeyDown事件捕获的按键码为65，键名为“A”，而由onKeyPress事件捕获的按键码为97，键名为“a”，如图7-2左所示；
如果同时按下功能键“Shift”和数字键“6”，则onKeyDown事件捕获的按键码为54，键名为“6”，并且捕捉到功能键“Shift”，而由onKeyPress事件捕获的按键码为94，键名为“^”，同时也捕捉到功能键“Shift”，如图7-2右所示。项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器【例7-1】键盘事件处理程序的使用:测试按键及其键码.程序设计过程如下：
(1)编写网页界面，使用表格来规范各项输出内容的大小和位置其中，事件处理程序的初始化在load事件中：<bodyonload="init()">项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器【例7-1】键盘事件处理程序的使用:测试按键及其键码.
(2)程序的运行流程为：打开网页首先触发初始化函数，其中完成键盘事件的初始化；通过按键依次触发showKeyDown函数和showKeyPress函数。functioninit(){
document.onkeydown=showKeyDown
document.onkeypress=showKeyPress}项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器【例7-1】键盘事件处理程序的使用:测试按键及其键码.
(3)函数showKeyDown处理按键的捕获：
(4)函数showKeyPress处理按键的捕获：functionshowKeyPress(evt){
evt=evt||window.event
currKey=evt.keyCode||evt.which||evt.charCode;
varkeyName=String.fromCharCode(currKey);
$("pressKeyCode").innerHTML=currKey;
$("pressCharCode").innerHTML=keyName;
showModifiers("",evt)}项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器【例7-1】键盘事件处理程序的使用:测试按键及其键码.
(5)函数showModifiers处理功能键的判断与显示：functionshowModifiers(ext,evt){
if(evt.keyCode==37)$(ext+"Key").innerHTML="←";
if(evt.keyCode==38)$(ext+"Key").innerHTML='↑';
if(evt.keyCode==39)$(ext+"Key").innerHTML='→';
if(evt.keyCode==40)$(ext+"Key").innerHTML='↓';
if(evt.shiftKey)$(ext+"Key").innerHTML="shift"
if(evt.ctrlKey)$(ext+"Key").innerHTML="ctrl"
if(evt.altKey)$(ext+"Key").innerHTML="alt"}项目7：数字拼图游戏7.2键盘事件7.2.4兼容浏览器【例7-1】键盘事件处理程序的使用:测试按键及其键码.从上面的介绍可知，对于可打印的字符通常使用onkeypress事件处理程序获取相应的键码，特别是需要区分大小写和数字时。当遇到onkeypress不支持功能按键时，则应该用keydown/keyup事件来进行补充。项目7：数字拼图游戏7.3数字拼图的设计与实现7.3.1数字拼图游戏的界面设计与实现数字拼图游戏的界面由三个部分构成，分别是游戏运行状态显示区，显示当前的移动步数和游戏已经进行的时间长度；游戏操作区，是数字单元格与空白单元格在方向键的控制下移动的区域；游戏设置与帮助信息区，主要提供游戏的难度设置及游戏重置，还有游戏可以使用的按键等帮助信息。游戏界面及其分区轮廓如图7-3所示。运行状态显示区
游戏操作区
游戏设置及帮助信息区项目7：数字拼图游戏7.3数字拼图的设计与实现7.3.1数字拼图游戏的界面设计与实现1.主界面的设计与实现游戏界面中运行状态显示区的形状与游戏设置及帮助信息通常不会发生改变，因此采用静态的页面设计即可，而游戏操作区的表格形状及的游戏信息需随游戏的进程而不断变化，因而采用动态页面。在代码实现上,运行状态显示区直接采用一行两列的表格定义，其中两个单元格中均以<span>块接收代码输出的信息;游戏操作区以<div>块接收代码输出的游戏表格信息;而游戏设置及帮助信息区则直接使用表单对象“下拉列表”和“命令按钮”。项目7：数字拼图游戏7.3数字拼图的设计与实现7.3.1数字拼图游戏的界面设计与实现2.游戏状态显示与操作区的设计与实现数字拼图游戏的操作区以表格形式出现。表格中的单元格边框可以为用户的操作提供便利，同时表格以淡绿色为背景有益于用户视力保护。单元格的尺寸与数量以变量的形式确定，为后期维护提供了便利。游戏操作区采用函数的形式实现，在定义出相应的表格格式、表行格式以及单元格格式后，采用二重嵌套循环的形式绘制出表格项目7：数字拼图游戏7.3数字拼图的设计与实现7.3.1数字拼图游戏的界面设计与实现2.游戏状态显示与操作区的设计与实现项目7：数字拼图游戏7.3数字拼图的设计与实现7.3.2数字拼图游戏应用逻辑的设计与实现数字拼图游戏在逻辑上主要包括主界面、数字分布和游戏运行状态的初始化。
初始化完成后，只有当用户键入上、下、左、右四个方向键时才开始游戏。用户通过方向键将空白单元格与其周围的数字进行交换，最终目标是将所有的数字按照从小到大的顺序排列在各个单元格中，即完成游戏。
游戏的程序流程图如图7-4所示。项目7：数字拼图游戏7.3数字拼图的设计与实现7.3.2数字拼图游戏应用逻辑的设计与实现1.数字随机分布的设计与实现按照游戏规则，数字必须是随机分布在设定的单元格中，并且有一个单元格为空白，而且数字排列的逆序数为偶数，这样才能保证最终可以通过交换完成数字的顺序排列。数字的随机分布由数组的sort()方法实现，具体的实现见随机布局函数initNums()：随机布局函数接受数组的最新长度x作为参数，首先使用数组对象的splice方法按照新的长度x删除数组NumArr中的多余元素，并初始化该数组，依次填入1～x。项目7：数字拼图游戏7.3数字拼图的设计与实现7.3.2数字拼图游戏应用逻辑的设计与实现1.数字随机分布的设计与实现数字的随机分布由数组的sort()方法实现，具体的实现见随机布局函数initNums()：然后利用数组对象的sort方法对数组元素随机排序，这里使用do循环反复排序，终止循环的条件是排序后随机数字序列的“逆序数”为偶数。接下来，利用for循环将数组中的随机数列写入表格中，注意最末一位数“做空”。最后是将输出的步数和计时信息等初始化。项目7：数字拼图游戏7.3数字拼图的设计与实现7.3.2数字拼图游戏应用逻辑的设计与实现1.数字随机分布的设计与实现在数字分布中，随机数字序列的逆序数的奇偶性必须与原始的顺序排列的数列一致，也就
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- GB/T 20801.5-2025压力管道规范第5部分：氢用管道
- 2025年高职船舶工程技术（船舶舾装工艺）试题及答案
- 2025年大学护理学（急危重症监护）试题及答案
- 2025年中职区块链技术（区块链基础原理）试题及答案
- 2025-2026年五年级科学（专项突破）下学期期中测试卷
- 八年级化学（化学方程式）2026年上学期期中测试卷
- 2025年大学服装与服饰设计（服装设计）试题及答案
- 大学（经济学）国际经济学基础2026年阶段测试题及答案
- 2025年中职环境监测技术（大气监测）试题及答案
- 2025年高职（铁道工程技术）铁道线路施工试题及答案
- 通信铁塔施工安全培训课件
- 2025年辐射安全与防护培训考试试题及答案
- 西点烘焙考试及答案
- 医疗器械质量管理体系培训
- 护工岗位职责课件
- 新生儿溶血症课件
- 2025年国家gcp培训考试题库一套及答案
- 内镜下逆行阑尾炎治疗术
- 2025新版国家心力衰竭诊断和治疗指南
- 口腔种植无菌操作规范
- 上海延安中学2026届中考语文考前最后一卷含解析
评论
0/150
提交评论