怎么用JavaScript写一个卡片小游戏

这下就可以通过访问两个卡片的数据集来检查匹配了。 下面将匹配逻辑提取到它自己的方法 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();

锁定

现在已经完成了匹配逻辑，接着为了避免同时转动两组卡片，还需要锁定它们，否则翻转将会被失败。

先声明一个 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，从该卡上删除事件侦听器。

为了防止这种情况，需要检查当前点击的卡片是否等于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，从该卡上删除事件侦听器。

为了防止这种情况，需要检查当前点击的卡片是否等于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));

到此，关于“怎么用JavaScript写一个卡片小游戏”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4