网站首页 > 技术文章正文

Vue.js 项目实践——创建记忆卡片游戏

nanyue 2024-10-25 13:12:40 技术文章 4 ℃

作者：Jiawei Pan

转发链接：https://mp.weixin.qq.com/s/VXPD2p7q2S3yR9I7lzAkfw

前言

如果你刚开始学习 Vue，想巩固基础知识，那么你可以试试通过这个有趣的练习来创建一个好玩的游戏。

在这篇文章中，我将逐步教你用 Vue.js 创建一个记忆卡片游戏。

这篇文章会介绍以下知识点：

- 使用 v-for 命令循环遍历一个数组对象

- 使用 v-bind 指令动态控制类名和样式

- 添加 Methods 和 Computed 属性

- 通过 Vue.set 方法向一个对象动态添加属性

- 使用 setTimeout 方法延迟 JavaScript 插件加载

- JavaScript 对象的浅拷贝和深拷贝

- 使用 Lodash 工具库

我们开始学习吧。

准备（包括项目所需的库）

第一步很简单，从 CDN 导入库到我们的 HTML5 基础代码中，这样就可以开始我们的小型项目了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Card Game</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

</body>
</html>

允许用户看到卡片网格

接下来，我们定义一些必要的 HTML 页面结构、CSS 样式和一个基础的 Vue 实例，这样用户就看得到这些卡片网格了。

Vue 实例

创建一个 Vue 的实例，在 data 属性内部定义一个 cards 属性用于存放卡片列表。

let app = new Vue({
    el: '#app',
    data:{
            cards: [
                {
                    name: 'Apple',
                    img: 'apple.gif',

                },
                {
                    name: 'Banana',
                    img: 'banana.gif',

                },
                {
                    name: 'Orange',
                    img: 'orange.jpg',

                },
                {
                    name: 'Pineapple',
                    img: 'pineapple.png',

                },
                {
                    name: 'Strawberry',
                    img: 'strawberry.png',

                },
                {
                    name: 'watermelon',
                    img: 'watermelon.jpg',

                },
            ],
    },
});

数组内的每个对象包含两个属性：图片的名字（用于匹配）和卡片上的图片。

HTML

我们已经在 Vue 实例中准备好了数据，可以在 VueJS 中通过 v-for 指令循环遍历它们。

<div id="app">
    <div class="row">
        <div class="col-md-6 col-lg-6 col-xl-5 mx-auto">
             <div class="row justify-content-md-center">
                    <div v-for="card in cards" class="col-auto mb-3 flip-container">
                    <div class="memorycard">
                        <div class="front border rounded shadow"><img width="100" height="150" src="/assets/images/memorycard/pattern3.jpeg"></div>
                        <div class="back rounded border"><img width="100" height="150" :src="'/assets/images/memorycard/'+card.img"></div>
                    </div>
                 </div>
            </div>
        </div>
    </div>
    </div>

我们使用了一些基础的 Bootstrap 框架内容搭配 VueJS 的 v-for 指令来循环遍历这些卡片，让它们以网格的形式展示出来。

每张记忆卡片由两部分组成：

- 正面：这里是一张所有卡片都会用到的公共图片（默认卡片显示的样子）

- 背面：这里包含每张卡片实际的图片（默认设置为隐藏）

添加一些基础的 CSS 样式，这样我们就只展示卡片的正面（默认卡片显示的样子）：

.flip-container {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -o-perspective: 1000;
        perspective: 1000;
        min-height: 120px;
        cursor: pointer;
    }
    .front,
    .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;
        -moz-transition: 0.6s;
        -moz-transform-style: preserve-3d;
        -o-transition: 0.6s;
        -o-transform-style: preserve-3d;
        -ms-transition: 0.6s;
        -ms-transform-style: preserve-3d;
        transition: 0.6s;
        transform-style: preserve-3d;
        top: 0;
        left: 0;
        width: 100%;
    }
    .back {
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
        position: absolute;
    }

刷新页面，然后你应该看到 6 张正面的卡片以网格的形式展示，而每张卡片上的图片隐藏在背面。

