咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

网站营销

小程序

06
联系我们

公司地址

人才招聘

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

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

这篇文章主要介绍“怎么用JavaScript写一个卡片小游戏”，在日常操作中，相信很多人在怎么用JavaScript写一个卡片小游戏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用JavaScript写一个卡片小游戏”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联专业为企业提供临漳网站建设、临漳做网站、临漳网站设计、临漳网站制作等企业网站建设、网页设计与制作、临漳企业网站模板建站服务，十多年临漳做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

项目结构
先在终端中创建项目文件：

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

HTML

初始化页面模版并链接 css 文件 js 文件.

         Memory Game          

这个游戏有 12 张卡片。 每张卡片中都包含一个名为 .memory-card 的容器 div，它包含两个img元素。 一个代表卡片的正面 front-face ，另一个个代表背面 back-face。

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

       

这组卡片将被包装在一个 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 徽章。

![( /upload/otherpic56/13133049-4521ac8b957bb1be.gif )

为了显示它背面的图像，让我们在 .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 ：

 +              
 +              
 +              
 +              
 +               +               +               +               +               +               +               +               

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

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


文章题目：怎么用JavaScript写一个卡片小游戏
地址分享：http://dzwzjz.com/article/gphphj.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
行业新闻 建站学堂 常见问题
联系我们
公司地址 人才招聘
成都 达州
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：达州市南岸区弹子石腾龙大道58号2栋21-6
友情链接： 成都广告设计   成都小程序开发   崇州做网站   响应式网站   外贸网站建设   成都网站建设   成都网站建设   成都机柜租用   商标注册   四川平武网站建设   
版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14
在线咨询
服务热线
服务热线：028-86922220
TOP