介绍
这篇文章将为大家详细讲解有关使用vue实现一个简易打地鼠小游戏,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title>打地鼠简易版& lt;/title>
& lt;脚本src=癹s/vue.js"祝辞& lt;/script>
& lt;风格类型=拔谋?css"比;
*{保证金:0;填充:0;}
#主要{边界:1 px固体# 000;}
.ds{浮动:左;边界:1 px固体# 000;box-sizing: border-box;}
.dd {background - color: # 3 e8f3e;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
& lt; div>倒计时{{t}} & lt;/div>
& lt; div>分数{{fs}} & lt;/div>
& lt; div v=皌<=0,在游戏结束& lt;/div>
& lt; div id=癿ain"v-bind:比;
& lt; div类=癲s"v-bind:类=皗dd: v==s}“;v:点击=癲a (v)“;v代表=皏在x * y"v-bind:祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;脚本类型=拔谋?javascript"比;
var vm=new Vue ({
艾尔:& # 39;#应用# 39;
数据:{
x: 5,//地鼠格列数
y: 5,//地鼠格行数
w: 100//地鼠格宽度
h: 100//地鼠格高度//t: 10日时间
dsq:空,
dsq2:空,
s: 0,//地鼠位置
fs: 0,
y:真的,//用于解决游戏结束点击继续得分问题
泰:假//用于解决连击得分问题
}，
方法:{
da (i) {
如果这一点。==我,,这一点。y,和this.ty) {
this.ty=false;
this.fs + +;
}
}
}，
创建(){
this.dsq=setInterval()=祝辞{
this.t——;
如果(this.t<=0) {
clearInterval (this.dsq);
clearInterval (this.dsq2);
this.ys=false;
}
},1000);
this.dsq2=setInterval()=祝辞{
this.ty=true
这点=方法(math . random () * this.x * this.y);
},2000);
}
})
& lt;/script>
& lt;/body>
& lt;/html>
简易升级版,多个地鼠,打对得分,打错扣分
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title>打地鼠简易版升级版& lt;/title>
& lt;脚本src=癹s/vue.js"祝辞& lt;/script>
& lt;风格类型=拔谋?css"比;
*{保证金:0;填充:0;}
#主要{边界:1 px固体# 000;}
.ds{浮动:左;边界:1 px固体# 000;box-sizing: border-box;}
.dd {background - color: # 3 e8f3e;}
.dc {background - color: # AC2925;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
& lt; div>倒计时{{t}} & lt;/div>
& lt; div>分数{{fs}} & lt;/div>
& lt; div v=皌<=0,在游戏结束& lt;/div>
& lt; div id=癿ain"v-bind:比;
& lt; div类=癲s"v-bind:类=癧arr2 [arr1.indexOf(它们)==1,# 63;& # 39;dd # 39;: & # 39; & # 39;, arr2 [arr1.indexOf(它们)]==0,# 63;& # 39;直流# 39;:& # 39;& # 39;]“;v:点击=癲a(它们)“;v代表=皏在x * y"v-bind:在{{arr2 [arr1.indexOf(它们)]}}& lt;/div>
& lt;/div>
& lt;/div>
& lt;脚本类型=拔谋?javascript"比;
var vm=new Vue ({
艾尔:& # 39;#应用# 39;
数据:{
x: 5,
y: 5,
w: 100年,
h: 100,
t: 30,
dsq:空,
dsq2:空,
4,
fs: 0,
y:没错,
arr1: [],
arr2: [],
arr3: []
}，
方法:{
da (i) {
如果(this.arr1.includes (i),,这一点。y,和! this.arr3.includes (i)) {
this.arr3.push(我);
如果(this.arr2 [this.arr1.indexOf (i))==1) {
this.fs + +;
其他}{
this.fs——;
}
}
}，
sj () {
var cc=方法(math . random () * this.x * this.y);
如果(this.arr1.includes (cc)) {
this.sjs ();
其他}{
this.arr1.push (cc);
this.arr2.push(方法(math . random () * 2));
}
}
}，
创建(){
this.dsq=setInterval()=祝辞{
this.t——;
如果(this.t<=0) {
clearInterval (this.dsq);
clearInterval (this.dsq2);
this.ys=false;
}
},1000);
this.dsq2=setInterval()=祝辞{
this.arr1=[];
this.arr2=[];
this.arr3=[];
(var i=0; i<这样,我+ +){
this.sjs ();
}
},2000);
}
})
& lt;/script>
& lt;/body>
& lt;/html>
