好资源导航 » 文章资讯 » 基于vue实现简易打地鼠游戏

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

2023-07-18 09:39:03 90

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





打地鼠简易版


*{margin:0;padding:0;}
#main{border:1pxsolid#000;}
.ds{float:left;border:1pxsolid#000;box-sizing:border-box;}
.dd{background-color:#3E8F3E;}





倒计时{{t}}
分数{{fs}}
游戏结束

varvm=newVue({ 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); } })

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





打地鼠简易版升级版


*{margin:0;padding:0;}
#main{border:1pxsolid#000;}
.ds{float:left;border:1pxsolid#000;box-sizing:border-box;}
.dd{background-color:#3E8F3E;}
.dc{background-color:#AC2925;}





倒计时{{t}}
分数{{fs}}
游戏结束

{{arr2[arr1.indexOf(v-1)]}} varvm=newVue({ 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(){ varcc=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(vari=0;i

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

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏玩不停

java经典小游戏汇总

javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