javascript的游戏程序设计方案与实现速算24.doc

JavaScript的游戏程序设计与实现-速算“24”目 录题目 3摘要 3关键词 3一 速算“24”游戏说明3二创建初始界面4 （一） 扑克牌显示区 4 （二） 计算区域5三自动发牌6 （一）制作图象文件6 （二）随机发牌6 （三）动态设置网页中图像的源文件7四添加按钮事件处理7 （一） 添加“开始”事件7 （二） 添加其余的事件7五即时显示表达式8（一）图片的数字显示8（二）运算符的显示9六计算表达式的值并反馈结果 10 （一）标准的JavaScript数学表达式11 （二） 对数学表达式的计算以及反馈11七获取时间和计时 12 （一）获取时间，实现计时 13 （二） 计时的停止 14 （三） 调用函数stoptime（）和ctime（）14 （四） 对时间的反馈 14总结 15参考文献 16附录 17JavaScript的游戏程序设计与实现 速算“24”摘要 JavaScript是一种易于使用的对象描述语言，它是为了创建真正的联机应用程序而设计的，无论是在用户端还是在服务器端，这种应用程序都可以将对象和资源连接在一起。运用JavaScript开发一个速算“24”游戏，该游戏实现如何在JavaScript中进行数学运算和相关处理以及如何实现计时。关键词 游戏 语言 动态显示 计时 运算 JavaScript 是由Java继承而来的，是一种面向对象的程序设计的脚本语言。JavaScript为Web页面设计人员提供了极大的灵活性和控制手段。他是一种优秀的“粘合剂”，能够将一个Web节点中的文字，图形，声音和动画等各种媒体形式捆绑在一起。下面我们将通过制作“速算24”这个游戏，来更深入的了解，学习JavaScript 。一 “速算24”游戏说明 “速算24”是一个考察心算能力，有助于智力开发的扑克游戏。给出4张扑克牌之后，要求应用这些扑克牌数字做数学运算，迅速构造出一个数学表达式得出结果24。 游戏的初始界面如下图所示 单击“开始”按钮开始游戏，系统自动发牌。如下图所示。 然后可以在计算器区域单击“扑克牌”以及运算符按钮进行运算，单击“计算”按钮时，系统会自动判断结果是否是24，并给出反馈信息，同时系统会自动计时。二 创建初始界面JavaScript是一个脚本语言，需要嵌套到HTML语言才能运行。所以，我们首先使用HTML语言来为该游戏创建一个简单的初始界面。游戏的网页界面分为2个区域：扑克牌显示区，计算区域。（一） 扑克牌显示区 首先创建扑克牌显示区。HTML语言有一个table表格属性。使用四个图像文件，将他们放入一个表格中，然后放入一个div，图像文件最初使用扑克牌的背景图片，在游戏过程中，将会动态改变这些图像的源文件，以显示系统所发的扑克牌的实际图像。在HTML文档的BODY区使用如下代码：          table border=0 bgcolor=black cellspacing=0 cellpadding=0 是表格的属性设置。 border=0 将表格设置为无边框 bgcolor=black 将表格颜色设置为黑色 cellspacing=0 cellpadding=0 表元间距和表元空隙均为0（二）计算区域 计算区域是用户进行操作的主要区域，因此比较复杂。同样，我们使用一个表格来进行布局，这个表格放入到一个div中并居中。由于使用了大量的按钮，所以将这些按钮放入到一个表单中。在HTML文档的BODY区使用如下代码： 一共设置了11个操作按钮和运算符按钮，其属性和作用如下表所示 按钮序号Name属性Value 属性作用1 B6 + 加法运算符 2 B7 - 减法运算符 3 B8 * 乘法运算符 4 B9 / 除法运算符 5 B10 （ 左括号 6 B11 ） 右括号 7 B12 计算 计算表达式的值 8 B13 无解 让用户选择“无解” 9 B14 重玩 重新开始同一局 10 B16 显示运算表达式 11 B17 00：00 显示时间 在默认情况下，浏览器会自动给出按钮尺寸，大小为刚好显示按钮上的文字，因此，调整按钮大小的最简单的方法，就是在按钮的显示文字中添加适当数目的空格。 至此，我们已经设置好了游戏的初始界面。三 自动发牌单击“开始”按钮时，系统需要随机地发出4张纸牌，显示在扑克牌显示区。同时，在计算器区域，也要显示相对应的4张缩略图。（一） 制作图象文件首先，要制作10个图像文件，分别为10张扑克牌的图片（即A，2，3，4，5，6，7，8，9，10）。并将图像文件根据大小命名，规则如下： A，2，直到10，依次命名为：1.jpg10.jpg 如何制作这些扑克牌图片呢？ 在windows 附件的游戏中有一个纸牌游戏，里面有扑克牌的图像，因此我们可以利用它制作我们所需要的图象文件。方法：先运行这个纸牌游戏，找到你想要的牌，然后运行QQ程序，利用QQ程序里面的抓图工具，将你所需要的图片抓下来并保存在特点的文件夹里面，并按照上面的命名规则命名。此外还要制作一张图片作为背景图像，保存为background.jpg 。例如： background.jpg（二） 随机发牌 要实现随机发牌效果，需要用到随机函数，利用一个循环，产生4个1到10之间的随机数，然后根据随机数的大小将网页中的图像的源文件指向相应的图像文件。首先定义一个全局变量flag，用于标识游戏是否已经开始，在发牌之前将flag设置为true，然后创建一个数组变量index，长度为4，用于存放扑克牌图像文件的文件名。 JavaScript提供了一个随机函数用以生成一个随机数，该函数是Math对象的一个方法：Math.random（）；它返回一个随机生成的小数。将其乘以10，然后利用Math.floor()函数向下取整，即得到一个介于0和9之间的随机整数（包括0和9），代码如下： var index=new Array(4); function deal1() flag=true; for(i=0;i4;i+) indexi=Math.floor(Math.random()*10)+1; （三）动态设置网页中图像的源文件 获取了4个随机数后，要根据它们来动态设置扑克牌显示区的4个图像的源文件，以显示随机抽取的4张扑克牌。通过JavaScript的对象模型，对网页中图像的控制是十分容易的。因为所有的图像均以数组项的形式保存在数组images中，该数组是document对象的一个子对象。数组的下标从0开始，有images0，images1直到imagesn，按照图像在网页中出现的先后顺序，下标从0开始依次增大。他们包含了出现在网页中的图像的各种属性，如下： src ：图像的源文件，为一个字符串变量 border：图像的边框大小 height：图像的显示高度，单位为像素 width ：图像的显示宽度，单位为像素因此，在上面的deal1（）函数中，添加如下代码，即可以达到动态设置图像源文件的目的： document.imagesi.src=D:/扑克/+indexi+.jpg; document.images4+i.src=D:/扑克/+indexi+.jpg;四 添加按钮事件处理在前面，我们已经成功地进行了扑克牌的随机分发。但是何时发牌呢？如何实现发牌呢？当用户单击按钮时，如何实现操作呢？这就需要添加事件处理函数，来实现目的。（一） 添加“开始”事件单击“开始”按钮时，需要发牌，这要通过调用deal（）函数实现。如何调用函数呢？JavaScript中给出了一种Click事件，用来响应单击按钮之类的操作。例如：如果要实现“开始”按钮，只需要添加如下代码：在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript的内部函数，还可以直接使用JavaScript代码。（二）添加其余的事件有的游戏局是没有无解的，比如4个A，无论如何运算也不能得到24。这时可以单击“无解”按钮，标识此局无解，同时开始新的一局。“无解”按钮的Click事件处理代码如下：同理可以为“计算”，“重玩”添加事件处理如下：五 即时显示表达式在发牌之后，用户可以开始运算，具体的操作方式是用户可以单击计算器区域的图片和运算符，组成数学表达式，就像使用计算器那样。该数学表达式会即时显示在最下面的长条形按钮上。下面我们来实现这一点。（一） 图片的数字显示扑克牌和数字的对应关系如下： 与花色无关 点数2到10对应的数字是2到10 A对应的数字是1用户可以直接单击代表扑克牌的4张缩略图，这时相应的数字即显示在长条形的按钮上。 如下图所示： 这里我们创建一个函数showpic（x），以正确显示数学表达式中的数字。该函数有一个参数，用来获取图像的位置。1 我们先将图像转换成数字。由于扑克牌的图像是通过数组项indexind来指定源文件的，因此可以通过indexind将扑克牌转换成对应的数字。这里需要调用JavaScript的parseFloat（）函数。该函数是用于把一个字符串转换为浮点形式的数据，并返回转换结果。该函数对字符串中的每个字符进行转换，直到遇到非数字字符，这时停止转换，并返回已经转换了的结果。 具体代码如下： function ShowPic(ind) if(flag) oper=parseFloat(indexind); figsindF=oper; indF+; 2 将相应的数字显示到长条形按钮上。首先将oper 转换为字符串，然后改变长条形按钮的value属性值，将oper显示在长条形按钮上。其代码如下： oper=oper.toString(); jieguo=jieguo+oper; var val=document.form1.B16.value;document.form1.B16.value=(val+oper).substring(oper.length,val.length+oper.length+1);注意： 这里不是简单的将oper添加到长条形按钮的value属性值中，而是进行了较为复杂的处理。这是为了保持长条形按钮的形状不变，即保持value属性值的长度不变，在创建界面时，我们给长条形按钮的value属性赋了初值为一长串空格，这里再添加oper到value属性值的末尾，而同时在value属性值的开头去掉同样字符数的空格。函数substring（ind1，ind2）是string对象的一个重要方法，用于截取该字符串的一部分并返回结果，这一部分是从ind1序号开始，到ind2序号之前的一个字符串。注意序号是从0开始，直到字符串的长度减1（string.length-1）。3 单击扑克牌缩略图时，调用函数showpic（）。在前面已经介绍过JavaScript的Click事件。这里同样可以利用这一事件，在单击图片时调用函数showpic（）。代码如下：img border=0 name=B3 src=D:/扑克/backgroud.jpg height=120 onclick=ShowPic(2);（二） 运算符的显示用户在计算器区域单击运算符时，对应的运算符应显示在长条形的按钮上。如下图： 1 首先，确定运算符对应的显示。数组operator中存放了各运算符的字符串形式，代码如下： var operator=new Array(6); operator0=+;operator1=-;operator2=*;operator3=/;operator4=(;operator5=);2 运算符的即时显示通过函数ShowFuhao(ind)来显示运算符，该函数有一个参数ind，用于获取运算符的类型。这里使用的方法和前面显示数字的方法是相同的。这里将运算符放在数组operator中，并通过indo来控制数组项的下标。具体代码如下： var indO=0;function ShowFuhao(ind) if(flag) fig=operatorind; opersindO=fig; indO+; jieguo=jieguo+fig; var val=document.form1.B16.value;document.form1.B16.value=(val+fig).substring(fig.length,val.length+fig.length+1); 3 单击运算符按钮时，调用ShowFuhao(ind)函数同样也是调用click事件。具体代码如下： 六 计算表达式的值并反馈结果当用户输入完表达式，可以单击“计算”按钮对结果进行计算。这时，游戏回计算表达式的值，并给出反馈。如下图所示：（一） 标准的JavaScript数学表达式首先，需要定义一个变量表达式jieguo，用于存放数学表达式，为该变量赋初值为空格。代码如下：var jieguo=;在显示数字很运算符的同时，在jieguo中保存数学表达式。因为最后的计算是对jieguo求值，所以jieguo应该是标准的JavaScript数学表达式，它并不完全等同于在长条按钮上显示的数学表达式。在用于显示数字的函数showpic（）中添加代码 jieguo=jieguo+oper;在用于显示运算符的函数showfuhao（）中添加代码 jieguo=jieguo+oper;这样就可以在jieguo中保存数学表达式。（二） 对数学表达式的计算以及反馈在用户单击“计算”按钮后，要对数学表达式进行计算，并对用户给出反馈信息。1 数学表达式进行计算这里的计算是很容易的。首先定义了一个变量rs，用于存放计算结果，而计算通过函数eval（）完成。代码如下：var rs;rs=eval(jieguo.toString();eval（）函数是JavaScript中用于计算表达式的值，表达式可以是字符串形式的数学表达式。2 根据计算结果作出反馈反馈包括2个方面，如下： 在长条形按钮上显示等号（=）和计算结果。 通过警示对话框给出反馈信息，如果结果为24，则反馈“运算成功！”，否则反馈“错了错了！再接再厉！”。在JavaScript中定义了一个alert方法。其功能是弹出一个具有“弹出”按钮的对话框，并显示一个已经定义的字符串。当alert（）函数执行时，将弹出一个对话框，同时浏览器对整个HTML文档的解释执行将暂停，只要当访问者单击“确定”按钮后，浏览器才会继续执行HTML文档的后续部分。反馈实现的代码如下： function deal4() /计算 var rs; if(flag) rs=eval(jieguo.toString(); val=document.form1.B16.value; document.form1.B16.value=document.form1.B16.value.substring(rs.toString().length+1,34)+=+rs; if(rs=24) alert(运算成功！太棒了！); stoptime();deal2() ; else alert(结果错误！继续加油！); document.form1.B16.value= ; jieguo=; 3 运算结果的改进 上面代码是将结果与24进行比较。由于在表达式中可能用到了除法运算，所以结果可能并不是24，而是诸如23.9999999或是24.0000001的形式，例如： 8/（3-8/3）=23.9999999这是由于计算机对分数的表示形式造成的。对这种情况必须进行校正，因此必须对代码进行改进。 在JavaScript中Math对象中定义了一个abs（x）方法，用于返回x的绝对值。这样对于类似于8/（3-8/3）这样的表达式，程序就会得出正确的判断。修改后的代码如下：if(Math.abs(rs-24)0.001) rs=24; alert(运算成功！太棒了！);七 获取时间和计时上面我们已经完成了发牌，表达式的显示，计算和反馈等步骤，现在我们来实现“计时”功能，即自动记录用户完成一局游戏所花费的时间。（一） 获取时间，实现计时在这个游戏中，我们要对用户完成一局游戏所用的时间进行记录，方法是在用户开始游戏时记录下此时的时间，然后在用户完成游戏时记录下那时的时间，两者相减，即得出了用户完成一局游戏所用的时间。1 创建一个全局变量 JavaScript用Date对象封装了各种和时间有关的方法，用于处理有关日期和时间的问题。Date对象和Aarry对象一样，是内部动态对象，即必须使用new运算符创建一个实例，然后对实例进行引用。例如： Day= new Date（）；2 获取当前时间为此，新定义一个变量ct，用于标识一局游戏是否处于刚开始的时刻，并在游戏开始时，创建一个Date对象的实例day。代码如下： var ct; function creat() if(ct=true) day=new Date(); miVisit=day.getTime(); ct=false; 上面使用了Date（）对象的一个方法getTime（）。该方法用于获取日期，它返回一个毫秒数，这个毫秒书是相对于日期的起始值而言的。在JavaScript中，假定的日期起始值为1970年1月1日00：00：00。 由于ct是一个全局变量，而非内部变量，所以游戏一旦开始，ct的值就变成false，即使再次调用函数，记录开始时刻的变量miVisit的值也不会被覆盖，不会在改变。同理，在一局游戏结束时，再次调用ctime() 函数，获取此时的时间，代码如下： today=new Date(); var miNow=today.getTime();3 计算时间 上面已经获得了用户开始和结束时的时间，将两者相减，就可以得出用户游戏所花的时间（单位是毫秒），代码如下： milliNow=miNow-miVisit;由于上面得出的时间单位是毫秒数，所以需要将其转换成“分：秒”的形式。代码如下： milliNow=(milliNow-milliNow%1000)/1000; minsUsed=(milliNow-milliNow%60)/60; secsUsed=milliNow%60;最后，还需要做一点处理，即当秒数小于10 时，根据习惯的时间显示格式，应该在秒数之前添加一个0，如下图： 实现代码如下： if(secsUsed10) document.form1.B17.value= +minsUsed+:0+secsUsed+ ; else document.form1.B17.value= +minsUsed+:+secsUsed+ ;4 实现计时 如果我们每秒执行一次ctime()函数，那么就可以动态的显示时间了。 JavaScript中用于控制时间的方法是windows对象的setTimeout（）方法，格式如下：SetTimeout（expression time）；其中，time是一个用于设置时间的数值，单位为毫秒，expression为任意合法表达式。该方法的目的是在time毫秒数之后执行表达式expression设定的内容。有了setTimeout（）这个方法，我们就可以很方便的控制执行ctime()函数了。 if (ct=false) setTimeout(ctime(),1000); （二） 计时的停止在一局游戏完成或者被终止时，应该停止计时，这通过函数stoptime（）来完成。Stoptime（）函数非常简单，只要把ct的值标识为true，同时还要将时间显示区域的value值标识成“00：00”即可。代码如下： function stoptime() ct=true; milliNow=0; document.form1.B17.value= 00:00 ; 这样，当ctime（）再次被执行时，mivisit的值将被刷新，于是实现了重新计时。（三） 调用函数stoptime（）和ctime（）上面已经定义好了计时函数ctime（），停止计时函数stoptime（）。下面通过给不同按钮添加Click事件来调用该函数。1 在“开始”按钮的Click事件处理中添加对stoptime（），ctime（）函数的调用。代码如下： 2 在“无解”按钮的Click事件处理中添加对stoptime（）和ctime（）的调用。对于无解的局，用户可以单击“无解”按钮，这时将开始一局新游戏，这时需要重新发牌并重新计时。代码如下： （四） 对时间的反馈 在用户完成了一局游戏，单击“计算”按钮时，在反馈信息中也给出了用户所花费的时间。这只需要在deal4()中添加如下代码即可：if(Math.abs(rs-24)0.001) rs=24; alert(运算成功！太棒了！用时+minsUsed+分+secsUsed+秒！);stoptime(); deal2() ;效果如图： 至此，我们完成了这个游戏制作的全部过程。总结 通过上面的例子我们可以更深入的了解JavaScript的内置对象和函数。 JavaScript是为了满足Web用户对声音，影像，三维动画等信息资源无止境的渴求而被开发出来的。它是一个功能非常强大的基于对象的脚本语言。它有如下特点：1 JavaScript是基于对象的语言面向对象程序设计语言中将相同类型的对象作为一个类被组合在一起。基于对象的语言也是一种面向对象语言，我们不必去创建一些新的对象，因为该语言已经封装了很多对象，而我们只需要直接使用它就可以了。例如：“日期 Day”这个对象，我们只需要声明一下（day= new Date（）；）就可以直接使用了。2 JavaScript是事件驱动的语言我们在Web主页中进行的任何操作都会产生一个“事件”。JavaScript是事件驱动的，当事件发生时，它可以对之做出响应。具体如何响应某个时间取决与你的事件响应处理程序。例如： 单击“开始”按钮就会产生一个事件（系统会自动发牌，计时器自动开始计时）。这一事件响应处理程序就是deal( ) 函数。3 JavaScript 是与平台无关的语言对于一般的计算机程序，他们的运行都与平台有关。但是，JavaScript则不依赖于具体的计算机平台，它只与解释它的浏览器有关。不论你使用Macintosh还是Windows，或是Netscape Navigator，JavaScript都可以正常运行。这是它的一大优点。同其它任何一种语言一样，JavaScript也有它自己的不足之处：1 JavaScript是一种脚本语言，它没有特定的编译工具，只是在浏览器中被解释执行。所以一旦出现任何差错，就会造成程序无法运行，而不会提示问题出现在何处。非常不方便。所以编写JavaScript需要程序员有足够的仔细和耐心和非常好的编程风格。2 JavaScript不能与后台数据库连接。虽然JavaScript可以制作出非常漂亮的动态页面效果，但是只是拥有一个华丽的外表而已，它根本无法与后台数据库连接。The game designs program and realizes by JavaScript - Calculate 24 quickly Abstract JavaScript is that a kind of target easy to use describes languages, it is designed in order to establish real on-line application program, or in the end of the server,