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="{'visibility': random === n ? 'visible' : 'hidden'}" @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: '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; } } } }; </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>
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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

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.

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.

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.

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

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.

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.

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)