卡片的正面（通过 v-for 循环指令展示）

翻转卡片

接下来，给卡片绑定一个时间，这样每当我们点击时，它应该翻转并显示背面的图片。

在原始的卡片数组的基础上添加另一个属性。这将确定当前卡片是否被翻转。

添加下面的 CSS 样式。当类名 flipped 添加到卡片的类名上时，将展示卡片的背面。同时，该样式可以设置一个好看的翻转动效。

 .flip-container.flipped .back {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    .flip-container.flipped .front {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

使用 Vue 的 created 生命周期函数添加新的属性，然后添加一个 flipCard 方法来翻转卡片。

  created(){
        this.cards.forEach((card) => {
            card.isFlipped = false;
        });
    },

    methods:{
        flipCard(card){
            card.isFlipped = true;
        }
    }

给卡片绑定点击事件，调用 flipCard 方法，然后使用 v-bind 指令给卡片绑定 flipped 类。

 ...
<div v-for="card in cards" class="col-auto mb-3 flip-container" :class="{ 'flipped': card.isFlipped }" @click="flipCard(card)">
 ...

似乎还不错，我们看看点击一下卡片是否会翻转。

点击卡片未翻转

这个方法行不通，为什么呢？

回到刚才在生命周期函数中，我们在那里遍历卡片列表，并添加了一个新的属性，isFlipped——看上去没问题，但是 Vue 不喜欢这样。

想要让一个对象上新的属性生效，你需要使用 Vue.set 方法将它们添加到对象中。

   created(){
        this.cards.forEach((card) => {
            Vue.set(card,'isFlipped',false)
        });
    },

现在卡片应该在点击时会翻转了：

挺好的！我们继续写代码。

匹配和洗牌

对，没错！使用这些卡片制作一个记忆游戏，我们需要每张卡片都正好有跟它匹配的卡片。同时我们也需要在游戏开始时清洗卡片的排列顺序。

在 Vue 实例中添加一个 memoryCards 属性，存放翻转过的卡片（也就是说，每张翻转后的卡片，都有另一张卡片和它背面的图片）。

 ...
memoryCards: [],
...

匹配

将卡片数组拼接起来，赋值给 memoryCards 属性，以实现每两张卡片背面的图片相同。

改变在 HTML 中的 v-for 指令遍历对象，让它从原来的 cards 数据改变到 memoryCards 数组。

 <div v-for="card in memoryCards" class="col-auto mb-3 flip-container" :class="{ 'flipped': card.isFlipped }" @click="flipCard(card)">

然后，修改 created 方法，将数组拼接到 memoryCards 中：

 created(){
        this.cards.forEach((card) => {
            Vue.set(card,'isFlipped',false)
        });

        var cards1 = this.cards;
        var cards2 = this.cards;
        this.memoryCards = this.memoryCards.concat(cards1, cards2);
    },

是不是挺简单？

但这么做有两个问题：

- 直接让 cards1 等于 this.cards，并不能产生一个新的用于匹配的 cards 对象，cards1 指向的仍然是原始对象。

- cards1 和 cards2 指的是同一个对象。

改变 memoryCards 对象中的任何属性会引起两个匹配的数组同时变化。

我们可以试试用深拷贝来解决这个问题。

什么是深拷贝？

对于对象或数组中包含其他对象和数组的情况，要想拷贝这些元素需要通过深拷贝。否则，当改变嵌套引用上的数据时，原始对象和数组中的数据也会发生改变。

进行深拷贝的方法有很多，我们将使用最简单也是最常用的方法，使用 Lodash 库。

那么，什么是 Lodash 库?

Lodash 处理了对数组、数字、对象、字符串等类型的一些复杂操作，让 JavaScript 变得更方便使用。

在这个例子中，Lodash 有一个方法能让深拷贝的操作变得极其简单。

首先，通过下载源码或者使用 CDN 引用将 Lodash 包含在页面中。

 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

接下来，使用 Lodash 的 cloneDeep 方法对卡片数组进行深拷贝。

 var cards1 = _.cloneDeep(this.cards);
 var cards2 = _.cloneDeep(this.cards);
 this.memoryCards = this.memoryCards.concat(cards1, cards2);

洗牌

现在我们将打乱组合起来的数组。Lodash 有一个可以方法同样可以打乱数组。我们使用这个方法，然后，为了简化代码，我们可以将拼合数组和打乱数组写在一行中。

 created(){
        this.cards.forEach((card) => {
            Vue.set(card,'isFlipped',false)
        });

        this.memoryCards = _.shuffle(this.memoryCards.concat(_.cloneDeep(this.cards), _.cloneDeep(this.cards)));
    },

现在就能实现洗牌和正常的翻转啦。

匹配卡片

下一步是匹配翻转的卡片。用户一次最多可以翻转两张卡片。如果背面的图片相同，那么匹配成功。如果不同，再翻转到正面。

我们给每张卡片增加一个新的属性，记录卡片是否已经匹配：

 this.cards.forEach((card) => {
    Vue.set(card,'isFlipped',false);
    Vue.set(card,'isMatched',false);
});

创建一个新的属性用于存放翻转的卡片：

 flippedCards: [],

接下来，我们定义一个 flipCard 方法去执行匹配的操作：

 flipCard(card){
    card.isFlipped = true;

    if(this.flippedCards.length < 2)
        this.flippedCards.push(card);
    if(this.flippedCards.length === 2)    
        this._match(card);
},

_match(card){

    if(this.flippedCards[0].name === this.flippedCards[1].name)
        this.flippedCards.forEach(card => card.isMatched = true);
    else
        this.flippedCards.forEach(card => card.isFlipped = false);

    this.flippedCards = [];
},

这段逻辑很简单：我们持续往 flippedCards 数组中添加卡片，直到出现两张一样的为止。

当出现两张背面图片相同的卡片时，我们执行匹配的逻辑：

- 如果两张卡片的名字一样，我们通过设置 isMatched 属性为 true 来标记卡片匹配

- 否则，设置 isFlipped 属性为 false

之后我们清空 flippedCards 数组。

在匹配的卡片上添加新的 CSS 属性让其淡出：

 .matched{
   opacity: 0.3;
}

该组件容器 class 上绑定属性，当卡片匹配时设置值为 true：

 :class="{ 'flipped': card.isFlipped, 'matched' : card.isMatched }"

这里运行时正常，但是逻辑判断等都发生得太快了，以致于用户根本不知道发生了什么。如果卡片不匹配，它们甚至会在用户看到显示的卡片背面之前就向后翻转。

我们使用 JavaScript 的 setTimeout 方法来添加一些延迟效果。

 _match(card){
    if(this.flippedCards[0].name === this.flippedCards[1].name){
        setTimeout(() => {
            this.flippedCards.forEach(card => card.isMatched = true);
            this.flippedCards = [];
        }, 400);
    }
    else{
        setTimeout(() => {
            this.flippedCards.forEach((card) => {card.isFlipped = false});
            this.flippedCards = [];
        }, 800);
    }
},

我们在卡片被标记匹配之前添加了 0.4 秒的延迟，以及卡片在返回时添加了 0.8 秒的延迟。

同时修改 flipCard 方法，当出现以下情况时不翻转：

- 卡片已经匹配

- 卡片已经翻转

- 用户已经翻转两张卡片

 flipCard(card){

    if(card.isMatched || card.isFlipped || this.flippedCards.length === 2)
            return;

    card.isFlipped = true;

    if(this.flippedCards.length < 2)
        this.flippedCards.push(card);
    if(this.flippedCards.length === 2)    
        this._match(card);
},

还差几步，项目马上就要完成了。

完成游戏

当所有卡片都得到匹配时，游戏就结束了。

让我们快速编写结束的条件代码，在 Vue 实例中声明一个新的属性：

 ...
finish: false

然后，我们修改一下 match 方法，检查是否所有的卡片都得到匹配：

 setTimeout(() => {
    this.flippedCards.forEach(card => card.isMatched = true);
    this.flippedCards = [];

    //All cards matched ?
    if(this.memoryCards.every(card => card.isMatched === true)){
        this.finish = true;
    }

}, 400);

我们使用 JavaScript 数组操作中的 every 方法，用于判断给定条件是否为真，如果不是则返回 false。

记录翻转的次数和总耗时

我们创建好了游戏，现在添加一些画龙点睛的方法让游戏变得更有趣。我们将添加用户用了多少次，以及花费了多少时间来完成这个游戏。

首先，声明几个新的属性：

start: false
turns: 0,
totalTime: {
    minutes: 0,
    seconds: 0,
},

一旦有两张牌翻转，我们就增加次数。因此，我们需要修改 _match 方法来累计翻转：

 ...
_match(card){

    this.turns++;

    ...

然后修改 flipCard 方法来启动计时器：

 flipCard(card){

    if(card.isMatched || card.isFlipped || this.flippedCards.length === 2)
            return;


    if(!this.start){
        this._startGame();
    }

    ...
    ...

增加两个方法，在游戏开始时启动计时：

 _startGame(){
    this._tick();
    this.interval = setInterval(this._tick,1000);
    this.start = true;
},

_tick(){
    if(this.totalTime.seconds !== 59){
         this.totalTime.seconds++;
         return
     }

     this.totalTime.minutes++;
     this.totalTime.seconds = 0;
},

当分钟和秒前面数字只有一位的时候，我们使用 computed 属性来在它们前面补充 0。

 computed:{
    sec(){
        if(this.totalTime.seconds < 10){
            return '0'+this.totalTime.seconds;
        }
        return this.totalTime.seconds;
    },
    min(){
        if(this.totalTime.minutes < 10){
            return '0'+this.totalTime.minutes;
        }
        return this.totalTime.minutes;
    }
}

在你用来显示总共次数和时间的 HTML 下面，添加以下的 HTML 代码：

 <div class="d-flex flex-row justify-content-center py-3">
    <div class="turns p-3"><span class="btn btn-info">Turns : <span class="badge" :class="finish ? 'badge-success' : 'badge-light'">{{turns}}</span> </span></div>
    <div class="totalTime p-3"><span class="btn btn-info">Total Time : <span class="badge" :class="finish ? 'badge-success' : 'badge-light'">{{min}} : {{sec}}</span></span></div>
</div>

修改游戏结束的判断条件，当游戏结束立刻停止计时：

 if(this.memoryCards.every(card => card.isMatched === true)){
    clearInterval(this.interval);
    this.finish = true;
}

重置

我们到了最后一步了——如果能到达这里，那就说明你很厉害了。

给游戏添加一个重置按钮：

 <div class="totalTime p-3"><button class="btn btn-info" @click="reset" :disabled="!start">Restart</button></div>

在 click 事件上绑定一个 reset 方法：

 reset(){
    clearInterval(this.interval);

    this.cards.forEach((card) => {
        Vue.set(card, 'isFlipped',false);
        Vue.set(card, 'isMatched',false);
    });

    setTimeout(() => {  
        this.memoryCards = [];
        this.memoryCards = _.shuffle(this.memoryCards.concat(_.cloneDeep(this.cards), _.cloneDeep(this.cards)));
        this.totalTime.minutes = 0;
        this.totalTime.seconds = 0;
        this.start = false;
        this.finish = false;
        this.turns = 0;
        this.flippedCards = [];

        }, 600);

},

恭喜你用 VueJS 完成一个记忆游戏！

网站首页 > 技术文章正文

Vue.js 项目实践——创建记忆卡片游戏

前言

准备（包括项目所需的库）

允许用户看到卡片网格

什么是深拷贝？

完成游戏

记录翻转的次数和总耗时

重置

推荐Vue学习资料文章：

猜你喜欢

网站首页 > 技术文章 正文

Vue.js 项目实践——创建记忆卡片游戏

前言

准备（包括项目所需的库）

允许用户看到卡片网格

什么是深拷贝？

完成游戏

记录翻转的次数和总耗时

重置

推荐Vue学习资料文章：

猜你喜欢

网站首页 > 技术文章正文