将集中记忆游戏添加到您的网页

这是一个经典内存游戏的版本，它允许网页访问者使用JavaScript以网格模式匹配图像。...

这是一个经典内存游戏的版本，它允许网页访问者使用JavaScript以网格模式匹配图像。

提供图像

您必须提供图像，但您可以使用此脚本中您喜欢的任何图像，只要您拥有在web上使用这些图像的权限。在开始之前，您还必须将它们的大小调整为60像素乘60像素。

你需要在“卡片”的背面有一张图片，在“正面”有十五张图片

确保图像文件尽可能小，否则游戏可能需要很长时间才能加载。在这个版本中，我将脚本限制为30张卡片，因为所有的图片都会使页面加载速度大大降低。页面上的卡片和图像越多，页面加载的速度就越慢。对于那些宽带连接良好的人来说，这可能不是问题，但是那些连接速度较慢的人可能会因为所花的时间而感到沮丧。

什么是集中记忆游戏(the concentration memory game)？

如果你以前没有玩过这个游戏，规则很简单。有30个方块或卡片。每张卡有15张图像中的一张，没有图像出现超过两次。这是将要匹配的对。

卡片开始“面朝下”，隐藏了15对卡片上的图像。

目标是在尽可能短的时间内找到所有匹配对。

游戏首先选择一张牌，然后选择第二张牌。如果他们是对手，他们仍然面朝上；如果两张牌不匹配，则将两张牌翻过来，面朝下。当你玩的时候，你需要依靠你对前几张牌的记忆和它们的位置来进行成功的比赛。

这个版本的专注是如何工作的

在这个JavaScript版本的游戏中，您可以通过单击卡片来选择卡片。如果您选择的两个匹配，则它们将保持可见，如果不匹配，则它们将在大约一秒钟后再次消失。

底部有一个时间计数器，用于跟踪匹配所有配对所需的时间。

如果你想重新开始，只需按下计数器按钮，整个画面就会重新排列，你可以重新开始。

本示例中使用的图像不随脚本提供，因此如上所述，您必须提供自己的图像。如果您没有可用于此脚本的图像，并且无法创建自己的图像，则可以搜索免费使用的合适剪贴画。

将游戏添加到您的网页

记忆游戏的脚本分五步添加到您的网页。

步骤1：复制以下代码并将其保存在名为memoryh.js的文件中。

var back='back.gif'；变量tile=['img0.gif'、'img1.gif'、'img2.gif'、'img3.gif'、'img4.gif'、'img5.gif'、'img6.gif'、'img7.gif'、'img8.gif'、'img9.gif'、'img10.gif'、'img11.gif'、'img12.gif'、'img13.gif'、'img14.gif']；

函数randOrd（a，b）{return（Math.round（Math.random（））-0.5）}var im=[]；对于（var i=0；i&lt；15；i++）{im[i]=new Image（）；im[i].src=tile[i]；tile[i]='&lt；img src=“'+tile[i]+'”width=“60”height=“60”alt=“tile”\/&gt；；tile[i+15]=tile[i]；}函数displayBack（i）{document.getElementById（'t'+i）.innerHTML='&lt；div onclick=“disp（'i”）；return false；&lt；alt=“60”高度\/&gt；lt；\/div&gt；'；}变量ch1、ch2、tmr、tno、tid、cid、cnt；window.onload=启动；函数start（）{for（var i=0；i&lt；=29；i++）displayBack（i）；clearInterval（tid）；tmr=tno=cnt=0；tile.sort（randOrd）；cntr（）；tid=setInterval（'cntr（）'，1000）；}函数cntr（）{var min=Math.floor（tmr/60）；var sec=tmr%60；document.getElementById（'cnt'）。value=min+'：'+'：'++（sec&lt；10？'0'：''）：''）++sec；tmr min函数disp（sel）{if（tno）}1）{clearTimeout（cid）；隐藏（）；}document.getElementById（'t'+sel）.innerHTML=tile[sel]；if（tno==0）ch1=sel；else{ch2=sel；cid=setTimeout（'hidden（）'，900）；}tno++；}函数隐藏（）{tno=0；if（tile[ch1]！=tile[ch2]）{displayBack ch1；displayBack ch2；}else cnt++；if（cnt&gt；=15）clearInterval（tid）；}

您将用图像的文件名替换back和tile的图像文件名。

请记住在图形程序中编辑图像，使它们都是60像素的正方形，这样加载时间就不会太长（在我的示例中使用的16个图像的总大小仅为4758字节，因此将总数保持在10k以下应该没有问题）。

步骤2：选择下面的代码并将其复制到名为memory.css的文件中。

.blk{宽度：70px；高度：70px；溢出：隐藏；}

步骤3：将以下代码插入网页HTML文档的头部分，以调用刚才创建的两个文件。

&lt；script type=“text/javascript”src=“memoryh.js”&gt&lt/脚本&gt&书信电报；link rel=“stylesheet”href=“memory.css”type=“text/css”/&gt；

步骤4：选择并复制下面的代码，然后将其保存到一个名为memoryb.js的文件中。

document.write（“&lt；div align=“center”&gt；&lt；table cellpadding=“0”cellspaching=“0”border=“0”&gt；”）；for（var a=0；a&lt；=5；a++）{document.write（'lt；tr&gt；'）；for（var b=0；b&lt；=4；b++）{document.write（'lt；td align=“center”class=“blk”id=“t”+（（5*a）+b）+}document write（'lt；'lt；\/tr gt；'）}document write（'lt；'lt；/table=“form name=“mem”&lt；&gt；id=“input type='cnt；”点击窗口0:00\/&gt；&lt；\/form&gt；&lt；\/div&gt；'）；

步骤5：现在剩下的就是将以下代码插入HTML文档，将游戏添加到您希望它出现的网页上。

&lt；script type=“text/javascript”src=“memoryb.js”&gt&lt/脚本&gt；