小游戏使用了HTML5，CSS3和JavaScript的基本的技术。

将讨论数据属性、定位、透视、转换、flexbox、事件处理、超时和三元组。

你不需要在编程方面有太多的知识和经验就能看懂，不过还是需要知道HTML，CSS和JS都是什么。

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

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 。

<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 ，这样就可以从原始位置移除元素，并使它们堆叠在一起。

这时页面模版看上去应该是这样：

我们还需要添加一个点击效果。 每次元素被点击时都会触发 :active 伪类，它引发一个 0.2秒的过渡：

翻转卡片

要在单击时翻转卡片，需要把一个 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; }

如果我们刷新页面并翻转一张卡片，它就消失了！

由于我们将两个图像都藏在了背面，所以另一面没有任何东西。 所以接下来需要再把 .front-face 翻转180度：

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

效果出来了！

匹配卡片

完成翻转卡片的功能之后，接下来处理匹配的逻辑。

当点击第一张卡片时，需要等待另一张被翻转。 变量 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();

锁定

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

先声明一个 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));

完成了！

自己是从事五年的前端工程师了，不少人私下问我，2019年前端该怎么学啊，方法有没有？

没错，年初我花了一个多月的时间整理出来的学习资料，希望能帮助那些想学习前端，却又不知道怎么开始学习的童鞋。

这里推荐一下我的前端学习交流群：731771211，里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。2019最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

点击： 加入

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69901074/viewspace-2621331/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/69901074/viewspace-2621331/

用 JavaScript 写一个卡片小游戏相关推荐

  1. html5翻卡片游戏,用 JavaScript 写一个卡片小游戏

    小游戏使用了HTML5,CSS3和JavaScript的基本的技术. 将讨论数据属性.定位.透视.转换.flexbox.事件处理.超时和三元组. 你不需要在编程方面有太多的知识和经验就能看懂,不过还是 ...

  2. 弹力细胞，一个由JavaScript写的网页小游戏

    弹力细胞 (BounceCell) 一个由JavaScript写的网页小游戏 作为大一菜鸟,这是我第一次比较正式的写文章 [害臊] 游戏玩法 通过鼠标或触屏控制屏幕底部的滑动弹板将发射的小球反弹出去撞 ...

  3. ES6 手写一个“辨色”小游戏

    1. 前言 依稀记得几年前朋友圈流行的辨色小游戏,找出颜色不同的矩形.前些天突发奇想,打算自己手写一个类似的游戏,话不多说,先上 Demo . --项目源码 本实例基于 ES6 实现,并兼容 ie9及 ...

  4. 教你前端如何用js写一个跑酷小游戏

    在线体验地址:http://summer.pkec.net/ 源码地址:https://gitee.com/ihope_top/juejin-summer 前言 不知不觉夏天又到了,提到夏天你们能想到 ...

  5. ChatGPT实现用C语言写一个扫雷小游戏

    前几天我们利用 ChatGPT实现用C语言写一个学生成绩管理系统 其过程用时不到30秒,速度惊人 今天又让ChatGPT用C语言写了一个扫雷小游戏,它的回答是:抱歉,我是AI语言模型,无法编写程序. ...

  6. 利用JavaScript写猜数字小游戏

    要求:  在页面中写一个猜数字的游戏:  要求:   1)生成0~100之间的随机数,让用户猜   2)输入错误需要提示,并让用户重新输入   3)输入正确,提示正确,并询问是否继续游戏 结果如下: ...

  7. 使用C语言写一个扫雷小游戏

    前言 相信扫雷游戏小伙伴们肯定都玩过吧,学习了C语言中的数组.函数等基础内容之后就可以自己写一个简易的扫雷小游戏了,今天就我写扫雷小游戏的过程及思路写一篇博客,希望大家看完我的博客能有所收获. 软件及 ...

  8. python俄罗斯方块小游戏实验报告,童年的记忆——如何用python写一个俄罗斯方块小游戏！...

    谈到记忆里的小游戏,俄罗斯方块是大家一定会想到的一款游戏,自己写出来的应该玩起来更有感觉,然后就写了一个俄罗斯方块的游戏 给大家分享一下这个游戏的源码 先用python创建一个py文件 定义这次程序所 ...

  9. 用R写一个迷宫小游戏

    R实现迷宫小游戏 效果图 缘起 R的图形API DFS函数生成迷宫 数据结构 代码解析 后话 附录:完整代码 效果图 缘起 刚装了Ubuntu系统,发现里面有自带的扫雷等小游戏.最近又疯狂使用R,忽然 ...

最新文章

  1. 最近很火的最新一代国际视频标准 VVC 到底是什么？阿里专家为你揭秘
  2. MyEclipse中快捷键的使用
  3. Asp.Net函数集
  4. python初学者用什么开发环境_python初学者用什么开发环境
  5. numpy中两个array数值比较，在IDE中显示完全相同，但是bool判断两个array是否相等却返回False
  6. 【Python爬虫】Beautiful Soup库入门
  7. win php mssql php.ini
  8. 解决QML Window 增加radius效果
  9. sql批量修改数据_Excel技巧 | 如何批量修改行列数据
  10. Unknown error: Unable to build: the file dx.jar was not loaded from the SDK folder!
  11. [需求管理-6]：需求分析 - 技术可行性研究与方案设计模板
  12. HTML基础网页布局代码写法
  13. Spring Security 5
  14. 怎么去掉360导航页
  15. thinkpad10平板电脑装linux,ThinkPad X61上经历Ubuntu 8.10（安装笔记）
  16. 解决ios7.x越狱后静态壁纸变为空白
  17. 布局篇-WrapPanel布局
  18. rot13初学者和python的实现
  19. JS 解决sort字母排序的问题
  20. 祥云杯2020(11.21-22)-CryptoWP

热门文章

  1. 生产实践题目计算机,生产运作管理课后计算机题和实践题[部分]答案解析.doc
  2. 关于ffmpeg with h264编码器安装的步骤
  3. 企业品牌传播软文撰写的基础：明确目标
  4. html幻灯片单页,PageSlider
  5. 《火影忍者》名言录（2.27更新）
  6. 一天下架近5万款APP！苹果“血洗”国区商店
  7. 通过企业微信内建应用，python搭建重置域账户密码
  8. 附pdf下载 | 动手学习深度学习和GAN电子书
  9. 学计算机需要普通话证吗,2019普通话证书用处大吗 都哪些工作需要
  10. java 单链表数据结构的示例