vue实现打地鼠小游戏

 更新时间:2020年08月21日 14:25:07   作者:#麻辣小龙虾#  
这篇文章主要为大家详细介绍了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>

更多有趣的经典小游戏实现专题,分享给大家:

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏 玩不停

java经典小游戏汇总

javascript经典小游戏汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • highCharts提示框中显示当前时间的方法

    highCharts提示框中显示当前时间的方法

    今天小编就为大家分享一篇关于highCharts提示框中显示当前时间的方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue实现添加与删除图书功能

    vue实现添加与删除图书功能

    这篇文章主要介绍了vue实现添加与删除图书功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • Vue使用mixin分发组件的可复用功能

    Vue使用mixin分发组件的可复用功能

    这篇文章主要介绍了Vue使用mixin分发组件的可复用功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • VUE组件中的 Drawer 抽屉实现代码

    VUE组件中的 Drawer 抽屉实现代码

    这篇文章主要介绍了VUE组件 之 Drawer 抽屉 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 浅谈Vue的基本应用

    浅谈Vue的基本应用

    本文主要介绍了Vue的基本应用。具有一定的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • 在vue中使用jsonp进行跨域请求接口操作

    在vue中使用jsonp进行跨域请求接口操作

    这篇文章主要介绍了在vue中使用jsonp进行跨域请求接口操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue实现滑动切换效果(仅在手机模式下可用)

    vue实现滑动切换效果(仅在手机模式下可用)

    这篇文章主要为大家详细介绍了vue实现滑动切换效果,仅在手机模式下可用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • vue父组件通过props如何向子组件传递方法详解

    vue父组件通过props如何向子组件传递方法详解

    在Vue 中,可以使用 props 向子组件传递数据,下面这篇文章主要给大家介绍了关于vue父组件通过props如何向子组件传递方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • element-ui 中使用upload多文件上传只请求一次接口

    element-ui 中使用upload多文件上传只请求一次接口

    这篇文章主要介绍了element-ui 中使用upload多文件上传只请求一次接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 详解基于element的区间选择组件校验(交易金额)

    详解基于element的区间选择组件校验(交易金额)

    这篇文章主要介绍了详解基于element的区间选择组件校验(交易金额),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01

最新评论