vue实现打地鼠小游戏
程序员文章站
2022-07-24 15:17:59
本文实例为大家分享了vue实现打地鼠小游戏的具体代码,供大家参考,具体内容如下效果图如下:代码如下:
本文实例为大家分享了vue实现打地鼠小游戏的具体代码,供大家参考,具体内容如下
效果图如下:
代码如下:
<template>
<div class="game">
<h2>打地鼠游戏</h2>
<div class="wraper">
<div class="item" v-for="n in total" :key="n">
<div :style="{'visibility': random === n ? 'visible' : 'hidden'}" @click="clickitem">{{n}}号地鼠</div>
</div>
</div>
<div class="scoped">
<div class="set">
<p>设置参数</p>
<p>
速度: <input type="number" v-model="setspeed">
</p>
<p>
总数:<input type="number" v-model="setnum">
</p>
<p>
<button @click="playgame">开始</button>
</p>
</div>
<div class="count set">
<h3>统计分数面板</h3>
<h3>总数: {{total}}</h3>
<h3>击中: {{clicknum}}</h3>
<h3>击中率: {{level}}%</h3>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
clickflag: true, // 单个地鼠只能点击一次
setnum: 40, // 绑定设置地洞数量
setspeed: 1000, // 绑定设置地鼠出现速度
speed: 2000, // 地鼠出现速度
random: '', // 随机出现的地鼠位置
total: 40, // 地鼠总数
count: 0, // 统计总共出现了多少次地鼠同于判断不能大于总数
clicknum: 0, // 点中地鼠统计
timmerid: null
};
},
computed: {
// 统计打中的地鼠数量
level: function () {
let num = ((this.clicknum / this.total) * 100).tofixed(2) || 0;
return num;
}
},
created () {
},
mounted () {
},
methods: {
// 开始游戏
playgame () {
this.random = '';
this.speed = parseint(this.setspeed);
this.total = parseint(this.setnum);
clearinterval(this.timmerid);
this.timmerid = setinterval(() => {
this.random = math.floor(math.random() * this.total + 1);
this.clickflag = true; // 开放点击
this.count++;
if (this.count >= this.total) {
clearinterval(this.timmerid);
}
}, this.speed);
},
// 点击地鼠
clickitem () {
if (this.clickflag) {
(this.count < this.total) && this.clicknum++;
this.clickflag = false;
}
}
}
};
</script>
<style lang="less" scoped>
.game {
border: 1px solid #ccc;
width: 1200px;
padding: 10px;
user-select: none;
&::after {
content: "";
display: block;
clear: both;
}
h2 {
font-size: 16px;
color: #eee;
padding: 10px 0;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.wraper {
width: 900px;
float: left;
}
.scoped {
width: 260px;
height: 540px;
float: left;
padding-left: 15px;
border-left: 1px solid #ccc;
h3 {
font-size: 16px;
color: #fff;
}
.set {
height: 200px;
width: 100%;
border: 1px solid #ccc;
p {
padding: 10px;
text-align: center;
color: #fff;
font-size: 16px;
button {
width: 90%;
}
}
}
.count {
.set;
margin-top: 20px;
padding-top: 25px;
text-align: center;
line-height: 40px;
h3 {
font-weight:normal;
}
}
}
.item {
display: inline-block;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 0 10px 10px 0;
text-align: center;
line-height: 100px;
font-size: 20px;
border: 1px solid #ccc;
div {
height: 100%;
background: #eee;
border-radius: 50px;
}
}
}
</style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:
最低只要599元 低价指纹识别手机推荐
本文实例为大家分享了vue实现打地鼠小游戏的具体代码,供大家参考,具体内容如下
效果图如下:
代码如下:
<template> <div class="game"> <h2>打地鼠游戏</h2> <div class="wraper"> <div class="item" v-for="n in total" :key="n"> <div :style="{'visibility': random === n ? 'visible' : 'hidden'}" @click="clickitem">{{n}}号地鼠</div> </div> </div> <div class="scoped"> <div class="set"> <p>设置参数</p> <p> 速度: <input type="number" v-model="setspeed"> </p> <p> 总数:<input type="number" v-model="setnum"> </p> <p> <button @click="playgame">开始</button> </p> </div> <div class="count set"> <h3>统计分数面板</h3> <h3>总数: {{total}}</h3> <h3>击中: {{clicknum}}</h3> <h3>击中率: {{level}}%</h3> </div> </div> </div> </template> <script> export default { name: 'app', data () { return { clickflag: true, // 单个地鼠只能点击一次 setnum: 40, // 绑定设置地洞数量 setspeed: 1000, // 绑定设置地鼠出现速度 speed: 2000, // 地鼠出现速度 random: '', // 随机出现的地鼠位置 total: 40, // 地鼠总数 count: 0, // 统计总共出现了多少次地鼠同于判断不能大于总数 clicknum: 0, // 点中地鼠统计 timmerid: null }; }, computed: { // 统计打中的地鼠数量 level: function () { let num = ((this.clicknum / this.total) * 100).tofixed(2) || 0; return num; } }, created () { }, mounted () { }, methods: { // 开始游戏 playgame () { this.random = ''; this.speed = parseint(this.setspeed); this.total = parseint(this.setnum); clearinterval(this.timmerid); this.timmerid = setinterval(() => { this.random = math.floor(math.random() * this.total + 1); this.clickflag = true; // 开放点击 this.count++; if (this.count >= this.total) { clearinterval(this.timmerid); } }, this.speed); }, // 点击地鼠 clickitem () { if (this.clickflag) { (this.count < this.total) && this.clicknum++; this.clickflag = false; } } } }; </script> <style lang="less" scoped> .game { border: 1px solid #ccc; width: 1200px; padding: 10px; user-select: none; &::after { content: ""; display: block; clear: both; } h2 { font-size: 16px; color: #eee; padding: 10px 0; margin-bottom: 20px; border-bottom: 1px solid #ccc; } .wraper { width: 900px; float: left; } .scoped { width: 260px; height: 540px; float: left; padding-left: 15px; border-left: 1px solid #ccc; h3 { font-size: 16px; color: #fff; } .set { height: 200px; width: 100%; border: 1px solid #ccc; p { padding: 10px; text-align: center; color: #fff; font-size: 16px; button { width: 90%; } } } .count { .set; margin-top: 20px; padding-top: 25px; text-align: center; line-height: 40px; h3 { font-weight:normal; } } } .item { display: inline-block; height: 100px; width: 100px; border-radius: 50px; margin: 0 10px 10px 0; text-align: center; line-height: 100px; font-size: 20px; border: 1px solid #ccc; div { height: 100%; background: #eee; border-radius: 50px; } } } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 最低只要599元 低价指纹识别手机推荐