小編給大家分享一下vue實現(xiàn)打地鼠小游戲的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

在天心等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站建設(shè)、網(wǎng)站制作 網(wǎng)站設(shè)計制作定制網(wǎng)站制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷推廣,外貿(mào)營銷網(wǎng)站建設(shè),天心網(wǎng)站建設(shè)費用合理。

實現(xiàn)打地鼠小游戲的具體代碼

效果圖如下：

代碼如下：

<template>
 <p class="game">
 <h3>打地鼠游戲</h3>
 <p class="wraper">
 <p class="item" v-for="n in TOTAL" :key="n">
 <p :style="{'visibility': random === n ? 'visible' : 'hidden'}" @click="clickItem">{{n}}號地鼠</p>
 </p>
 </p>
 <p class="scoped">
 <p class="set">
 <p>設(shè)置參數(shù)</p>
 <p>
 速度： <input type="number" v-model="setSpeed">
 </p>
 <p>
 總數(shù)：<input type="number" v-model="setNum">
 </p>
 <p>
 <button @click="playGame">開始</button>
 </p>
 </p>
 <p class="count set">
 <h4>統(tǒng)計分數(shù)面板</h4>
 <h4>總數(shù)： {{TOTAL}}</h4>
 <h4>擊中： {{clickNum}}</h4>
 <h4>擊中率： {{level}}%</h4>
 </p>
 </p>
 </p>
</template>
 
<script>
 
export default {
 name: 'App',
 data () {
 return {
 clickFlag: true, // 單個地鼠只能點擊一次
 setNum: 40, // 綁定設(shè)置地洞數(shù)量
 setSpeed: 1000, // 綁定設(shè)置地鼠出現(xiàn)速度
 speed: 2000, // 地鼠出現(xiàn)速度
 random: '', // 隨機出現(xiàn)的地鼠位置
 TOTAL: 40, // 地鼠總數(shù)
 count: 0, // 統(tǒng)計總共出現(xiàn)了多少次地鼠同于判斷不能大于總數(shù)
 clickNum: 0, // 點中地鼠統(tǒng)計
 timmerId: null
 };
 },
 computed: {
 // 統(tǒng)計打中的地鼠數(shù)量
 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;
 }
 }
 }
};
</script>
<style lang="less" scoped>
.game {
 border: 1px solid #ccc;
 width: 1200px;
 padding: 10px;
 user-select: none;
 &::after {
 content: "";
 display: block;
 clear: both;
 }
 h3 {
 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;
 h4 {
 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;
 h4 {
 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;
 }
 }
}
</style>

看完了這篇文章，相信你對vue實現(xiàn)打地鼠小游戲的方法是什么有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝各位的閱讀！

分享文章：vue實現(xiàn)打地鼠小游戲的方法是什么-創(chuàng)新互聯(lián)
文章URL：http://www.chinadenli.net/article2/dhopic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)、做網(wǎng)站、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)