站长资源网络编程
vue实现打地鼠小游戏
简介本文实例为大家分享了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 " @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>
更多有趣的经典小游戏实现专题，分享给大家：
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
java经典小游戏汇总
javascript经典小游戏汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：基于vue实现简易打地鼠游戏
下一篇：js实现滑动进度条效果