前段时间看了《JavaScript语言精粹》，一直想实践一下。于是利用了3、4天的时间做了一个记忆力游戏——Memory。

先在这里放一个直接可玩的版本：

看书的时候随随便便就看过去了，实际做的时候才总是感到书到用时方恨少。书中提到的一些常见问题还真是很常见，在实际编写程序的过程中很多都碰上了。

游戏最终在网上发布时使用的文件——memory-single.html——是一个整合了所有内容的文件，直接转存到本地后，单独一个文件就可以展现整个游戏内容。甚至包括所有的声音和图片。

对于图片，使用了Data URI Schema的技术，将图像的二进制内容转码成Base64编码，以文本形式写在html文件中。不过，本游戏中一共就用了两个图片：作为favicon的图标和下拉列表框的自定义箭头。

对于声音，使用了Pedro Ladaria做的代码生成声音的库。我在CSSer上放了一个贴板，里面贴了声音库的使用相关链接。

最后，说一下自定义风格的下拉列表框。参考了这篇文章，使用外框的标签来切断<select>的内容，将右边的箭头排除到外框标签的外面并遮挡住。其中不同的是，我在这里使用的外框是<span>而不是<div>。最初使用<span>的时候，没有成功，后来在网上查询才知道只有block级的标签才有效，而<span>不是。但加上display:inline-block就可以如block级标签一般工作了。

说了这么多，最后附上代码。