用android做图片翻牌小游戏,vue制作翻牌配对小游戏

今天药忘吃喽~ 2022-10-05 00:59 262阅读 0赞

简友们，好久不见。最近一直忙于工作没时间来为大家分享经验，刚好上周为联\*做了一个七夕活动，是vue做的一个翻牌配对小游戏，上线后吸引了无数广大好友前来挑战。也有好友问我这游戏制作难不难呢，可不可以分享一下呢。当然可以，今天它来了！

首先让大家看下最后效果图：

![b58d5a4c5724?utm\_campaign=haruki][b58d5a4c5724_utm_campaign_haruki]

gif4.gif

简单介绍一下，开始游戏之后开始点击卡片进行翻转，在点击第二张卡片时去判断是否和第一张配对，如果配对成功直接用动画隐掉这两张，如果失败在点击第三张时让前两张翻转过去...以此类推

接下来先看页面布局部分：

*  :class="isRotate ? 'rotate' : ''"
    
    v-for="img in imgs"
    
    :key="img.id"
    
    @click="flip(img)"
    
    ref="card"
    
    >

// css部分：

// 消失动画

@keyframes vanish \{

0% \{

transform: rotate(0deg) scale(1);

opacity: 1;

100% \{

transform: rotate(360deg) scale(0);

opacity: 0;

.gameTab \{

display: flex;

justify-content: space-between;

flex-wrap: wrap;

width: 95%;

margin: 20px auto 20px auto;

.rotate \{

animation: vanish 0.5s forwards;

li \{

width: 24%;

height: 150px;

margin: 2px;

position: relative;

cursor: pointer;

perspective: 800px;

.card \{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

color: \#fff;

line-height: 130px;

text-align: center;

cursor: pointer;

transition: 0.3s ease-in-out;

backface-visibility: hidden;

\-webkit-backface-visibility: hidden;

.front \{

background-color: \#3949c0;

z-index: 2;

transform: rotateY(-180deg);

.back \{

background: url('./../assets/img/peidui.png') no-repeat;

background-size: 100% 100%;

z-index: 1;

transform: rotateY(0);

在这里我们可以看到布局其实很简单，用ul>li 以及vue的v-for循环来进行卡片的布局。动态设置的class样式是卡片消失的动画，样式也是简单的布局设置。

接下来看图片的json数据：

imgs: \[

id: 1,

img: require("./../assets/img/男1.png"),

is\_sign: 1,

\},

id: 2,

img: require("./../assets/img/男2.png"),

is\_sign: 2,

\},

id: 3,

img: require("./../assets/img/男3.png"),

is\_sign: 3,

\},

id: 4,

img: require("./../assets/img/男4.png"),

is\_sign: 4,

\},

id: 5,

img: require("./../assets/img/男5.png"),

is\_sign: 5,

\},

id: 6,

img: require("./../assets/img/男6.png"),

is\_sign: 6,

\},

id: 7,

img: require("./../assets/img/男7.png"),

is\_sign: 7,

\},

id: 8,

img: require("./../assets/img/男8.png"),

is\_sign: 8,

\},

id: 9,

img: require("./../assets/img/男9.png"),

is\_sign: 9,

\},

id: 10,

img: require("./../assets/img/男10.png"),

is\_sign: 10,

\},

id: 11,

img: require("./../assets/img/女1.png"),

is\_sign: 1,

\},

id: 12,

img: require("./../assets/img/女2.png"),

is\_sign: 2,

\},

id: 13,

img: require("./../assets/img/女3.png"),

is\_sign: 3,

\},

id: 14,

img: require("./../assets/img/女4.png"),

is\_sign: 4,

\},

id: 15,

img: require("./../assets/img/女5.png"),

is\_sign: 5,

\},

id: 16,

img: require("./../assets/img/女6.png"),

is\_sign: 6,

\},

id: 17,

img: require("./../assets/img/女7.png"),

is\_sign: 7,

\},

id: 18,

img: require("./../assets/img/女8.png"),

is\_sign: 8,

\},

id: 19,

img: require("./../assets/img/女9.png"),

is\_sign: 9,

\},

id: 20,

img: require("./../assets/img/女10.png"),

is\_sign: 10,

\},

\],

这里用is\_sign来代表各张图片，后续可判断is\_sign是否一致来判断是否配对成功。

// 随机图片位置

randomRender() \{

let imgs = this.imgs,

results = \[\];

results = imgs.sort(() => \{

return Math.random() > 0.5 ? -1 : 1;

\});

this.imgs = results;

\},

图片数据定好之后，我们初始随机图片位置，确保每次游戏的图片位置不一样。

点击卡片事件代码如下(讲解在每一步的注释中)：

// 点击翻牌

flip(img) \{

// 判断是否点击开始游戏

if (this.isStar) \{

// 初始在data中定义空数组 ids；

// 判断是否连续点击相同的牌 不同时添加到数组中

if (img !== this.ids\[0\]) \{

// 翻转卡片

this.$refs.cardz\[img.id - 1\].style.transform = "rotateY(0)";

this.$refs.cardf\[img.id - 1\].style.transform = "rotateY(180deg)";

this.ids.push(img);

// 当已经存进两张卡片时，去判断两张是否配对，如配对成功就将两张卡片消失，并记录一次

if (this.ids.length == 2) \{

if (this.ids\[0\].is\_sign === this.ids\[1\].is\_sign) \{

for (let i = 0; i < this.ids.length; i++) \{

this.$refs.card\[this.ids\[i\].id - 1\].className = "rotate";

this.ids.splice(0, 2);

// 配对成功记录一次 当success = 10 时 挑战成功

this.success++;

if (this.success == 10) \{

clearInterval(this.timer);

// 游戏成功 关闭计时器 展示成功弹窗

\} else if (this.ids.length > 2) \{

// 若前两张未配对成功 当翻开三张牌时 让前两张翻过去 并将数组中这俩卡片数据删除

let x = this.ids.find((value, index, arr) => \{

if (index < 2) \{

return arr\[index\] == img;

\});

if (x == undefined) \{

for (let i = 0; i < this.ids.length - 1; i++) \{

this.$refs.cardz\[this.ids\[i\].id - 1\].style.transform =

"rotateY(180deg)";

this.$refs.cardf\[this.ids\[i\].id - 1\].style.transform =

"rotateY(0)";

this.ids.splice(0, 2);

\} else \{

this.ids.splice(this.ids.length - 1, 1);

\} else \{

Toast("请点击开始游戏");

代码每一步的具体思路讲解在代码中的注释里(想的是根据代码来讲解每一步可能会更清楚一点 -.-!!)

逻辑其实很简单，就是判断点击的两张是否配对，成则消失败则回翻。

游戏代码大致就是这样啦~

如果有不懂的可以评论说出你的疑问哦~或者你有更好的见解也可以共同研究研究哦

[b58d5a4c5724_utm_campaign_haruki]: /images/20221005/e3a671fbd08c4e8d92adc0483fea90f7.png

用android做图片翻牌小游戏,vue制作翻牌配对小游戏

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关翻硬币游戏

相关 vue版，类似于翻比分牌效果。

相关 vue翻牌动画

相关 08-翻金币游戏

相关 28分钟完成一款Python游戏，《客服戏翻总裁牌》

相关 html翻牌动画效果,js+css3翻牌动画效果

相关用android做图片翻牌小游戏,vue制作翻牌配对小游戏

相关翻牌动画

相关 js翻牌3d消消乐小游戏

相关 JS实现数字翻牌效果