基于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 相关文章推荐
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
javascript object array方法使用详解
Dec 03 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
使用javascript做在线算法编程
May 25 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 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
PHP自定义函数收代码
2010/08/01 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
在Python的Django框架中创建和使用模版
2015/07/15 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
毕业生教师求职信
2013/10/20 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
财务会计实训报告
2014/11/05 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript