How to use vue3 to implement the brick-breaking game
Game requirements
Create a scene
Create a ball and create a bunch of hit blocks
Create a movable block that can control left and right movement
When the ball collides with the left and right upper boundaries and the moving block rebounds
block The game ends when the ball collides with the lower boundary
Full code
<template> <button @click="stop">停止</button> <button @click="start">游戏开始</button> <div style="color: red; text-align: center;font-size: 25px">score:{{scroce}}</div> <div class="box" :style="{width :boxWidth +"px", height:boxHeight +"px"}"> <div class="str">{{str}}</div> <div class="kuaiBox"> <div class="kuai" v-for="(item,index) in arr" :key="index" :style="{opacity :item.active ? "0":"1"}"></div> </div> <div class="ball" :style="{left :x + "px", top : y + "px", width : ball +"px", height: ball+"px"}"></div> <div class="bottomMove" :style="{left :mx + "px" , top : my + "px",width :moveBottomW +"px",height : moveBottomH+"px" }"></div> </div> </template> <script setup> import {onMounted, onUnmounted, reactive, toRefs} from "vue" const boxWidth = 500, // 场景宽度 boxHeight = 300, // 场景高度 ball = 10,//小球的宽高 moveBottomH = 5,//移动方块高度 moveBottomW = 100//移动方块快读 const strArr = "恭喜你,挑战成功!!" //用reactive 保存一些可观察信息 const state = reactive({ x: boxWidth / 2 - ball / 2, // 小球x轴位置信息 计算默认位置在中间 y: boxHeight - ball - moveBottomH, // 小球Y轴的位置信息 计算默认位置在中间 mx: boxWidth / 2 - moveBottomW / 2, //移动方块的位置信息 计算默认位置在中间 my: boxHeight - moveBottomH, // 移动方块y轴的的位置信息 计算默认位置在中间 // 被打击方块的数组 arr: Array.from({length: 50}, (_, index) => { return { index, active: false } }), str: "", // 返回挑战成功字眼 scroce: 0 // 分数 }) // 用toRefs将观察对象的信息解构出来供模板使用 const {x, y, mx, my, arr, str, scroce} = toRefs(state) let timer = null, // 小球定时器 speed = 3,// 小球速度 map = {x: 10, y: 10}, timer2 = null, // 挑战成功字眼显示定时器 index = 0//挑战成功字眼续个显示的索引值 // 挑战成功字眼续个显示的方法 const strFun = () => { if (strArr.length === index) clearInterval(timer2) state.str += strArr.substr(index, 1) index++ } //移动小球的方法 // 1.这里同过变量map 对象来记录坐标信息, 确定小球碰到 左右上 及移动方块是否回弹 // 2.循环砖块检测小球碰撞到砖块消失 const moveBall = () => { const {offsetTop, offsetHeight, offsetLeft, offsetWidth} = document.querySelector(".bottomMove") if (state.x <= 0) { map.x = speed } else if (state.x > boxWidth - ball) { map.x = -speed } if (state.y <= 0) { map.y = speed } if (state.y >= offsetTop - offsetHeight && state.y <= offsetTop + offsetHeight && state.x >= offsetLeft && state.x < offsetLeft + offsetWidth) { map.y = -speed } if (state.y > boxHeight) { clearInterval(timer) alert("game over") window.location.reload() } Array.from(state.arr).forEach((item, index) => { const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = document.querySelectorAll(".kuai")[index] if (state.x > offsetLeft && state.x < offsetLeft + offsetWidth && state.y > offsetTop && state.y < offsetTop + offsetHeight) { if (!state.arr[index].active) { state.scroce += 100 } state.arr[index].active = true } }) if (Array.from(state.arr).every(item => item.active)) { clearInterval(timer) timer2 = setInterval(strFun, 1000) } state.x = state.x += map.x state.y = state.y += map.y } //移动方块左右移动方法 ,接住小球 const bottomMove = ev => { if (ev.code === "Space") clearInterval(timer) switch (ev.key) { case "ArrowRight": state.mx += 100 break case "ArrowLeft": state.mx -= 100 break } state.mx = state.mx < 0 ? 0 : state.mx state.mx = state.mx > boxWidth - moveBottomW ? boxWidth - moveBottomW : state.mx } // 暂停游戏 const stop = () => { clearInterval(timer) } // 开始游戏 const start = () => { timer = setInterval(moveBall, 20) } // 绑定移动方块事件 onMounted(() => { document.addEventListener("keyup", bottomMove) }) // 移动出移动方块事件 onUnmounted(() => { clearInterval(timer) }) </script> <style> .bottomMove { width: 100px; height: 10px; background: red; position: absolute; transition-duration: 100ms; transition-timing-function: ease-out; } .ball { width: 20px; height: 20px; background-color: red; border-radius: 50%; position: absolute; } .kuaiBox { display: flex; flex-wrap: wrap; } .kuai { width: 30px; height: 10px; background: red; margin: 10px; transition-duration: 100ms; transition-timing-function: ease-in; } .str { text-align: center; font-size: 50px; color: red; } .box { justify-content: center; width: 500px; height: 500px; margin: 0 auto; position: relative; border: 5px solid red; overflow: hidden; } .picker { width: 50px; height: 50px; } </style>
The above is the detailed content of How to use vue3 to implement the brick-breaking 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

