基于vue实现简易打地鼠游戏
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要为大家详细介绍了基于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:xw+'px',height:yh+'px'}"> <div class="ds" v-bind:class="{dd:v==s}" v-on:click="da(v)" v-for="v in xy" 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.xthis.y); },2000); } }) </script> </body> </html>
简易升级版,多个地鼠,打对得分,打错扣分
<!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:xw+'px',height:yh+'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 xy" 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 =parseInt(Math.random()this.xthis.y); if(this.arr1.includes()){ this.sjs(); }else{ this.arr1.push(); 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>
更多有趣的经典小游戏实现专题,分享给大家
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:js实现拖拽元素选择和删除
下一篇:vue实现打地鼠小游戏
编程语言
- 甘肃哪有关键词排名优化购买方式有哪些
- 甘肃SEO如何做网站优化
- 河南seo关键词优化怎么做电话营销
- 北京SEO优化如何做QQ群营销
- 来宾百度关键词排名:提升您网站曝光率的关键
- 卢龙关键词优化:提升您网站排名的策略与技巧
- 山东网站优化的注意事项有哪些
- 四川整站优化怎样提升在搜索引擎中的排名
- 疏附整站优化:提升网站性能与用户体验的全新
- 海南seo主要做什么工作售后服务要做到哪些
- 荣昌百度网站优化:提升您网站的搜索引擎排名
- 河北seo网站排名关键词优化如何做SEO
- 江西优化关键词排名推广售后保障一般有哪些
- 古浪SEO优化:提升你的网站可见性
- 西藏网站排名优化怎么把网站排名在百度首页
- 如何提升阳东百度快照排名:详尽指南