一起看看vue实现打地鼠小游戏

互联网 20-8-21

【相关学习推荐：js视频教程】

本文实例为大家分享了vue实现打地鼠小游戏的具体代码，供大家参考，具体内容如下

效果图如下：

代码如下：

<template>  <p class="game">  <h2>打地鼠游戏</h2>  <p class="wraper">  <p class="item" v-for="n in TOTAL" :key="n">  <p :style="{'visibility': random === n ? 'visible' : 'hidden'}" @click="clickItem">{{n}}号地鼠</p>  </p>  </p>  <p class="scoped">  <p 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>  </p>  <p class="count set">  <h3>统计分数面板</h3>  <h3>总数： {{TOTAL}}</h3>  <h3>击中： {{clickNum}}</h3>  <h3>击中率： {{level}}%</h3>  </p>  </p>  </p> </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;  p {  height: 100%;  background: #eee;  border-radius: 50px;  }  } } </style>