Vue实现翻动卡片小游戏

最新推荐文章于 2024-02-23 14:54:43 发布
最新推荐文章于 2024-02-23 14:54:43 发布
阅读量1.2k 收藏 10
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43477721/article/details/107119089
版权

在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>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">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

    <style>
        body {
            background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
            height: 100%;
            width: 100%;
        }
        .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;
        }

        .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);
        }

        .matched {
            opacity: 0;
        }
    </style>
</head>

<body>

    <div id="app">
        <div class="d-flex flex-row justify-content-center py-3">
            <div class="turns p-3"><span class="btn btn-info">翻动次数 : <span class="badge"
                        :class="finish ? 'badge-success' : 'badge-light'">{{turns}}</span> </span></div>
            <div class="totalTime p-3"><span class="btn btn-info">花费时间 : <span class="badge"
                        :class="finish ? 'badge-success' : 'badge-light'">{{min}} : {{sec}}</span></span></div>
            <div class="totalTime p-3"><button class="btn btn-info" @click="reset" :disabled="!start">重置</button></div>
        </div>

        <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 memoryCards" class="col-auto mb-3 flip-container"
                        :class="{ 'flipped': card.isFlipped, 'matched' : card.isMatched }" @click="flipCard(card)">
                        <div class="memorycard">
                            <div class="front border rounded shadow"><img width="100" height="150"
                                    src="./011a235e36b104a801216518a0bbab.jpg@1280w_1l_2o_100sh.jpg"></div>
                            <div class="back rounded border" style="width: 100px; height: 150px;">
                                <img width="100" height="150" :src="card.img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                // 存储相同的卡片
                memoryCards: [],
                // 存储翻动的卡片
                flippedCards: [],
                // 结束
                finish: false,
                // 是否显示
                show: true,
                // 初识卡片
                cards: [
                    {
                        name: 'Apple',
                        img: './apple.jpeg',

                    },
                    {
                        name: 'Banana',
                        img: './banana.jpeg',

                    },
                    {
                        name: 'Orange',
                        img: './orange.jpeg',

                    },
                    {
                        name: 'Pineapple',
                        img: './pineapple.jpeg',

                    },
                    {
                        name: 'Strawberry',
                        img: './strawberry.jpeg',

                    },
                    {
                        name: 'watermelon',
                        img: './watermelon.jpeg',

                    },
                ],
                // 是否开始游戏
                start: false,
                // 记录翻转次数
                turns: 0,
                // 花费时间
                totalTime: {
                    minutes: 0,
                    seconds: 0,
                },
            },
            created() {
                // 在最开始的时候，给卡片的每一个项都加上是否翻动和匹配的属性
                this.cards.forEach((card) => {
                    Vue.set(card, 'isFlipped', false);
                    Vue.set(card, 'isMatched', false);
                });
                // 每次开始游戏打乱数组的顺序
                this.memoryCards = _.shuffle(this.memoryCards.concat(_.cloneDeep(this.cards), _.cloneDeep(this.cards)));
            },

            methods: {
                // 重置游戏
                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);

                },
                // 翻转卡片
                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);

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

                },


                // 卡片相等验证
                _match(card) {
                    // 记录翻转次数
                    this.turns++;

                    // 如果两张卡片的 name 属性相等，则认为两张卡片匹配成功
                    if (this.flippedCards[0].name === this.flippedCards[1].name) {
                        setTimeout(() => {
                            // 改变两张卡片的匹配属性
                            this.flippedCards.forEach(card => card.isMatched = true);
                            // 将数组置空
                            this.flippedCards = [];

                            // 隐藏两张匹配的卡片包
                            this.show = false

                            // 判断游戏结束
                            if (this.memoryCards.every(card => card.isMatched === true)) {
                                clearInterval(this.interval);
                                this.finish = true;
                            }
                        }, 400);
                    }
                    else {
                        setTimeout(() => {
                            this.flippedCards.forEach(card => { card.isFlipped = false });
                            this.flippedCards = [];

                        }, 800);
                    }
                },
                // 开始游戏
                _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: {
                // 设置时间格式
                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;
                }
            }
        });

    </script>
</body>

</html>

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临
在这里插入图片描述

