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>

vue实现打地鼠小游戏相关推荐

python打地鼠代码_vue实现打地鼠小游戏
本文实例为大家分享了vue实现打地鼠小游戏的具体代码,供大家参考,具体内容如下效果图如下: 代码如下: 打地鼠游戏 {{n}}号地鼠设置参数速度: 总数: 开始统计分数面板总数: {{TOT ...
网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
java 打地鼠源代码_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
敲地鼠java_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
java android 打地鼠_Android实现打地鼠小游戏
本文实例为大家分享了Android实现打地鼠小游戏的具体代码,供大家参考,具体内容如下实现结果代码实现 playmouse.java package com.example.playmouse; ...
如何用python制作五子棋游戏_Python制作打地鼠小游戏
原文链接 Python制作小游戏(二十一)mp.weixin.qq.com 效果展示打地鼠小游戏https://www.zhihu.com/video/1200492442610450432 简介 ...
vue 拼数字小游戏（设置表白彩蛋）
原文链接: vue 拼数字小游戏(设置表白彩蛋) 上一篇: vue 网格过渡动画下一篇: mpvue 开发小程序流程效果通过点击交换空白格子与周围的格子,将整个格子还原,如果在还原过程中, ...
【180730】WinForm打地鼠小游戏源码
本源码是采用WinForm进行开发的一个并非简单的打地鼠小游戏,有动画效果哈!有打地鼠.计分.过关等功能. 菜单功能: 1.运行游戏后,输入玩家姓名,点击开始 2.用鼠标点击从洞中钻出的地鼠给予打击 ...
android打地鼠设计报告,android开发中利用handler制作一个打地鼠小游戏
android开发中利用handler制作一个打地鼠小游戏发布时间:2020-11-25 15:21:11 来源:亿速云阅读:136 作者:Leah 这期内容当中小编将会给大家带来有关androi ...

vue实现打地鼠小游戏

vue实现打地鼠小游戏相关推荐

最新文章

热门文章