基于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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP简洁函数小结
2011/08/12 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php实现多城市切换特效
2015/08/09 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
Vue实现日历小插件
2019/06/26 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python时间获取及转换知识汇总
2017/01/11 Python
Django--权限Permissions的例子
2019/08/28 Python
Python用input输入列表的实例代码
2020/02/07 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
高三上学期学习自我评价
2014/04/23 职场文书
网络编辑求职信
2014/04/30 职场文书
三峡大坝导游词
2015/01/31 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技