本文实例为大家分享了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经典小游戏汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 群星《顶级发烧大碟 蒙面歌王争霸战 2CD》[WAV/分轨][1.3GB]
- 群星.2009-原班情歌2CD【SONY】【WAV+CUE】
- 群星.2024-长乐曲电视剧原声带【TME影音】【FLAC分轨】
- 群星.1993-烧得厉害VOL.1好戏好歌唱不停【滚石】【WAV+CUE】
- 魔兽世界wlk阿奴巴拉克怎么打 wlk阿奴巴拉克机制与打法
- 归龙潮阿律的笛子位置在哪 阿律的笛子图文位置一览
- 归龙潮中浦城区福鼠位置在哪 中浦城区福鼠收集位置大全
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-9
- MatteoPasqualini-JohannSebastianBachItalienischesKonzertFranzsischeOuvertureVierDue
- 【雨果唱片】陈百强《梦里人LPCD45》2012[WAV+CUE]
- 《黑神话》纪录片9月20日上线!揭秘关卡为何删减
- 游戏科学估值已和育碧市值相当:后者有两万多名员工
- 黑神话第81周目Boss伤害有多恐怖?起手伤害直接秒
- 群星.2009-原班情歌2CD【SONY】【WAV+CUE】
- 群星.2024-长乐曲电视剧原声带【TME影音】【FLAC分轨】