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 相关文章推荐
window.open不被拦截的实现代码
Aug 22 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
JS数据类型分类及常用判断方法
Nov 19 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常量的详解
2013/06/09 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
python清除函数占用的内存方法
2018/06/25 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
在django中,关于session的通用设置方法
2019/08/06 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
数据库面试要点基本概念
2013/10/31 面试题
银行求职推荐信范文
2013/11/30 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
新学期开学演讲稿
2014/05/24 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
小学优秀学生评语
2014/12/29 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
运动会班级前导词
2015/07/20 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书