vue实现打地鼠小游戏


Posted in Javascript onAugust 21, 2020

本文实例为大家分享了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>

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

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

Javascript 相关文章推荐
JavaScript经典效果集锦
Jul 06 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
详解jquery和vue对比
Apr 16 jQuery
解决vue 退出动画无效的问题
Aug 09 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
js实现滑动进度条效果
Aug 21 #Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 #Javascript
vue组件开发之tab切换组件使用详解
Aug 21 #Javascript
vue组件开发之slider组件使用详解
Aug 21 #Javascript
Vue左滑组件slider使用详解
Aug 21 #Javascript
vue实现移动端触屏拖拽功能
Aug 21 #Javascript
vue实现移动端拖动排序
Aug 21 #Javascript
You might like
用php+mysql一个名片库程序
2006/10/09 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
php+mysql实现无限级分类
2015/11/11 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python变量和字符串详解
2017/04/29 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
详解Python的三种拷贝方式
2020/02/11 Python
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
剪彩仪式主持词
2014/03/19 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技