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

一共设置了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.jpg～10.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），代码如下：

varindex=newArray（4）;

functiondeal1（）

{

flag=true;

for（i=0;i<4;i++）

{

index[i]=Math.floor（Math.random（）*10）+1;

}

}

（三）动态设置网页中图像的源文件

获取了4个随机数后，要根据它们来动态设置扑克牌显示区的4个图像的源文件，以显示随机抽取的4张扑克牌。

通过JavaScript的对象模型，对网页中图像的控制是十分容易的。

因为所有的图像均以数组项的形式保存在数组images[]中，该数组是document对象的一个子对象。

数组的下标从0开始，有images[0]，images[1]直到images[n]，按照图像在网页中出现的先后顺序，下标从0开始依次增大。

他们包含了出现在网页中的图像的各种属性，如下：

·src：

图像的源文件，为一个字符串变量

·border：

图像的边框大小

·height：

图像的显示高度，单位为像素

·width：

图像的显示宽度，单位为像素

因此，在上面的deal1（）函数中，添加如下代码，即可以达到动态设置图像源文件的目的：

document.images[i].src="D:

/扑克/"+index[i]+".jpg";

document.images[4+i].src="D:

/扑克/"+index[i]+".jpg";

四添加按钮事件处理

在前面，我们已经成功地进行了扑克牌的随机分发。

但是何时发牌呢？

如何实现发牌呢？

当用户单击按钮时，如何实现操作呢？

这就需要添加事件处理函数，来实现目的。

（一）添加“开始”事件

单击“开始”按钮时，需要发牌，这要通过调用deal（）函数实现。

如何调用函数呢？

JavaScript中给出了一种Click事件，用来响应单击按钮之类的操作。

例如：

如果要实现“开始”按钮，只需要添加如下代码：

在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript的内部函数，还可以直接使用JavaScript代码。

（二）添加其余的事件

有的游戏局是没有无解的，比如4个A，无论如何运算也不能得到24。

这时可以单击“无解”按钮，标识此局无解，同时开始新的一局。

“无解”按钮的Click事件处理代码如下：

同理可以为“计算”，“重玩”添加事件处理如下：

五即时显示表达式

在发牌之后，用户可以开始运算，具体的操作方式是用户可以单击计算器区域的图片和运算符，组成数学表达式，就像使用计算器那样。

该数学表达式会即时显示在最下面的长条形按钮上。

下面我们来实现这一点。

（一）图片的数字显示

扑克牌和数字的对应关系如下：

·与花色无关

·点数2到10对应的数字是2到10

·A对应的数字是1

用户可以直接单击代表扑克牌的4张缩略图，这时相应的数字即显示在长条形的按钮上。

如下图所示：

这里我们创建一个函数showpic（x），以正确显示数学表达式中的数字。

该函数有一个参数，用来获取图像的位置。

1我们先将图像转换成数字。

由于扑克牌的图像是通过数组项index[ind]来指定源文件的，因此可以通过index[ind]将扑克牌转换成对应的数字。

这里需要调用JavaScript的parseFloat（）函数。

该函数是用于把一个字符串转换为浮点形式的数据，并返回转换结果。

该函数对字符串中的每个字符进行转换，直到遇到非数字字符，这时停止转换，并返回已经转换了的结果。

具体代码如下：

functionShowPic（ind）

{

if（flag）

{

oper=parseFloat（index[ind]）;

figs[indF]=oper;

indF++;

}

}

2将相应的数字显示到长条形按钮上。

首先将oper转换为字符串，然后改变长条形按钮的value属性值，将oper显示在长条形按钮上。

其代码如下：

oper=oper.toString（）;

jieguo=jieguo+oper;

varval=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（）。

代码如下：

/扑克/backgroud.jpg"height="120"onclick="ShowPic（0）;">

/扑克/backgroud.jpg"height="120"onclick="ShowPic

（1）;">

imgborder="0"name="B3"src="D:

/扑克/backgroud.jpg"height="120"onclick="ShowPic

（2）;">

/扑克/backgroud.jpg"height="120"onclick="ShowPic（3）;">

（二）运算符的显示

用户在计算器区域单击运算符时，对应的运算符应显示在长条形的按钮上。

如下图：

1首先，确定运算符对应的显示。

数组operator中存放了各运算符的字符串形式，代码如下：

varoperator=newArray（6）;

operator[0]="+";

operator[1]="-";

operator[2]="*";

operator[3]="/";

operator[4]="（";

operator[5]="）";

2运算符的即时显示

通过函数ShowFuhao（ind）来显示运算符，该函数有一个参数ind，用于获取运算符的类型。

这里使用的方法和前面显示数字的方法是相同的。

这里将运算符放在数组operator中，并通过indo来控制数组项的下标。

具体代码如下：

varindO=0;

functionShowFuhao（ind）

{if（flag）

{fig=operator[ind];

opers[indO]=fig;

indO++;

jieguo=jieguo+fig;

varval=document.form1.B16.value;

document.form1.B16.value=（val+fig）.substring（fig.length,val.length+fig.length+1）;}}

3单击运算符按钮时，调用ShowFuhao（ind）函数

同样也是调用click事件。

具体代码如下：

（1）;">

（2）;">

六计算表达式的值并反馈结果

当用户输入完表达式，可以单击“计算”按钮对结果进行计算。

这时，游戏回计算表达式的值，并给出反馈。

如下图所示：

（一）标准的JavaScript数学表达式

首先，需要定义一个变量表达式jieguo，用于存放数学表达式，为该变量赋初值为空格。

代码如下：

varjieguo="";

在显示数字很运算符的同时，在jieguo中保存数学表达式。

因为最后的计算是对jieguo求值，所以jieguo应该是标准的JavaScript数学表达式，它并不完全等同于在长条按钮上显示的数学表达式。

在用于显示数字的函数showpic（）中添加代码

jieguo=jieguo+oper;

在用于显示运算符的函数showfuhao（）中添加代码

jieguo=jieguo+oper;

这样就可以在jieguo中保存数学表达式。

（二）对数学表达式的计算以及反馈

在用户单击“计算”按钮后，要对数学表达式进行计算，并对用户给出反馈信息。

1数学表达式进行计算

这里的计算是很容易的。

首先定义了一个变量rs，用于存放计算结果，而计算通过函数eval（）完成。

代码如下：

varrs;

rs=eval（jieguo.toString（））;

eval（）函数是JavaScript中用于计算表达式的值，表达式可以是字符串形式的数学表达式。

2根据计算结果作出反馈

反馈包括2个方面，如下：

·在长条形按钮上显示等号（=）和计算结果。

·通过警示对话框给出反馈信息，如果结果为24，则反馈“运算成功！

”，否则反馈“错了错了！

再接再厉！

”。

在JavaScript中定义了一个alert方法。

其功能是弹出一个具有“弹出”按钮的对话框，并显示一个已经定义的字符串。

当alert（）函数执行时，将弹出一个对话框，同时浏览器对整个HTML文档的解释执行将暂停，只要当访问者单击“确定”按钮后，浏览器才会继续执行HTML文档的后续部分。

反馈实现的代码如下：

functiondeal4（）//计算

{

varrs;

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