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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
js上传图片预览的实现方法
May 09 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
JavaScript实现星级评价效果
May 17 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 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
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python调用服务接口的实例
2019/01/03 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
搞笑婚礼主持词
2014/03/13 职场文书
总结表彰大会主持词
2014/03/26 职场文书
合作协议书怎么写
2014/04/18 职场文书
小学课外阅读总结
2014/07/09 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2014年实习期工作总结
2014/11/27 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript