用 JavaScript 寫一個卡片小遊戲

智雲程式設計發表於2019-02-11
JavaScript遊戲

小遊戲使用了HTML5，CSS3和JavaScript的基本的技術。

將討論資料屬性、定位、透視、轉換、flexbox、事件處理、超時和三元組。

你不需要在程式設計方面有太多的知識和經驗就能看懂，不過還是需要知道HTML，CSS和JS都是什麼。

用 JavaScript 寫一個卡片小遊戲

專案結構
先在終端中建立專案檔案：

mkdir memory-game
cd memory-game
touch index.html styles.css
scripts.js mkdir img

HTML

初始化頁面模版並連結 css 檔案 js 檔案. 

<!-- index.html --> <!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Memory Game</title>   <link rel="stylesheet" href="./styles.css"> </head> <body>   <script src="./scripts.js"></script> </body> </html>

這個遊戲有 12 張卡片。 每張卡片中都包含一個名為  .memory-card  的容器  div ，它包含兩個img元素。 一個代表卡片的正面  front-face  ，另一個個代表背面  back-face 。

用 JavaScript 寫一個卡片小遊戲 

<div>   <img src="img/react.svg" alt="React">   <img src="img/js-badge.svg" alt="Memory Card"> </div>

這組卡片將被包裝在一個 section 容器元素中。 最終程式碼如下： 

<!-- index.html --> <section>   <div>     <img src="img/react.svg" alt="React">     <img src="img/js-badge.svg" alt="Memory Card">   </div>   <div>     <img src="img/react.svg" alt="React">     <img src="img/js-badge.svg" alt="Memory Card">   </div>   <div>     <img src="img/angular.svg" alt="Angular">     <img src="img/js-badge.svg" alt="Memory Card">   </div>   <div>     <img src="img/angular.svg" alt="Angular">     <img src="img/js-badge.svg" alt="Memory Card">   </div>   <div>     <img src="img/ember.svg" alt="Ember">     <img src="img/js-badge.svg" alt="Memory Card">   </div>   <div>     <img src="img/ember.svg" alt="Ember">     <img src="img/js-badge.svg" alt="Memory Card">   </div>   <div>     <img src="img/vue.svg" alt="Vue">     <img src="img/js-badge.svg" alt="Memory Card">   </div>   <div>     <img src="img/vue.svg" alt="Vue">     <img src="img/js-badge.svg" alt="Memory Card">   </div>   <div>     <img src="img/backbone.svg" alt="Backbone">     <img src="img/js-badge.svg" alt="Memory Card">   </div>   <div>     <img src="img/backbone.svg" alt="Backbone">     <img src="img/js-badge.svg" alt="Memory Card">   </div>   <div>     <img src="img/aurelia.svg" alt="Aurelia">     <img src="img/js-badge.svg" alt="Memory Card">   </div>   <div>     <img src="img/aurelia.svg" alt="Aurelia">     <img src="img/js-badge.svg" alt="Memory Card">   </div> </section>

CSS

我們將使用一個簡單但非常有用的配置，把它應用於所有專案： 

/* styles.css */ * {   padding: 0;   margin: 0;   box-sizing: border-box; }

box-sizing: border-box 屬效能使元素充滿整個邊框，所以我們就可以不用做一些數學計算了。

把 display：flex 設定給 body ，並且把 margin:auto應用到到 .memory-game 容器，這樣可以使它將垂直水平居中。

.memory-game 是一個彈性容器，在預設情況下，裡面的元素會縮小寬度來適應這個容器。通過把 flex-wrap 的值設定為 wrap，會根據彈性元素的大小進行自適應。 

/* styles.css */ body {   height: 100vh;   display: flex;   background: #060AB2; } .memory-game {   width: 640px;   height: 640px;   margin: auto;   display: flex;   flex-wrap: wrap; }

每個卡片的 width 和 height 都是用 CSS 的 calc()函式進行計算的。 下面我們需要製作一個三行四列的介面，並且把 width 設定為 25%， height 設定為 33.333% ，還要再減去 10px 留足邊距.

為了定位 .memory-card 子元素，還要新增屬性 position: relative ，這樣我們就可以相對它進行子元素的絕對定位。

把 front-face and back-face 的position屬性都設定為 absolute ，這樣就可以從原始位置移除元素，並使它們堆疊在一起。

這時頁面模版看上去應該是這樣：

用 JavaScript 寫一個卡片小遊戲

我們還需要新增一個點選效果。 每次元素被點選時都會觸發 :active 偽類，它引發一個 0.2秒的過渡：

用 JavaScript 寫一個卡片小遊戲

翻轉卡片

要在單擊時翻轉卡片，需要把一個 flip 類新增到元素。 為此，讓我們用 document.querySelectorAll 選擇所有 memory-card 元素，然後使用 forEach 遍歷它們並附加一個事件監聽器。 每當卡片被點選時，都會觸發 flipCard 函式，其中 this 代表被單擊的卡片。 該函式訪問元素的 classList 並切換到 flip 類： 

// scripts.js const cards = document.querySelectorAll('.memory-card'); function flipCard() {   this.classList.toggle('flip'); } cards.forEach(card => card.addEventListener('click', flipCard));

CSS 中的 flip 類會把卡片旋轉 180deg： 

.memory-card.flip {   transform: rotateY(180deg); }

為了產生3D翻轉效果，還需要將 perspective 屬性新增到 .memory-game。 這個屬性用來設定物件與使用者在 z 軸上的距離。 值越小，透視效果越強。 為了能達得最佳的效果，把它設定為 1000px： 

.memory-game {   width: 640px;   height: 640px;   margin: auto;   display: flex;   flex-wrap: wrap; + perspective: 1000px; }

接下來對 .memory-card 元素新增 transform-style:preserve-3d屬性，這樣就把卡片置於在父節點中建立的3D空間中，而不是將其平鋪在 z = 0 的平面上（transform-style）。 

.memory-card {   width: calc(25% - 10px);   height: calc(33.333% - 10px);   margin: 5px;   position: relative;   box-shadow: 1px 1px 1px rgba(0,0,0,.3);   transform: scale(1); + transform-style: preserve-3d; }

再把 transition 屬性的值設定為 transform 就可以生成動態效果了 

.memory-card {   width: calc(25% - 10px);   height: calc(33.333% - 10px);   margin: 5px;   position: relative;   box-shadow: 1px 1px 1px rgba(0,0,0,.3);   transform: scale(1);   transform-style: preserve-3d; + transition: transform .5s; }

現在我們得到了帶有 3D 翻轉效果的卡片， 不過為什麼卡片的另一面沒有出現？ 由於絕對定位的原因，現在 .front-face 和 .back-face 都堆疊在了一起。 每個元素的 back face 都是它 front face 的映象。 屬性 backface-visibility 預設為 visible，因此當我們翻轉卡片時，得到的是背面的 JS 徽章。

![( http://upload-images.jianshu.io/upload_images/13133049-4521ac8b957bb1be.gif?imageMogr2/auto-orient/strip )

為了顯示它背面的影像，讓我們在 .front-face 和 .back-face 中新增 backface-visibility:hidden 

.front-face, .back-face {   width: 100%;   height: 100%;   padding: 20px;   position: absolute;   border-radius: 5px;   background: #1C7CCC; + backface-visibility: hidden; }

如果我們重新整理頁面並翻轉一張卡片，它就消失了！

用 JavaScript 寫一個卡片小遊戲

由於我們將兩個影像都藏在了背面，所以另一面沒有任何東西。 所以接下來需要再把 .front-face 翻轉180度： 

.front-face {   transform: rotateY(180deg); }

效果出來了！

用 JavaScript 寫一個卡片小遊戲

匹配卡片

完成翻轉卡片的功能之後，接下來處理匹配的邏輯。

當點選第一張卡片時，需要等待另一張被翻轉。 變數 hasFlippedCard 和 flippedCard 用來管理翻轉狀態。 如果沒有卡片翻轉，hasFlippedCard 的值為 true，flippedCard 被設定為點選的卡片。 讓我們切換到 toggle 方法： 

  const cards = document.querySelectorAll('.memory-card'); + let hasFlippedCard = false; + let firstCard, secondCard;   function flipCard() { -   this.classList.toggle('flip'); +   this.classList.add('flip'); +   if (!hasFlippedCard) { +     hasFlippedCard = true; +     firstCard = this; +   }   } cards.forEach(card => card.addEventListener('click', flipCard));

現在，當使用者點選第二張牌時，程式碼會進入 else 塊，我們將檢查它們是否匹配。為了做到這一點，需要能夠識別每一張卡片。

每當我們想要向HTML元素新增額外資訊時，就可以使用資料屬性。 通過使用以下語法： data- ,這裡的  可以是任何單詞，它將被插入到元素的 dataset 屬性中。 所以接下來為每張卡片新增一個 data-framework ： 

<section> + <div data-framework="react">     <img src="img/react.svg" alt="React">     <img src="img/js-badge.svg" alt="Memory Card">   </div> + <div data-framework="react">     <img src="img/react.svg" alt="React">     <img src="img/js-badge.svg" alt="Memory Card">   </div> + <div data-framework="angular">     <img src="img/angular.svg" alt="Angular">     <img src="img/js-badge.svg" alt="Memory Card">   </div> + <div data-framework="angular">     <img src="img/angular.svg" alt="Angular">     <img src="img/js-badge.svg" alt="Memory Card">   </div> + <div data-framework="ember">     <img src="img/ember.svg" alt="Ember">     <img src="img/js-badge.svg" alt="Memory Card">   </div> + <div data-framework="ember">     <img src="img/ember.svg" alt="Ember">     <img src="img/js-badge.svg" alt="Memory Card">   </div> + <div data-framework="vue">     <img src="img/vue.svg" alt="Vue">     <img src="img/js-badge.svg" alt="Memory Card">   </div> + <div data-framework="vue">     <img src="img/vue.svg" alt="Vue">     <img src="img/js-badge.svg" alt="Memory Card">   </div> + <div data-framework="backbone">     <img src="img/backbone.svg" alt="Backbone">     <img src="img/js-badge.svg" alt="Memory Card">   </div> + <div data-framework="backbone">     <img src="img/backbone.svg" alt="Backbone">     <img src="img/js-badge.svg" alt="Memory Card">   </div> + <div data-framework="aurelia">     <img src="img/aurelia.svg" alt="Aurelia">     <img src="img/js-badge.svg" alt="Memory Card">   </div> + <div data-framework="aurelia">     <img src="img/aurelia.svg" alt="Aurelia">     <img src="img/js-badge.svg" alt="Memory Card">   </div> </section>

這下就可以通過訪問兩個卡片的資料集來檢查匹配了。 下面將匹配邏輯提取到它自己的方法 checkForMatch()，並將 hasFlippedCard 設定為 false。 如果匹配的話，則呼叫 disableCards() 並分離兩個卡上的事件偵聽器，以防止再次翻轉。 否則 unflipCards() 會將兩張卡都恢復成超過 1500 毫秒的超時，從而刪除 .flip 類：

把程式碼組合起來： 

const cards = document.querySelectorAll('.memory-card');   let hasFlippedCard = false;   let firstCard, secondCard;   function flipCard() {     this.classList.add('flip');     if (!hasFlippedCard) {       hasFlippedCard = true;       firstCard = this; +     return; +   } + +   secondCard = this; +   hasFlippedCard = false; + +   checkForMatch(); + } + + function checkForMatch() { +   if (firstCard.dataset.framework === secondCard.dataset.framework) { +     disableCards(); +     return; +   } + +   unflipCards(); + } + + function disableCards() { +   firstCard.removeEventListener('click', flipCard); +   secondCard.removeEventListener('click', flipCard); + } + + function unflipCards() { +   setTimeout(() => { +     firstCard.classList.remove('flip'); +     secondCard.classList.remove('flip'); +   }, 1500); + }   cards.forEach(card => card.addEventListener('click', flipCard));

更優雅的進行條件匹配的方法是用三元運算子，它由三部分組成： 第一部分是要判斷的條件， 如果條件符合就執行第二部分的程式碼，否則執行第三部分： 

- if (firstCard.dataset.name === secondCard.dataset.name) { -   disableCards(); -   return; - } - - unflipCards(); + let isMatch = firstCard.dataset.name === secondCard.dataset.name; + isMatch ? disableCards() : unflipCards();

鎖定

現在已經完成了匹配邏輯，接著為了避免同時轉動兩組卡片，還需要鎖定它們，否則翻轉將會被失敗。

用 JavaScript 寫一個卡片小遊戲

先宣告一個 lockBoard 變數。 當玩家點選第二張牌時，lockBoard將設定為true，條件 if (lockBoard) return; 在卡被隱藏或匹配之前會阻止其他卡片翻轉： 

const cards = document.querySelectorAll('.memory-card');   let hasFlippedCard = false; + let lockBoard = false;   let firstCard, secondCard;   function flipCard() { +   if (lockBoard) return;     this.classList.add('flip');     if (!hasFlippedCard) {       hasFlippedCard = true;       firstCard = this;       return;     }     secondCard = this;     hasFlippedCard = false;     checkForMatch();   }   function checkForMatch() {     let isMatch = firstCard.dataset.name === secondCard.dataset.name;     isMatch ? disableCards() : unflipCards();   }   function disableCards() {     firstCard.removeEventListener('click', flipCard);     secondCard.removeEventListener('click', flipCard);   }   function unflipCards() { +     lockBoard = true;     setTimeout(() => {       firstCard.classList.remove('flip');       secondCard.classList.remove('flip'); +     lockBoard = false;     }, 1500);   }   cards.forEach(card => card.addEventListener('click', flipCard));

點選同一個卡片

仍然是玩家可以在同一張卡上點選兩次的情況。 如果匹配條件判斷為 true，從該卡上刪除事件偵聽器。

用 JavaScript 寫一個卡片小遊戲

為了防止這種情況，需要檢查當前點選的卡片是否等於firstCard，如果是肯定的則返回。 

if (this === firstCard) return;

變數 firstCard 和 secondCard 需要在每一輪之後被重置，所以讓我們將它提取到一個新方法 resetBoard()中， 再其中寫上 hasFlippedCard = false; 和 lockBoard = false 。 es6 的解構賦值功能 [var1, var2] = ['value1', 'value2'] 允許我們把程式碼寫得超短： 

function resetBoard() {   [hasFlippedCard, lockBoard] = [false, false];   [firstCard, secondCard] = [null, null]; }

接著呼叫新方法 disableCards() 和 unflipCards()： 

const cards = document.querySelectorAll('.memory-card');   let hasFlippedCard = false;   let lockBoard = false;   let firstCard, secondCard;   function flipCard() {     if (lockBoard) return; +   if (this === firstCard) return;     this.classList.add('flip');     if (!hasFlippedCard) {       hasFlippedCard = true;       firstCard = this;       return;     }     secondCard = this; -   hasFlippedCard = false;     checkForMatch();   }   function checkForMatch() {     let isMatch = firstCard.dataset.name === secondCard.dataset.name;     isMatch ? disableCards() : unflipCards();   }   function disableCards() {     firstCard.removeEventListener('click', flipCard);     secondCard.removeEventListener('click', flipCard); +   resetBoard();   }   function unflipCards() {     lockBoard = true;     setTimeout(() => {       firstCard.classList.remove('flip');       secondCard.classList.remove('flip'); -     lockBoard = false; +     resetBoard();     }, 1500);   } + function resetBoard() { +   [hasFlippedCard, lockBoard] = [false, false]; +   [firstCard, secondCard] = [null, null]; + }   cards.forEach(card => card.addEventListener('click', flipCard));

點選同一個卡片

仍然是玩家可以在同一張卡上點選兩次的情況。 如果匹配條件判斷為 true，從該卡上刪除事件偵聽器。

用 JavaScript 寫一個卡片小遊戲

為了防止這種情況，需要檢查當前點選的卡片是否等於firstCard，如果是肯定的則返回。 

if (this === firstCard) return;

變數 firstCard 和 secondCard 需要在每一輪之後被重置，所以讓我們將它提取到一個新方法 resetBoard()中， 再其中寫上 hasFlippedCard = false; 和 lockBoard = false 。 es6 的解構賦值功能 [var1, var2] = ['value1', 'value2'] 允許我們把程式碼寫得超短： 

function resetBoard() {   [hasFlippedCard, lockBoard] = [false, false];   [firstCard, secondCard] = [null, null]; }

接著呼叫新方法 disableCards() 和 unflipCards()： 

const cards = document.querySelectorAll('.memory-card');   let hasFlippedCard = false;   let lockBoard = false;   let firstCard, secondCard;   function flipCard() {     if (lockBoard) return; +   if (this === firstCard) return;     this.classList.add('flip');     if (!hasFlippedCard) {       hasFlippedCard = true;       firstCard = this;       return;     }     secondCard = this; -   hasFlippedCard = false;     checkForMatch();   }   function checkForMatch() {     let isMatch = firstCard.dataset.name === secondCard.dataset.name;     isMatch ? disableCards() : unflipCards();   }   function disableCards() {     firstCard.removeEventListener('click', flipCard);     secondCard.removeEventListener('click', flipCard); +   resetBoard();   }   function unflipCards() {     lockBoard = true;     setTimeout(() => {       firstCard.classList.remove('flip');       secondCard.classList.remove('flip'); -     lockBoard = false; +     resetBoard();     }, 1500);   } + function resetBoard() { +   [hasFlippedCard, lockBoard] = [false, false]; +   [firstCard, secondCard] = [null, null]; + }   cards.forEach(card => card.addEventListener('click', flipCard));

洗牌

我們的遊戲看起來相當不錯，但是如果不能洗牌就沒有樂趣，所以現在處理這個功能。

當 display: flex 在容器上被宣告時，flex-items 會按照組和源的順序進行排序。 每個組由order屬性定義，該屬性包含正整數或負整數。 預設情況下，每個 flex-item 都將其 order 屬性設定為 0，這意味著它們都屬於同一個組，並將按源的順序排列。 如果有多個組，則首先按組升序順序排列。

遊戲中有12張牌，因此我們將迭代它們，生成 0 到 12 之間的隨機數並將其分配給 flex-item order 屬性： 

function shuffle() {   cards.forEach(card => {     let ramdomPos = Math.floor(Math.random() * 12);     card.style.order = ramdomPos;   }); }

為了呼叫 shuffle 函式，讓它成為一個立即呼叫函式表示式（IIFE），這意味著它將在宣告後立即執行。 指令碼應如下所示： 

const cards = document.querySelectorAll('.memory-card');   let hasFlippedCard = false;   let lockBoard = false;   let firstCard, secondCard;   function flipCard() {     if (lockBoard) return;     if (this === firstCard) return;     this.classList.add('flip');     if (!hasFlippedCard) {       hasFlippedCard = true;       firstCard = this;       return;     }     secondCard = this;     lockBoard = true;     checkForMatch();   }   function checkForMatch() {     let isMatch = firstCard.dataset.name === secondCard.dataset.name;     isMatch ? disableCards() : unflipCards();   }   function disableCards() {     firstCard.removeEventListener('click', flipCard);     secondCard.removeEventListener('click', flipCard);     resetBoard();   }   function unflipCards() {     setTimeout(() => {       firstCard.classList.remove('flip');       secondCard.classList.remove('flip');       resetBoard();     }, 1500);   }   function resetBoard() {     [hasFlippedCard, lockBoard] = [false, false];     [firstCard, secondCard] = [null, null];   } + (function shuffle() { +   cards.forEach(card => { +     let ramdomPos = Math.floor(Math.random() * 12); +     card.style.order = ramdomPos; +   }); + })();   cards.forEach(card => card.addEventListener('click', flipCard));

完成了！

自己是從事五年的前端工程師了，不少人私下問我，2019年前端該怎麼學啊，方法有沒有？

沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助那些想學習前端，卻又不知道怎麼開始學習的童鞋。

這裡推薦一下我的前端學習交流群：731771211，裡面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選： 加入


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2621331/，如需轉載，請註明出處，否則將追究法律責任。

相關文章