网页打印浓度_将浓度记忆游戏添加到您的网页

你的名字 2022-12-06 15:24 136阅读 0赞

网页打印 浓度

Here is a version of the classic memory game that allows visitors to your web page to match images in a grid pattern using JavaScript.

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

## 提供图像 **(** Supplying the Images **)** ##

You will have to supply the images, but you can use whatever images you like with this script as long as you own the rights to use them on the web. You will also have to resize them to 60 pixels by 60 pixels before you start.

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

You will need one image for the back of the "cards" and fifteen for the "fronts."

“卡片”的背面需要一张图像，“正面”需要15张图像。

Make sure that the image files are as small as possible or the game may take too long to load. With this version I have limited the script to 30 cards as all of the images will make the page a lot slower to load. The more cards and images the page has the slower the page is going to load. This may not be a problem for those with good broadband connections, but those with slower connections may become frustrated by the time it takes.

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

## 什么是浓度记忆游戏？ **(** What Is the Concentration Memory Game? **)** ##

If you haven't played this game before, the rules are very simple. There are 30 squares, or cards. Each card has one of 15 images, with no image appearing more than twice—these are the pairs that will be matched.

如果您以前从未玩过此游戏，则规则非常简单。 有30个正方形或卡。 每张卡具有15张图像中的一张，没有图像出现两次以上-这些是将配对的对。

The cards begin "face down," concealing the images on the 15 pairs.

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

The object is to turn up all of the matching pairs in as short a time as possible.

目的是在尽可能短的时间内打开所有匹配对。

Play starts by you selecting one card, and then selecting a second. If they are a match, they remain face up; if they do not match, the two cards are turned back over, face down. As you play, you will need to rely on your memory of previous cards and their locations in order to make successful matches.

首先选择一张卡，然后选择第二张卡即可开始播放。 如果他们是比赛，他们将保持面朝上。 如果它们不匹配，则将两张卡面朝下翻转过来。 在玩游戏时，您需要依靠对以前的纸牌及其位置的记忆才能成功进行比赛。

## 此版本的浓度如何工作 **(** How This Version of Concentration Works **)** ##

In this JavaScript version of the game, you select cards by clicking on them. If the two you select match then they will remain visible, if they don't then they will disappear again after a second or so.

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

There is a time counter at the bottom that tracks how long it takes you to match all of the pairs.

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

If you want to start over, just press the counter button and the whole tableau will be reshuffled and you can start again.

如果您想重新开始，只需按一下计数器按钮，整个画面将被重新排列，您可以重新开始。

The images used in this sample do not come with the script, so as mentioned, you will have to provide your own. If you don't have images to use with this script and are unable to create your own, you can search for suitable clipart that is free to use.

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

## 将游戏添加到您的网页 **(** Adding the Game to Your Web Page **)** ##

The script for the memory game is added to your web page in five steps.

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

**Step 1:** Copy the following code and save it in a file named *memoryh.js.*

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

// Concentration Memory Game with Images - Head Script// copyright Stephen Chapman, 28th February 2006, 24th December 2009// you may copy this script provided that you retain the copyright notice

var back = 'back.gif';var 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'];

You will replace the image file names for back and tile with the file names of your images.

Remember to edit your images in your graphics program so that they are all 60 pixels square so that they don't take too long to load (the combined size of the 16 images used for my example is just 4758 bytes so you should have no problem keeping the total under 10k).

切记在图形程序中编辑图像，使它们均为60像素见方，以免加载时间太长(本例中使用的16张图像的总大小仅为4758字节，因此应该没有问题)将总数保持在10k以内)。

**Step 2:** Select the code below and copy it into a file called *memory.css.*

**步骤2：**选择以下代码，然后将其复制到一个名为*memory.css*的文件中*。*

.blk {width:70px;height:70px;overflow:hidden;}

**Step 3:** Insert the following code into the head section of your web page's HTML document to call the two files you just created.

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

**Step 4:** Select and copy the code below, and then save it into a file called *memoryb.js.*

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

// Concentration Memory Game with Images - Body Script// copyright Stephen Chapman, 28th February 2006, 24th December 2009// you may copy this script provided that you retain the copyright notice

document.write('<div align="center"><table cellpadding="0" cellspacing="0"border="0">');for (var a = 0; a <= 5; a++) {document.write('<tr>');for (var b =0; b <= 4; b++) {document.write('<td align="center" class="blk"id="t'+((5*a)+b)+'"></td>');}document.write('<\/tr>');}document.write('<\/table><form name="mem"><input type="button" id="cnt" value="0:00"onclick="window.start()" \/><\/form><\/div>');

**Step 5: **Now all that remains is to add the game onto your web page where you want it to appear by inserting the following code into your HTML document.

**步骤5：**现在剩下的就是通过将以下代码插入HTML文档中，将游戏添加到您希望其显示的网页上。

> 翻译自: [https://www.thoughtco.com/add-the-concentration-memory-game-to-your-web-page-4071848][https_www.thoughtco.com_add-the-concentration-memory-game-to-your-web-page-4071848]

网页打印 浓度

[https_www.thoughtco.com_add-the-concentration-memory-game-to-your-web-page-4071848]: https://www.thoughtco.com/add-the-concentration-memory-game-to-your-web-page-4071848