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实现的页内搜索代码
May 23 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
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截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
php自定义apk安装包实例
2014/10/20 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
python实现简单socket通信的方法
2016/04/19 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
python中调试或排错的五种方法示例
2019/09/12 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
《颐和园》教学反思
2014/02/26 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
赡养老人协议书
2014/04/21 职场文书
创业女性典型材料
2014/05/02 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL