姓名：閆偉? 學號：15020150038
轉載自：https://zhuanlan.zhihu.com/p/48145057
【嵌牛導讀】：雖然萬圣節(jié)并非我們國家的節(jié)日蹦肴，但是在網(wǎng)上也可以到處看到關于萬圣節(jié)的元素（游戲相關活動也不少）。
【嵌牛鼻子】：JavaScript UI
【嵌牛提問】：如何用JavaScript寫萬圣節(jié)小游戲?
【嵌牛正文】：
本著簡單和快速的目的，我們會創(chuàng)建一個很小的記憶游戲，將畫面中的圖片進行匹配，成功后會顯示出一張有著濃濃萬圣節(jié)風格的背景圖吭练。
最終的游戲畫風這樣：
漂亮圖形是關鍵
但是我們沒時間去自己畫圖，當然如果能有點音效就更好了析显，不過暫時先跳過這個話題鲫咽。我們使用 gfx 繪圖，從http://iconfinder.com/上收集 icon叫榕，然后調整它們的大谢虢摹（100 x 100 px）。我們這里需要 10 個 icon晰绎。另外再找一張漂亮的背景圖寓落。素材收集好后，開始寫代碼荞下。
代碼
我們需要做的工作就是讓這些資源“動起來”伶选。首先用 HTML5 和 jQuery 構建代碼。雖然我們要寫的這個游戲比較簡單尖昏，但是還是有些復雜操作的仰税。
因為想節(jié)省時間，所以可以到網(wǎng)上找找資源（比如 GitHub）抽诉，能不造輪子就不造輪子陨簇。在codepen.io上有個不錯的示例（https://codepen.io/mel/pen/Brads/），能幫你再快一點迹淌。
創(chuàng)建 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 代碼中，我們需要一個面板耙饰，一個計數(shù)器和一些圖像纹笼。圖像的名字并不重要——我們將它們用作一個元組的元素：
圖片必須隨機放置，所以我們添加兩個函數(shù)：
... 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;}
這段代碼的重點就是這個函數(shù)：
function openCard() {...}
在該函數(shù)中，完成了全部的管理操作：顯示/隱藏動畫圖片件已，計數(shù)笋额，檢查圖片的匹配狀況以及游戲結束狀態(tài)：
...? if (imgFound == gfxBase.length) {? ? $("#counter").prepend('Done! With ');? ? // alert('BOOOO!');? }...
最后，我們運行所有代碼——創(chuàng)建面板拨齐，并選擇隨機圖片：
$(function() {? ? for (var y = 1; y < 3 ; y++) {? ? ? ? $.each(gfxBase, function(i, val) {? ? ? ? ? ? $(mainBoard).append("
就是這些鳞陨，現(xiàn)在就可以玩耍我們編寫的萬圣節(jié)主題游戲了！
最后游戲做好后會是這樣瞻惋，可以去玩玩：
本項目所有源代碼GitHub地址：
https://github.com/dominik-w/js_html5_com/tree/master/halloween-memory-game
總結
本文我們快速編寫了一個萬圣節(jié)主題的記憶卡片游戲厦滤，如果你有充足時間，還可以向背景添加一些動畫效果或者聲音歼狼。雖然游戲很簡單掏导，但是也算是湊了一把萬圣節(jié)的熱鬧。
