vue制作翻牌游戏
点击开始进行翻牌游戏
思路：利用v-show控制图片的翻转和按钮的显现；利用v-for实现数组图片展现；利用sort打乱数组；利用location.reload()强制刷新页面。
步骤
1.头部导入vue文件
<script src="js/vue.js"></script>2.定义一个用来接收传值的div（自由起名，在此我用的是z-div，然后使用v-for属性遍历循环数组中的元素，用v-bind绑定im，并将变量i赋给im）和三个按钮，按钮分别用来开始游戏，刷新图片和重置网页，当网页未运行时，开始按钮显示，其他两个按钮隐藏，点击开始时，开始按钮隐藏，刷新和重置按钮显示，使用可以用v-show控制三个按钮，定义一个属性为flag并绑定v-show，当flag为真时，开始按钮显示，所以可以设置为v-show='flag'，但此时重置和刷新按钮隐藏，所以这两个按钮应该设置为v-show='！flag'，使得效果正好与开始按钮相反。以此得到开始按钮显现时他们两个隐藏，他们两个显现时开始按钮隐藏。
<div id="app">
<z-div v-for="i in img" :im="i"></z-div>
<button @click="ran" v-show="flag">开始</button>
<button @click="rn" v-show="!flag">重置</button>
<button @click="rdn" v-show="!flag">刷新</button>
</div>3.定义一个组件，里面放入需要传输的值，因为要实现点击图片翻转，所以可以有两种情况，一种是两张图片来回切换，用v-show绑定，使两个图片显现隐藏效果相反，一个显现则另一个隐藏，另一种则是定义一个div，使div大小与图片大小一致，然后设置一个背景颜色，图片插入div中，当图片隐藏时，则div显示，此时因为div被赋予了背景颜色，所以也可以实现点击翻转效果，此处我们使用第二种方法。（因为要实现点击图片隐藏效果，所以要给div设置点击函数，此处不能将点击函数设置在图片上，否则图片隐藏后，点击div则无效果）
<template id="imgs">
<div id="box" @click="change">
<img :src="im" alt="" v-show="show">
</div>
</template>4.定义一个全局组件，使用props属性（父组件向子组件传值）定义一个im（变量通过属性绑定，绑定到子组件身上），此时未点击开始按钮，所以点击事件暂不使用。
Vue.component( 'z-div', {
template: '#imgs',
props: [ 'im' ],
data ()
{
return {
show: true
}
},
methods: {
change () { }
}
} )5.定义一个新的vue，el表示作用范围在app这个div里，定义一个数组img，并将图片传入数组，定义前面提到的flag，此时他的值为真，所以开始按钮显示，刷新和重置隐藏。
var vm = new Vue( {
el: '#app',
data: {
img: [
'img/222_01.jpg',
'img/222_02.jpg',
'img/222_03.jpg',
'img/222_04.jpg',
'img/222_05.jpg',
'img/222_06.jpg',
'img/222_07.jpg',
'img/222_08.jpg',
'img/222_09.jpg',
'img/222_10.jpg',
'img/222_11.jpg',
'img/222_12.jpg',
'img/222_13.jpg',
'img/222_14.jpg',
'img/222_15.jpg',
'img/222_16.jpg',
'img/222_17.jpg',
'img/222_18.jpg',
'img/222_19.jpg',
'img/222_20.jpg',
'img/222_21.jpg',
'img/222_22.jpg',
'img/222_23.jpg',
'img/222_24.jpg',
'img/222_25.jpg'
],
flag: true
}6.定义开始按钮的点击函数，先定义一个随机数函数为打乱数组做准备，然后点击时，图片需要隐藏，所以flag的值要变为false，可以用flag=！flag表示，然后使用sort函数打乱数组顺序并传给z-div，此处可直接复用Vue.component，但注意要将show的值改为false，此时点击函数change需要被定义，点击div时图片显现，再次点击隐藏，使用show=！show。
ren ()
{
return 0.5 - Math.random()
},
ran ()
{
this.flag = !this.flag
this.img.sort( this.ren )
Vue.component( 'z-div', {
template: '#imgs',
props: [ 'im' ],
data ()
{
return {
show: false
}
},
methods: {
change: function ()
{
this.show = !this.show
}
}
} )
}7.定义重置按钮点击事件，强制刷新页面。
rn ()
{
location.reload()
}8.定义刷新按钮点击事件，打乱数组并将显现的图片全部隐藏，可复用开始按钮点击函数代码。
rdn ()
{
this.img.sort( this.ren )
Vue.component( 'z-div', {
template: '#imgs',
props: [ 'im' ],
data ()
{
return {
show: false
}
},
methods: {
change: function ()
{
this.show = !this.show
}
}
} )
}9.css样式
* {
margin: 0;
padding: 0;
}
#app {
width: 550px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
img {
width: 108px;
height: 138px;
}
#box {
width: 108px;
height: 138px;
background-color: pink;
margin: 1px 0px;
}
button {
background-color: pink;
border: none;
width: 200px;
height: 50px;
border-radius: 50px;
font-size: 25px;
color: aliceblue;
}运行效果
Ⅰ.打开网页最初样子（图片排版使用弹性布局）
Ⅱ.点击开始按钮，图片进行翻转并打乱顺序，开始按钮消失，下方出现两个新按钮：重置和刷新。
Ⅲ.点击粉色方块区域翻转出现图片（此时图片已被打乱）
Ⅳ.点击刷新按钮，图片重新打乱，并且已经翻转的图片重新翻回去。
Ⅴ.点击重置按钮，刷新页面，页面回到最初打开网页的样子。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script src="js/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 550px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
img {
width: 108px;
height: 138px;
}
#box {
width: 108px;
height: 138px;
background-color: pink;
margin: 1px 0px;
}
button {
background-color: pink;
border: none;
width: 200px;
height: 50px;
border-radius: 50px;
font-size: 25px;
color: aliceblue;
}
</style>
</head>
<body>
<div id="app">
<z-div v-for="i in img" :im="i"></z-div>
<button @click="ran" v-show="flag">开始</button>
<button @click="rn" v-show="!flag">重置</button>
<button @click="rdn" v-show="!flag">刷新</button>
</div>
<template id="imgs">
<div id="box" @click="change">
<img :src="im" alt="" v-show="show">
</div>
</template>
<script>
Vue.component( 'z-div', {
template: '#imgs',
props: [ 'im' ],
data ()
{
return {
show: true
}
},
methods: {
change () { }
}
} )
var vm = new Vue( {
el: '#app',
data: {
img: [
'img/222_01.jpg',
'img/222_02.jpg',
'img/222_03.jpg',
'img/222_04.jpg',
'img/222_05.jpg',
'img/222_06.jpg',
'img/222_07.jpg',
'img/222_08.jpg',
'img/222_09.jpg',
'img/222_10.jpg',
'img/222_11.jpg',
'img/222_12.jpg',
'img/222_13.jpg',
'img/222_14.jpg',
'img/222_15.jpg',
'img/222_16.jpg',
'img/222_17.jpg',
'img/222_18.jpg',
'img/222_19.jpg',
'img/222_20.jpg',
'img/222_21.jpg',
'img/222_22.jpg',
'img/222_23.jpg',
'img/222_24.jpg',
'img/222_25.jpg'
],
flag: true
},
methods: {
ren ()
{
return 0.5 - Math.random()
},
ran ()
{
this.flag = !this.flag
this.img.sort( this.ren )
Vue.component( 'z-div', {
template: '#imgs',
props: [ 'im' ],
data ()
{
return {
show: false
}
},
methods: {
change: function ()
{
this.show = !this.show
}
}
} )
},
rn ()
{
location.reload()
},
rdn ()
{
this.img.sort( this.ren )
Vue.component( 'z-div', {
template: '#imgs',
props: [ 'im' ],
data ()
{
return {
show: false
}
},
methods: {
change: function ()
{
this.show = !this.show
}
}
} )
}
}
} )
</script>
</body>
</html>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)