淘淘是只狗
关注
专栏目录
动画效果：实现卡片翻转抽奖动画（正反面内容不一样）
小多的博客
09-16 1235
根据不同条件动态添加实现动画效果首先，为卡片列表添加一个是否翻转的元素 分别设置正反两面的样式及内容翻转 动画一： 完整代码 动画二： 完整代码
vue实现卡片式上下滑动_小卡片左右滑动的实现
weixin_39551554的博客
12-20 3482
背景项目需求，要实现卡片左右滑动的功能，类似这样：在实现过程中遇到了如下问题：卡片角标实现边距问题安卓手机适配问题翻页问题角标实现角标及文字可以采用绝对定位和css3的rotate来实现，注意点是在父元素上要overflow：hidden.recomm-item-sup{position: absolute;/*background-color: aquamarine;*/color: #fff;...
上下卡片式翻页的动画Animation效果
04-03
该源码不但可以实现了上下卡片式翻页的动画Animation效果，而且还能够支持多翻动画效果，翻页提示动画，翻页动画，多翻动画，。
vue-info-card-一个简单漂亮的卡片组件，带有优美的火花线和CSS3翻转动画。-Vue.js开发
05-27
用于VueJS的简单美观的卡片组件，带有精美的火花线。 演示可以在此处找到该组件的实时演示。 安装npm i -S vu用于VueJS的简洁美观的卡片组件，带有优美的火花线。 演示可以在此处找到该组件的实时演示。 安装npm i -S vue-info-card用法安装后，可以通过传递适当的道具来使用组件来显示数据和消息。 单个文件组件中的用法示例如下：
Vue中利用CSS实现卡片滑动翻转
Zoriah的博客
12-27 1316
.scene { width: 100%; height: 100%; border: 1px solid #CCC; perspective: 600px; } .card { position: relative; width: 100%; height: 100%; cursor: pointer; transform-style: preserve-3d; transform-origin: right center; transition: trans
卡片翻转
liting1996的博客
10-28 539
闲来无事，最近在学css3的新属性，然后就做了一个简单的卡牌翻转效果，一个小东西，搬出来献丑和大家分享下 //body部分                      翻开有惊喜哦             点击我翻面                               哈哈，被骗了吧             重新来过               //css部
vue3实现鼠标点击卡片翻转效果
hsyq586的博客
11-17 1329
当点击该按钮时，会调用flipAllCards方法，遍历cards数组，并将每个卡片的flipped属性取反，从而实现全部卡片同时翻转，并且在flipAllCards 方法中添加逻辑来检查卡片的当前状态，如果已经是反面，则不进行翻转。每个卡片都有front和back两个面，初始状态下都是正面（flipped: false）。通过点击卡片，我们可以改变对应卡片的flipped属性，从而实现翻转动画。使用v-bind:class指令来动态切换卡片的类名，根据flipped属性的值来决定显示正面还是反面的内容。
如何使用Vue实现卡片翻转效果
weixin_45966507的博客
05-12 1636
元素背对屏幕时不可见，使用这个属性做到了卡片不属于正面即不显示，很好地移除掉了我们不需要的效果；这个属性是指元素离我们z轴观察者的距离为多远，如果设置为0，则有一种快溢出屏幕的效果，各位可以自己试一试；一个过渡动画的样式，表现为先慢后快，很适合用来做卡片翻转；：（这里我还使用了Card组件）
vue实现卡片式上下滑动_基于Vue.js仿制探探卡片左右滑动特效
weixin_39980184的博客
12-20 1494
说明> 最近一直在捣鼓Nuxt.js项目，项目中有个需求是实现类似探探左右滑动切换功能。要求能实现手指拖拽切换、点击按钮进行切换、拖拽回弹等功能。如上图：最终展示效果emmm~~ 是不是感觉还阔以。下面就来简单的讲解下实现过程。布局整体布局分为 顶部topbar、卡片滑动区、底部tabbar 三个部分。 遇见TA侧边栏筛选框点击右上角按钮，侧边会出现弹窗。范围滑块、switch开关、Rate...
vue展示信息卡片_vue实现登录和个人信息组件展示
weixin_29660659的博客
12-31 3827
最近在写一个重构node社区的小项目，碰到了登录的问题，实现思路如下：1.获取用户表单信息，使用axios提交，提交成功后，把数据存在cookie,以便后续操作。2.其中有个人信息的页面展示，获取cookie信息，判断用户是否登录，如果登录则显示内容，未登录则跳转到登录页面，所以个人信息的页面可以使用路由守卫搜索资料时有看到这种写法，就是经过判断后去改变的动态路由来决定跳转到哪个组件，感觉稍显麻烦...
vue_hs:vue.js版炉石卡牌库和卡组模拟器
05-16
vue_hs vue.js版炉石卡牌模拟器 线上试用地址 Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report TODO 组建卡牌页面，增加分享功能，分费用卡组统计 组建卡牌，只筛选出当前游戏标准模式的卡牌（或者分为狂野和标准） 卡牌优化，有些是旧的卡牌了，没更新；卡牌详情页完善 后台卡牌管理系统 卡组功能 FINISHED 2017-08-04 组建卡牌页面，增加
js CSS3实现卡牌旋转切换效果
10-19
主要为大家详细介绍了js CSS3实现卡牌旋转切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue城堡绝斗卡牌游戏完整源码.zip
07-25
该案例是一个基于浏览器的游戏。 游戏中包含两名玩家，每名玩家控制一座城堡，利用手里的行动卡牌将对方的食物或生命值降为 0，以达到摧毁对方城堡的目的。你可以直接通过浏览器打开index.html就可以玩。游戏还拥有动画和SVG图形。同时这个案例可以全面的掌握Vue.js的基础知识。
vue实现最简单的打字小游戏
A081127的博客
03-09 5064
就想做点小游戏，都是自己想的自己一步步做出来的，做完好有成就感，虽然好简单。 做出点小东西能让自己更有信心去学习 用了less,vue2 页面用flex布局的 用了watch属性监视文本输入的内容 先用if判断输入的与页面上的单词是否一样，一样就给当前的单词背景变色 判断有没有输入过，没输入过再就放到一个新的数组上 判断新数组里有没有这个单词如果没有才进入判断，再给新数组增加单词 给输入框设置为空，numder减一剩余数量 设置good标志显示隐藏，先设置显示，再设置个定时器隐藏 就..
vue展示信息卡片_vue组件系列－气泡卡片
weixin_42442653的博客
12-31 2418
从模态弹框讲起前端攻城????️对模态弹框肯定很熟悉，不管是套用bootstrap的还是自己写的，它常用来完成与用户的展示交互和处理一些数理逻辑。但是在用来展示小体量的信息时我认为它是过于庞大的，我们可以采用更优雅的气泡卡片来展示那些小体量的信息。就像这样的↓↓↓先附上体验地址实现vue模版{{title}}{{content}}这里对熟悉vue的同学来讲没有什么特殊的地方，主要有一个slot标签会有疑...
js bind 传参、_Vue.js 记忆卡片项目实战
weixin_39932330的博客
10-27 212
Photo by Nada Gamal on Unsplash如果你刚开始学习 Vue，想巩固基础知识，那么你可以试试通过这个有趣的练习来创建一个好玩的游戏。在这篇文章中，我将逐步教你用 Vue.js 创建一个记忆卡片游戏。这篇文章会介绍以下知识点：- 使用 v-for 命令循环遍历一个数组对象- 使用 v-bind 指令动态控制类名和样式- 添加 Methods 和 Computed...
vue3.0+TypeScript实现卡片九宫格选中后卡片翻转特效
最新发布
weixin_42039805的博客
02-23 396
自定义九宫格数量、卡片翻转抽奖特效
前端vue实现卡片翻转效果【css3实现】
在写作的路上持续输出。
06-15 2353
前端vue实现卡片翻转效果【css3实现】一✈
vue实现卡牌数字动态翻牌效果
DZQ1223的博客
07-26 1864
【代码】vue实现卡牌数字动态翻牌效果。
vue实现漂流瓶小游戏
10-31
Vue实现漂流瓶小游戏需要用到Vue的组件化开发和数据驱动特性。 首先要创建一个Vue实例，其中包含了漂流瓶游戏的各个组件，比如瓶子组件、海洋组件等。可以使用Vue的模板语法来定义这些组件的结构和样式。 在漂流瓶组件中，可以使用Vue的数据绑定来动态展示漂流瓶的位置和内容。可以使用Vue的指令来监听用户的点击事件，当用户点击瓶子时，可以触发一个方法，将瓶子的信息等数据发送给后台，并接收后台返回的漂流瓶信息。 在海洋组件中，可以使用Vue的生命周期钩子函数来监听数据的变化，并根据数据的变化动态更新海洋中的漂流瓶的位置和内容。可以使用Vue的过渡效果来实现瓶子的动画效果。 另外，还可以使用Vue的路由功能来实现游戏的不同页面，比如首页、游戏页面和结束页面等。可以使用Vue的路由导航组件来实现页面之间的切换。 在游戏过程中，可以使用Vue的计算属性来实现一些游戏逻辑，比如统计漂流瓶的数量、判断游戏是否结束等。 总体来说，Vue提供了丰富的工具和功能，可以方便地实现漂流瓶小游戏。通过组件化开发和数据驱动特性，可以快速构建出一个交互性强、界面美观的漂流瓶小游戏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值