如何使用javascript实现数字配对游戏

　　介绍

小编给大家分享一下如何使用javascript实现数字配对游戏,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

<强>游戏效果如下图所示:

如何使用javascript实现数字配对游戏

<强>规则:

在4 x5的格子中,有随机的互不相等10个的数,每个数据有两份(也就20个是数,有两两相等的十对),随机分布在20个格子中。游戏开始,弹出二十个数的序列。每次点击格子会显示当前格子中的数据并暂时保留显示,直到下一次点击,如果下一次点击显示的数据与保留的数据不同,则之前点击保留的数据会消失(仍然存在于该格子但不显示)。如果连续点击显示的两个数据一样,则两个数据都会显示并且不会再消失。

直到所有数据都通过连续点击相同数据的方式显示出来,就算游戏结束,报出游戏用时。此时可以点击开始游戏或刷新来继续。

<强>分析:

1:二十个格子对应二十个数据,产生两组相等的十个随机数并放入数,组数组下标决定显示位置。

2:每个格子的状态的三种:数据隐藏,暂时保留数据和永久显示。数据隐藏的格子通过点击的下一次状态是暂时保留。暂时保留数据的格子通过点击下一次状态是永久显示或数据隐藏,这里要根据连续两次获取的数据是否相等来判断。永久显示之后状态已经不可变,只能永久显示出来,此时对点击是无效的。

3:计时从点击开始按钮之后,点击第一个格子时开始。直到游戏完成或点击刷新重开,期间计时器不能停止。

4:得出,这里需要一个布尔值,记录游戏是否已经开始,已经开始的游戏对开始按钮应该拒绝,计时器运行直到游戏完成。游戏完成时,改变布尔值,计时器停止工作,显示游戏用时,开始按钮可用。

<强>实现:

表格通过脚本创建,其中的元素先默认显示为“空字符串。通过对应的点击来显示。css样式可自行设定。

& lt; table 边界:1比; 　　& lt;才能script> 　　,,var  rowlength =, 4; 　　,,var  collength =, 5; 　　,,var  str =, & # 39; & # 39;; 　　,,for  (var 小姐:=,0;,小姐:& lt;, rowlength;,我+ +),{ 　　,,,str  +=, & # 39; & lt; tr> & # 39; 　　,,,for  (var  j =, 0;, j  & lt;, collength;, j + +), { 　　,,,,//这里将每个td的id拼接为imgxx  xx为元素索引 　　,,,,var  index =,小姐:*,collength  +, j。 　　,,,,var  id =,“img", +,指数; 　　,,,,//注意这里字符串,每个& # 39;& # 39;是一个字符串进行输出 　　,,,,,str  +=, & # 39; & lt; td  id=? # 39;, +, id  +, & # 39;“, onclick=皊howImg (& # 39;, +, index  +, & # 39;)“祝辞& # 39;; 　　,,,,str  +=, & # 39; & lt;/td> & # 39;; 　　,,,} 　　,,,str  +=, & # 39; & lt;/tr> & # 39; 　　,,} 　　,,document . write (str); 　　& lt;才能/script> 　　,& lt;/table>

NEW_START记录是否可以开始游戏的变量

<强>次记录已用时间

反式记录每个格子的翻转状态,数组每个格子有三种状态0:隐藏1:显示(仍可翻转)2:显示(不可翻转)。也就是数组的每个元素只有三个可能的值0,1,2)

<强> numArr三十个数的随机序列数组

var  NEW_START =,真的; 　　var 才能;times =, 0; 　　var 才能;trans =, []; 　　var 才能;numArr =, [],

<强>通过ID获取到元素的方法:

, function 美元(ID), { 　　return 才能;. getelementbyid (id); 　　以前,,}

<强>下面通过函数获取到二十个随机数,两两相等的十组(可参见:生成指定范围随机数)

function  getNum (), { 　　,,,var  index =, 0; 　　,,,var  arrLength =, rowlength  *, collength /, 2; 　　,,,var  arr =, new 数组(); 　　,,,while  (index  & lt;, arrLength), { 　　,,,,var  flag =,真的; 　　,,,,var  num =,方法(math . random (), *, 100); 　　,,,,for  (var 小姐:加勒比海盗拷贝),{ 　　,,,,,if  (arr[我],==,num  | |, arr[我],& lt;, 1), { 　　,,,,,,flag =,假; 　　,,,,,} 　　,,,,} 　　,,,,if  (flag ==,真的),{ 　　,,,,,arr(指数),=,num; 　　,,,,,指数+ +; 　　,,,,} 　　,,,} 　　,,,//警报(arr.length); 　　,,,//加勒比海盗是十个互不相等的随机数, 　　,,,//,newArr数组就是每个随机数都有两个的数组 　　,,,var  newArr =, new 数组(); 　　,,,for  (var 小姐:=,0;,小姐:& lt;, arrLength;,我+ +),{ 　　,,,,newArr[我],=,arr[我]; 　　,,,,newArr [arrLength  +,我],=,arr[我]; 　　,,,} 　　,,,return  newArr; 　　以前,,}

如何使用javascript实现数字配对游戏