基于vue实现简易打地鼠游戏
更新时间：2020年08月21日 14:42:22 作者：n994298535
这篇文章主要为大家详细介绍了基于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>
简易升级版，多个地鼠，打对得分，打错扣分
<!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>
更多有趣的经典小游戏实现专题，分享给大家：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
用v-html解决Vue.js渲染中html标签不被解析的问题
这篇文章主要给大家介绍了如何利用v-html解决Vue.js渲染过程中html标签不能被解析，html标签显示为字符串的问题，文中通过图文介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要介绍了IDEA创建Vue项目的两种方式总结，具有很好的参考价值，希望对大家有所帮助。2023-04-04
本文以校验两次密码的一致性应用，给出两个可变属性值的字段之间的联合校验的典型解决方案，通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现，需要的朋友一起看看吧2021-07-07
本篇文章主要介绍了vue.js之vue-cli脚手架的搭建详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最近刚好有个功能需要实现列表的无限循环滚动,这篇文章主要给大家介绍了关于vue组件实现列表自动无限循环的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要给大家分享Vue3中reactive响应式失效的问题的解决方法,文中有详细的解决方案供大家参考,如果又遇到一样问题的同学,可以借鉴阅读本文2023-08-08
本文直接上 Vue3 + TypeScript + Element Plus 开发的内容，感兴趣的话一起来看看吧2021-08-08
这篇文章主要介绍了Vue SPA 如何解决浏览器缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue源码入口文件分析(推荐)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue集成chartjs的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最新评论