基于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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
在node中如何使用 ES6
Apr 22 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
python使用scrapy解析js示例
2014/01/23 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
Python计算信息熵实例
2020/06/18 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
优秀家长事迹材料
2014/05/17 职场文书
读书月活动方案
2014/05/22 职场文书
质量管理标语
2014/06/12 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
工伤私了协议书范本
2014/11/24 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
python spilt()分隔字符串的实现示例
2021/05/21 Python
python+opencv实现目标跟踪过程
2022/06/21 Python