砸地鼠 php源码,一起看看vue实现打地鼠小游戏

【相关学习推荐：js视频教程】

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

效果图如下：

代码如下：

打地鼠游戏

{{n}}号地鼠

设置参数

速度：

总数：

开始

统计分数面板

总数： {{TOTAL}}

击中： {{clickNum}}

击中率： {{level}}%

export default {

name: 'App',

data () {

return {

clickFlag: true, // 单个地鼠只能点击一次

setNum: 40, // 绑定设置地洞数量

setSpeed: 1000, // 绑定设置地鼠出现速度

speed: 2000, // 地鼠出现速度

random: '', // 随机出现的地鼠位置

TOTAL: 40, // 地鼠总数

count: 0, // 统计总共出现了多少次地鼠同于判断不能大于总数

clickNum: 0, // 点中地鼠统计

timmerId: null

};

},

computed: {

// 统计打中的地鼠数量

level: function () {

let num = ((this.clickNum / this.TOTAL) * 100).toFixed(2) || 0;

return num;

}

},

created () {

},

mounted () {

},

methods: {

// 开始游戏

playGame () {

this.random = '';

this.speed = parseInt(this.setSpeed);

this.TOTAL = parseInt(this.setNum);

clearInterval(this.timmerId);

this.timmerId = setInterval(() => {

this.random = Math.floor(Math.random() * this.TOTAL + 1);

this.clickFlag = true; // 开放点击

this.count++;

if (this.count >= this.TOTAL) {

clearInterval(this.timmerId);

}

}, this.speed);

},

// 点击地鼠

clickItem () {

if (this.clickFlag) {

(this.count < this.TOTAL) && this.clickNum++;

this.clickFlag = false;

}

}

}

};

.game {

border: 1px solid #ccc;

width: 1200px;

padding: 10px;

user-select: none;

&::after {

content: "";

display: block;

clear: both;

}

h2 {

font-size: 16px;

color: #eee;

padding: 10px 0;

margin-bottom: 20px;

border-bottom: 1px solid #ccc;

}

.wraper {

width: 900px;

float: left;

}

.scoped {

width: 260px;

height: 540px;

float: left;

padding-left: 15px;

border-left: 1px solid #ccc;

h3 {

font-size: 16px;

color: #fff;

}

.set {

height: 200px;

width: 100%;

border: 1px solid #ccc;

p {

padding: 10px;

text-align: center;

color: #fff;

font-size: 16px;

button {

width: 90%;

}

}

}

.count {

.set;

margin-top: 20px;

padding-top: 25px;

text-align: center;

line-height: 40px;

h3 {

font-weight:normal;

}

}

}

.item {

display: inline-block;

height: 100px;

width: 100px;

border-radius: 50px;

margin: 0 10px 10px 0;

text-align: center;

line-height: 100px;

font-size: 20px;

border: 1px solid #ccc;

p {

height: 100%;

background: #eee;

border-radius: 50px;

}

}

}

相关图文推荐：js教程(图文)