基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲
本文實(shí)例為大家分享了vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>打地鼠簡(jiǎn)易版</title> <script src='http://www.intensediesel.com/bcjs/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>倒計(jì)時(shí){{t}}</div> <div>分?jǐn)?shù){{fs}}</div> <div v-if='t<=0'>游戲結(jié)束</div> <div v-bind:style='{width:x*w+’px’,height:y*h+’px’}'> <div v-bind: 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,//地鼠格列數(shù) y:5,//地鼠格行數(shù) w:100,//地鼠格寬度 h:100,//地鼠格高度 t:10,//時(shí)間 dsq:null, dsq2:null, s:0,//地鼠位置 fs:0, ys:true,//用于解決游戲結(jié)束點(diǎn)擊繼續(xù)得分問(wèn)題 ty:false//用于解決連擊得分問(wèn)題 }, 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>
簡(jiǎn)易升級(jí)版，多個(gè)地鼠，打?qū)Φ梅郑蝈e(cuò)扣分
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>打地鼠簡(jiǎn)易版升級(jí)版</title> <script src='http://www.intensediesel.com/bcjs/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>倒計(jì)時(shí){{t}}</div> <div>分?jǐn)?shù){{fs}}</div> <div v-if='t<=0'>游戲結(jié)束</div> <div v-bind:style='{width:x*w+’px’,height:y*h+’px’}'> <div v-bind: 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>
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
C++經(jīng)典小游戲匯總
python經(jīng)典小游戲匯總
python俄羅斯方塊游戲集合
JavaScript經(jīng)典游戲 玩不停
java經(jīng)典小游戲匯總
javascript經(jīng)典小游戲匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Spring security 自定義過(guò)濾器實(shí)現(xiàn)Json參數(shù)傳遞并兼容表單參數(shù)(實(shí)例代碼)2. JAMon(Java Application Monitor)備忘記3. Java8內(nèi)存模型PermGen Metaspace實(shí)例解析4. Python 的 __str__ 和 __repr__ 方法對(duì)比5. python中用Scrapy實(shí)現(xiàn)定時(shí)爬蟲(chóng)的實(shí)例講解6. python 實(shí)現(xiàn)關(guān)聯(lián)規(guī)則算法Apriori的示例7. 學(xué)python最電腦配置有要求么8. 解決redis與Python交互取出來(lái)的是bytes類型的問(wèn)題9. 基于python實(shí)現(xiàn)操作git過(guò)程代碼解析10. python利用paramiko實(shí)現(xiàn)交換機(jī)巡檢的示例
網(wǎng)公網(wǎng)安備