实战！半小时写一个脑力小游戏

本实战使用了HTML5，CSS3和JavaScript的基本的技术。 咱们将讨论数据属性、定位、透视、转换、flexbox、事件处理、超时和三元组。 你不须要在编程方面有太多的知识和经验就能看懂，不过仍是须要知道HTML，CSS和JS都是什么。

• 🕹Demo: Memory Game Project【https://marina-ferreira.github.io/memory-game/】（点击底部“原文”直达GayHub项目）

项目结构

先在终端中建立项目文件：

HTML

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

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

您能够在GitHub下载本项目的资源文件： Memory Game Repo【https://github.com/code-sketch/memory-game】。

这组卡片将被包装在一个 section容器元素中。 最终代码以下：

CSS

咱们将使用一个简单但很是有用的配置，把它应用于全部项目：

box-sizing: border-box属性能使元素充满整个边框，因此咱们就能够不用作一些数学计算了。

把 display：flex设置给 body，而且把 margin:auto应用到到 .memory-game容器，这样可使它将垂直水平居中。

.memory-game是一个弹性容器，在默认状况下，里面的元素会缩小宽度来适应这个容器。经过把 flex-wrap的值设置为 wrap，会根据弹性元素的大小进行自适应。

每一个卡片的 width和 height都是用 CSS 的 calc()函数进行计算的。 下面咱们须要制做一个三行四列的界面，而且把 width设置为 25%， height设置为 33.333%，还要再减去 10px留足边距.

为了定位 .memory-card子元素，还要添加属性 position: relative，这样咱们就能够相对它进行子元素的绝对定位。

把 front-faceand back-face的position属性都设置为 absolute，这样就能够从原始位置移除元素，并使它们堆叠在一块儿。

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

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

翻转卡片

要在单击时翻转卡片，须要把一个 flip类添加到元素。 为此，让咱们用 document.querySelectorAll选择全部 memory-card元素，而后使用 forEach遍历它们并附加一个事件监听器。 每当卡片被点击时，都会触发 flipCard函数，其中 this表明被单击的卡片。 该函数访问元素的 classList并切换到 flip类：

CSS 中的 flip类会把卡片旋转 180deg：

为了产生3D翻转效果，还须要将 perspective属性添加到 .memory-game。 这个属性用来设置对象与用户在 z轴上的距离。 值越小，透视效果越强。 为了能达得最佳的效果，把它设置为 1000px：

接下来对 .memory-card元素添加 transform-style:preserve-3d属性，这样就把卡片置于在父节点中建立的3D空间中，而不是将其平铺在 z = 0的平面上（transform-style）。

再把 transition属性的值设置为 transform就能够生成动态效果了：

耶！如今咱们获得了带有 3D 翻转效果的卡片， 不过为何卡片的另外一面没有出现？ 因为绝对定位的缘由，如今 .front-face和 .back-face都堆叠在了一块儿。 每一个元素的 back face都是它 front face的镜像。 属性 backface-visibility默认为 visible，所以当咱们翻转卡片时，获得的是背面的 JS 徽章。

为了显示它背面的图像，让咱们在 .front-face和 .back-face中添加 backface-visibility:hidden。

若是咱们刷新页面并翻转一张卡片，它就消失了！

img

因为咱们将两个图像都藏在了背面，因此另外一面没有任何东西。 因此接下来须要再把 .front-face翻转180度：

效果终于出来了！

匹配卡片

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

当点击第一张卡片时，须要等待另外一张被翻转。 变量 hasFlippedCard和 flippedCard用来管理翻转状态。 若是没有卡片翻转，hasFlippedCard的值为 true，flippedCard被设置为点击的卡片。 让咱们切换到 toggle方法：

如今，当用户点击第二张牌时，代码会进入 else块，咱们将检查它们是否匹配。为了作到这一点，须要可以识别每一张卡片。

每当咱们想要向HTML元素添加额外信息时，就可使用数据属性。 经过使用如下语法： data-*,这里的*能够是任何单词，它将被插入到元素的 dataset 属性中。 因此接下来为每张卡片添加一个 data-framework：

复制代码

这下就能够经过访问两个卡片的数据集来检查匹配了。 下面将匹配逻辑提取到它本身的方法 checkForMatch()，并将 hasFlippedCard设置为 false。 若是匹配的话，则调用 disableCards()并分离两个卡上的事件侦听器，以防止再次翻转。 不然 unflipCards()会将两张卡都恢复成超过 1500 毫秒的超时，从而删除 .flip类：

把代码组合起来：

更优雅的进行条件匹配的方法是用三元运算符，它由三部分组成： 第一部分是要判断的条件， 若是条件符合就执行第二部分的代码，不然执行第三部分：

锁定

如今已经完成了匹配逻辑，接着为了不同时转动两组卡片，还须要锁定它们，不然翻转将会被失败。

先声明一个 lockBoard变量。 当玩家点击第二张牌时，lockBoard将设置为true，条件 if (lockBoard) return;在卡被隐藏或匹配以前会阻止其余卡片翻转：

点击同一个卡片

仍然是玩家能够在同一张卡上点击两次的状况。 若是匹配条件判断为 true，从该卡上删除事件侦听器。

为了防止这种状况，须要检查当前点击的卡片是否等于firstCard，若是是确定的则返回。

变量 firstCard和 secondCard须要在每一轮以后被重置，因此让咱们将它提取到一个新方法 resetBoard()中， 再其中写上 hasFlippedCard = false;和 lockBoard = false。 es6 的解构赋值功能 [var1, var2] = ['value1', 'value2']容许咱们把代码写得超短：

接着调用新方法 disableCards()和 unflipCards()：

洗牌

咱们的游戏看起来至关不错，可是若是不能洗牌就没有乐趣，因此如今处理这个功能。

当 display: flex在容器上被声明时，flex-items会按照组和源的顺序进行排序。 每一个组由order属性定义，该属性包含正整数或负整数。 默认状况下，每一个 flex-item都将其 order属性设置为 0，这意味着它们都属于同一个组，并将按源的顺序排列。 若是有多个组，则首先按组升序顺序排列。

游戏中有12张牌，所以咱们将迭代它们，生成 0 到 12 之间的随机数并将其分配给 flex-item order属性：

为了调用 shuffle函数，让它成为一个当即调用函数表达式（IIFE），这意味着它将在声明后当即执行。 脚本应以下所示：

终于完成了！

您还能够在油管上找到视频演示：🎬 Code Sketch Channel【https://www.youtube.com/watch?v=eMhiMsEC9Uk&list=PLLX1I3KXZ-YH-woTgiCfONMya39-Ty8qw】。

本文首发于京程一灯公众号！！！

㊗️开工大吉