vue实现打地鼠小游戏
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要为大家详细介绍了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 }; }, puted: { // 统计打中的地鼠数量 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 #c; 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 #c; } .wraper { width: 900px; float: left; } .scoped { width: 260px; height: 540px; float: left; padding-left: 15px; border-left: 1px solid #c; h3 { font-size: 16px; color: #fff; } .set { height: 200px; width: 100%; border: 1px solid #c; p { padding: 10px; text-align: center; color: #fff; font-size: 16px; button { width: 90%; } } } .count { .set; margin-: 20px; padding-: 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 #c; div { height: 100%; background: #eee; border-radius: 50px; } } } </style>
更多有趣的经典小游戏实现专题,分享给大家
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:基于vue实现简易打地鼠游戏
下一篇:js实现滑动进度条效果
编程语言
- 甘肃哪有关键词排名优化购买方式有哪些
- 甘肃SEO如何做网站优化
- 河南seo关键词优化怎么做电话营销
- 北京SEO优化如何做QQ群营销
- 来宾百度关键词排名:提升您网站曝光率的关键
- 卢龙关键词优化:提升您网站排名的策略与技巧
- 山东网站优化的注意事项有哪些
- 四川整站优化怎样提升在搜索引擎中的排名
- 疏附整站优化:提升网站性能与用户体验的全新
- 海南seo主要做什么工作售后服务要做到哪些
- 荣昌百度网站优化:提升您网站的搜索引擎排名
- 河北seo网站排名关键词优化如何做SEO
- 江西优化关键词排名推广售后保障一般有哪些
- 古浪SEO优化:提升你的网站可见性
- 西藏网站排名优化怎么把网站排名在百度首页
- 如何提升阳东百度快照排名:详尽指南