姓名：闫伟 学号：15020150038
转载自：https://zhuanlan.zhihu.com/p/48145057
【嵌牛导读】：虽然万圣节并非我们国家的节日，但是在网上也可以到处看到关于万圣节的元素（游戏相关活动也不少）。
【嵌牛鼻子】：JavaScript UI
【嵌牛提问】：如何用JavaScript写万圣节小游戏?
【嵌牛正文】：
本着简单和快速的目的，我们会创建一个很小的记忆游戏，将画面中的图片进行匹配，成功后会显示出一张有着浓浓万圣节风格的背景图。
最终的游戏画风这样：
漂亮图形是关键
但是我们没时间去自己画图，当然如果能有点音效就更好了，不过暂时先跳过这个话题。我们使用 gfx 绘图，从http://iconfinder.com/上收集 icon，然后调整它们的大小（100 x 100 px）。我们这里需要 10 个 icon。另外再找一张漂亮的背景图。素材收集好后，开始写代码。
代码
我们需要做的工作就是让这些资源“动起来”。首先用 HTML5 和 jQuery 构建代码。虽然我们要写的这个游戏比较简单，但是还是有些复杂操作的。
因为想节省时间，所以可以到网上找找资源（比如 GitHub），能不造轮子就不造轮子。在codepen.io上有个不错的示例（https://codepen.io/mel/pen/Brads/），能帮你再快一点。
创建 UI/样式
我们需要定义背景图、面板和按钮等的 CSS 样式：
...body { background-image: url('../gfx/bg2.jpg'); color: #fff; font: 20px Verdana; font-weight: bold; text-transform: uppercase;} #gameBoard { margin: 0px auto; width: 640px;} #boxes { margin: 10px 0 0; z-index: 1;}...
以及 HTML 结构：
...
0 Moves Start again ...下面开始应用 JavaScript。
在 JavaScript 代码中，我们需要一个面板，一个计数器和一些图像。图像的名字并不重要——我们将它们用作一个元组的元素：
图片必须随机放置，所以我们添加两个函数：
... function doRandom(max, min) { return Math.round(Math.random() * (max - min) + min);} // put images in random orderfunction shuffleImgs() {...} ...
UI 包含“再次开始”按钮，它会重置整个游戏。下面是处理程序：
function startAgain() { shuffleImgs(); $(mainBoard + " div img").hide(); $(mainBoard + " div").css("visibility", "visible"); $("#success").remove(); counter = 0; $("#counter").html("" + counter); cardOpened = ""; imageOpened = ""; imgFound = 0; return false;}
这段代码的重点就是这个函数：
function openCard() {...}
在该函数中，完成了全部的管理操作：显示/隐藏动画图片，计数，检查图片的匹配状况以及游戏结束状态：
... if (imgFound == gfxBase.length) { $("#counter").prepend('Done! With '); // alert('BOOOO!'); }...
最后，我们运行所有代码——创建面板，并选择随机图片：
$(function() { for (var y = 1; y < 3 ; y++) { $.each(gfxBase, function(i, val) { $(mainBoard).append("
就是这些，现在就可以玩耍我们编写的万圣节主题游戏了！
最后游戏做好后会是这样，可以去玩玩：
本项目所有源代码GitHub地址：
https://github.com/dominik-w/js_html5_com/tree/master/halloween-memory-game
总结
本文我们快速编写了一个万圣节主题的记忆卡片游戏，如果你有充足时间，还可以向背景添加一些动画效果或者声音。虽然游戏很简单，但是也算是凑了一把万圣节的热闹。
网友评论