Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you how to use vue3 to develop a brick Mini Game with detailed content and clear logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Game effect

Game demand

Create a scene

Create a ball, create a bunch of hit squares

Create a square that can be moved and can control the movement from left to right

When the ball hits the left and right upper boundary and the moving square bounces back

Block the ball collision under the boundary game over

Complete code on the

Stop the game and start score: {{scroce}} {{str}} import {onMounted, onUnmounted, reactive, toRefs} from "vue" const boxWidth = 500, / / scene width boxHeight = 300, / / scene height ball = 10 gamma / ball width moveBottomH = 5 / / moving square height moveBottomW = 100max / moving square fast reading const strArr = "Congratulations, successful challenge!" / / Save some observable information in reactive const state = reactive ({x: boxWidth / 2-ball / 2, / / the ball x-axis position information is calculated in the middle y: boxHeight-ball-moveBottomH / / the position information of the Y axis of the ball is calculated in the middle mx: boxWidth / 2-moveBottomW / 2, / / the position information of the moving square is calculated the position information of the default position in the middle my: boxHeight-moveBottomH, / / the position information of the moving square y axis is calculated the array arr: Array.from ({length: 50}, (_) with the default position in the middle / / hit square Index) = > {return {index, active: false}}), str: "", / / returns the word scroce: 0 / / score}) / / deconstructs the information of the observed object with toRefs for template const {x, y, mx, my, arr, str Scroce} = toRefs (state) let timer = null, / / ball timer speed = 3 map / ball speed map = {x: 10, y: 10}, timer2 = null / / the challenge success word displays the timer index = 0 / index / the challenge success word continues the displayed index value / / the challenge success word continues the display method const strFun = () = > {if (strArr.length = index) clearInterval (timer2) state.str + = strArr.substr (index, 1) index++} / / the method of moving the ball. Here, the coordinate information is recorded with the variable map object to determine whether the ball hits the left and right side and whether the moving square bounces back / / 2. Circular brick detection const moveBall = () = > {const {offsetTop, offsetHeight, offsetLeft, offsetWidth} = document.querySelector (".bottomMove") if (state.x boxWidth-ball) {map.x =-speed} if (state.y = offsetTop-offsetHeight & & state.y = 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} / / move the square left and right Catch the ball const bottomMove = ev = > {if (ev.code = "Space") clearInterval (timer) switch (ev.key) {case "ArrowRight": state.mx + = 100break case "ArrowLeft": state.mx-= 100break} state.mx = state.mx

< 0 ? 0 : state.mx state.mx = state.mx >

BoxWidth-moveBottomW? BoxWidth-moveBottomW: state.mx} / pause the game const stop = () = > {clearInterval (timer)} / start the game const start = () = > {timer = setInterval (moveBall, 20)} / / bind the mobile box event onMounted (() = > {document.addEventListener ("keyup") BottomMove)}) / / move out mobile square event onUnmounted (() = > {clearInterval (timer)}) .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;} these are all the contents of the article "how to develop a brick Mini Game with vue3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.