Home Web Front-end JS Tutorial Let's take a look at how Vue implements the whack-a-mole game

Let's take a look at how Vue implements the whack-a-mole game

Aug 21, 2020 pm 05:24 PM
vue game

Let's take a look at how Vue implements the whack-a-mole game

[Related learning recommendations: js video tutorial]

The example in this article shares with you the specific code for implementing the whack-a-mole game in Vue. For your reference, the specific content is as follows

The rendering is as follows:

The code is as follows:

<template>
 <p class="game">
 <h2>打地鼠游戏</h2>
 <p class="wraper">
 <p class="item" v-for="n in TOTAL" :key="n">
 <p :style="{&#39;visibility&#39;: random === n ? &#39;visible&#39; : &#39;hidden&#39;}" @click="clickItem">{{n}}号地鼠</p>
 </p>
 </p>
 <p class="scoped">
 <p class="set">
 <p>设置参数</p>
 <p>
 速度: <input type="number" v-model="setSpeed">
 </p>
 <p>
 总数:<input type="number" v-model="setNum">
 </p>
 <p>
 <button @click="playGame">开始</button>
 </p>
 </p>
 <p class="count set">
 <h3>统计分数面板</h3>
 <h3>总数: {{TOTAL}}</h3>
 <h3>击中: {{clickNum}}</h3>
 <h3>击中率: {{level}}%</h3>
 </p>
 </p>
 </p>
</template>
 
<script>
 
export default {
 name: &#39;App&#39;,
 data () {
 return {
 clickFlag: true, // 单个地鼠只能点击一次
 setNum: 40, // 绑定设置地洞数量
 setSpeed: 1000, // 绑定设置地鼠出现速度
 speed: 2000, // 地鼠出现速度
 random: &#39;&#39;, // 随机出现的地鼠位置
 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 = &#39;&#39;;
 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;
 }
 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;
 }
 }
}
</style>
Copy after login

Recommended related pictures and texts: js tutorial (picture and text)

The above is the detailed content of Let's take a look at how Vue implements the whack-a-mole game. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Paving the way for PS5 Pro, the 'No Man's Sky' update code 'surprised' the game console development code name 'Trinity' and image quality configuration file Paving the way for PS5 Pro, the 'No Man's Sky' update code 'surprised' the game console development code name 'Trinity' and image quality configuration file Jul 22, 2024 pm 01:10 PM

According to news from this site on July 22, foreign media twistedvoxel discovered the rumored PS5 development codename "Trinity" and related image quality configuration files in the latest "World Part 1" update code of "No Man's Sky", which proves that Sony is expected to The PS5Pro model was recently launched. Although "No Man's Sky" has enhanced the graphics performance of the game in recent updates, many players still believe that this may be HelloGames paving the way for new models in advance. According to the latest graphics presets, under PS5 Pro The game's dynamic resolution scaling has been increased from 0.6 to 0.8, which means the game has a higher average resolution and some graphical details are upgraded from "High" to "Ultra" levels, but since each game

How to use echarts in vue How to use echarts in vue May 09, 2024 pm 04:24 PM

Using ECharts in Vue makes it easy to add data visualization capabilities to your application. Specific steps include: installing ECharts and Vue ECharts packages, introducing ECharts, creating chart components, configuring options, using chart components, making charts responsive to Vue data, adding interactive features, and using advanced usage.

The role of export default in vue The role of export default in vue May 09, 2024 pm 06:48 PM

Question: What is the role of export default in Vue? Detailed description: export default defines the default export of the component. When importing, components are automatically imported. Simplify the import process, improve clarity and prevent conflicts. Commonly used for exporting individual components, using both named and default exports, and registering global components.

How to use map function in vue How to use map function in vue May 09, 2024 pm 06:54 PM

The Vue.js map function is a built-in higher-order function that creates a new array where each element is the transformed result of each element in the original array. The syntax is map(callbackFn), where callbackFn receives each element in the array as the first argument, optionally the index as the second argument, and returns a value. The map function does not change the original array.

PlayerUnknown's Battlegrounds FPS optimization settings, Chicken PUBG game frame rate optimization PlayerUnknown's Battlegrounds FPS optimization settings, Chicken PUBG game frame rate optimization Jun 19, 2024 am 10:35 AM

Optimize the frame rate of the PlayerUnknown's Battlegrounds game to improve the smoothness and performance of the game. Method: Update the graphics card driver: Make sure you have the latest graphics card driver installed on your computer. This helps optimize game performance and fix possible compatibility issues. Lower game settings: Adjust the graphics settings in the game to a lower level, such as reducing resolution, reducing special effects and shadows, etc. This takes the load off your computer and increases your frame rate. Close unnecessary background programs: While the game is running, close other unnecessary background programs and processes to free up system resources and improve game performance. Clear hard drive space: Make sure your hard drive has enough free space. Delete unnecessary files and programs, clean temporary files and Recycle Bin, etc. Turn off vertical sync (V-Sync): in game

The role of onmounted in vue The role of onmounted in vue May 09, 2024 pm 02:51 PM

onMounted is a component mounting life cycle hook in Vue. Its function is to perform initialization operations after the component is mounted to the DOM, such as obtaining references to DOM elements, setting data, sending HTTP requests, registering event listeners, etc. It is only called once when the component is mounted. If you need to perform operations after the component is updated or before it is destroyed, you can use other lifecycle hooks.

What are hooks in vue What are hooks in vue May 09, 2024 pm 06:33 PM

Vue hooks are callback functions that perform actions on specific events or lifecycle stages. They include life cycle hooks (such as beforeCreate, mounted, beforeDestroy), event handling hooks (such as click, input, keydown) and custom hooks. Hooks enhance component control, respond to component life cycles, handle user interactions and improve component reusability. To use hooks, just define the hook function, execute the logic and return an optional value.

What scenarios can event modifiers in vue be used for? What scenarios can event modifiers in vue be used for? May 09, 2024 pm 02:33 PM

Vue.js event modifiers are used to add specific behaviors, including: preventing default behavior (.prevent) stopping event bubbling (.stop) one-time event (.once) capturing event (.capture) passive event listening (.passive) Adaptive modifier (.self)Key modifier (.key)

See all articles