vue3+vite:src uses require to dynamically import images and error reports and solutions. vue3+vite dynamically imports multiple images. If vue3 is using typescript development, require will introduce image errors. requireisnotdefined cannot be used like vue2 such as imgUrl:require(' .../assets/test.png') is imported because typescript does not support require, so import is used. Here is how to solve it: use awaitimport

tinymce is a fully functional rich text editor plug-in, but introducing tinymce into vue is not as smooth as other Vue rich text plug-ins. tinymce itself is not suitable for Vue, and @tinymce/tinymce-vue needs to be introduced, and It is a foreign rich text plug-in and has not passed the Chinese version. You need to download the translation package from its official website (you may need to bypass the firewall). 1. Install related dependencies npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. Download the Chinese package 3. Introduce the skin and Chinese package. Create a new tinymce folder in the project public folder and download the

Vue implements the blog front-end and needs to implement markdown parsing. If there is code, it needs to implement code highlighting. There are many markdown parsing libraries for Vue, such as markdown-it, vue-markdown-loader, marked, vue-markdown, etc. These libraries are all very similar. Marked is used here, and highlight.js is used as the code highlighting library. The specific implementation steps are as follows: 1. Install dependent libraries. Open the command window under the vue project and enter the following command npminstallmarked-save//marked to convert markdown into htmlnpmins

To achieve partial refresh of the page, we only need to implement the re-rendering of the local component (dom). In Vue, the easiest way to achieve this effect is to use the v-if directive. In Vue2, in addition to using the v-if instruction to re-render the local dom, we can also create a new blank component. When we need to refresh the local page, jump to this blank component page, and then jump back in the beforeRouteEnter guard in the blank component. original page. As shown in the figure below, how to click the refresh button in Vue3.X to reload the DOM within the red box and display the corresponding loading status. Since the guard in the component in the scriptsetup syntax in Vue3.X only has o

After the vue3 project is packaged and published to the server, the access page displays blank 1. The publicPath in the vue.config.js file is processed as follows: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&

Preface Whether it is vue or react, when we encounter multiple repeated codes, we will think about how to reuse these codes instead of filling a file with a bunch of redundant codes. In fact, both vue and react can achieve reuse by extracting components, but if you encounter some small code fragments and you don’t want to extract another file, in comparison, react can be used in the same Declare the corresponding widget in the file, or implement it through renderfunction, such as: constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

Using Vue to build custom elements WebComponents is a collective name for a set of web native APIs that allow developers to create reusable custom elements (customelements). The main benefit of custom elements is that they can be used with any framework, even without one. They are ideal when you are targeting end users who may be using a different front-end technology stack, or when you want to decouple the final application from the implementation details of the components it uses. Vue and WebComponents are complementary technologies, and Vue provides excellent support for using and creating custom elements. You can integrate custom elements into existing Vue applications, or use Vue to build

1 Introduction 1.1 Purpose ElementPlus uses on-demand introduction to greatly reduce the size of the packaged file. 1.2 The final effect is to automatically generate the components.d.ts file and introduce it into the file. The ElementPlus component automatically generates the components.d.ts file and introduce it into the file. ElementPlusAPI2 Preparation Install ElementPlus#Choose a package manager you like#NPM$npminstallelement-plus--save#Yarn$yarnaddelement-plus#pnpm$pnpminstallelement-plus3 Press
