基于vue实现简易打地鼠游戏


Posted in Javascript onAugust 21, 2020

本文实例为大家分享了vue实现简易打地鼠游戏的具体代码,供大家参考,具体内容如下

基于vue实现简易打地鼠游戏

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>打地鼠简易版</title>
 <script src="js/vue.js"></script>
 <style type="text/css">
  *{margin: 0;padding: 0;}
  #main{border: 1px solid #000;}
  .ds{ float: left;border: 1px solid #000;box-sizing: border-box;}
  .dd{background-color: #3E8F3E;}
 </style>
 </head>
 <body>
 
 <div id="app">
  <div>倒计时{{t}}</div>
  <div>分数{{fs}}</div>
  <div v-if="t<=0">游戏结束</div>
  <div id="main" v-bind:style="{width:x*w+'px',height:y*h+'px'}">
  <div class="ds" v-bind:class="{dd:v==s}" v-on:click="da(v)" v-for="v in x*y" v-bind:style="{width:w+'px',height:h+'px'}"></div>
  </div>
 </div>
 <script type="text/javascript">
  var vm=new Vue({
  el:'#app',
  data:{
   x:5,//地鼠格列数
   y:5,//地鼠格行数
   w:100,//地鼠格宽度
   h:100,//地鼠格高度
   t:10,//时间
   dsq:null,
   dsq2:null,
   s:0,//地鼠位置
   fs:0,
   ys:true,//用于解决游戏结束点击继续得分问题
   ty:false//用于解决连击得分问题
  },
  methods:{
   da(i){
   if(this.s==i && this.ys && this.ty){
    this.ty=false;
    this.fs++;
   }
   }
  },
  created(){
   this.dsq=setInterval(()=>{
   this.t--;
   if(this.t<=0){
    clearInterval(this.dsq);
    clearInterval(this.dsq2);
    this.ys=false;
   }
   },1000);
   this.dsq2=setInterval(()=>{
   this.ty=true
   this.s=parseInt(Math.random()*this.x*this.y);
   },2000);
  }
  
  })
 </script>
 </body>
</html>

简易升级版,多个地鼠,打对得分,打错扣分

基于vue实现简易打地鼠游戏

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>打地鼠简易版升级版</title>
 <script src="js/vue.js"></script>
 <style type="text/css">
  *{margin: 0;padding: 0;}
  #main{border: 1px solid #000;}
  .ds{ float: left;border: 1px solid #000;box-sizing: border-box;}
  .dd{background-color: #3E8F3E;}
  .dc{background-color: #AC2925;}
 </style>
 </head>
 <body>
 
 <div id="app">
  <div>倒计时{{t}}</div>
  <div>分数{{fs}}</div>
  <div v-if="t<=0">游戏结束</div>
  <div id="main" v-bind:style="{width:x*w+'px',height:y*h+'px'}">
  <div class="ds" v-bind:class="[arr2[arr1.indexOf(v-1)]==1?'dd':'',arr2[arr1.indexOf(v-1)]==0?'dc':'']" v-on:click="da(v-1)" v-for="v in x*y" v-bind:style="{width:w+'px',height:h+'px'}">{{arr2[arr1.indexOf(v-1)]}}</div>
  </div>
 </div>
 <script type="text/javascript">
  var vm=new Vue({
  el:'#app',
  data:{
   x:5,
   y:5,
   w:100,
   h:100,
   t:30,
   dsq:null,
   dsq2:null,
   s:4,
   fs:0,
   ys:true,
   arr1:[],
   arr2:[],
   arr3:[]
  },
  methods:{
   da(i){
   if(this.arr1.includes(i)&& this.ys && !this.arr3.includes(i)){
    this.arr3.push(i);
    if(this.arr2[this.arr1.indexOf(i)]==1){
    this.fs++;
    }else{
    this.fs--;
    }
   }
   },
   sjs(){
   var cc=parseInt(Math.random()*this.x*this.y);
   if(this.arr1.includes(cc)){
    this.sjs();
   }else{
    this.arr1.push(cc);
    this.arr2.push(parseInt(Math.random()*2));
   }
   }
  },
  created(){
   this.dsq=setInterval(()=>{
   this.t--;
   if(this.t<=0){
    clearInterval(this.dsq);
    clearInterval(this.dsq2);
    this.ys=false;
   }
   },1000);
   this.dsq2=setInterval(()=>{
   this.arr1=[];
   this.arr2=[];
   this.arr3=[];
   for(var i=0;i<this.s;i++){
    this.sjs();
   }
   },2000);
  }
  
  })
 </script>
 </body>
</html>

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

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

Javascript 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
javascript实现数独解法
Mar 14 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
vue实现打地鼠小游戏
Aug 21 #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
You might like
php5 pdo新改动加载注意事项
2008/09/11 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
详解如何修改python中字典的键和值
2020/09/29 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
竞选班干部演讲稿300字
2014/08/20 职场文书
公务员个人年终总结
2015/02/12 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS