vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
类别:编程学习 浏览量:2216
时间:2021-10-12 00:20:03 vue3函数详解
手把手教你用vue3开发一个打砖块小游戏前言
用vue3写了几个实例,感觉Vue3的composition Api设计得还是很不错,改变了一下习惯,但写多两个就好了。 这次写一个也是儿时很觉得很好玩的游戏-打砖块, 无聊的时候玩一下也觉得挺好玩,游戏性也挺高。这次我直接用vite+vue3打包尝试一下,vite也是开箱即用,特点是也是可以清除死代码,按需打包,所以打包速度也是非常快的。没用过的同学可以尝试用用。
游戏效果
游戏需求
- 创建一个场景
- 创建一个球,创建一堆被打击方块
- 创建一个可以移动方块并可控制左右移动
- 当球碰撞左右上边界及移动方块回弹
- 挡球碰撞下边界游戏结束
上完整代码
<template> <button @click="stop">停止</button> <button @click="start">游戏开始</button> <li style="color: red; text-align: center;font-size: 25px">score:{{scroce}}</li> <li class="box" :style="{width :boxWidth +'px', height:boxHeight +'px'}"> <li class="str">{{str}}</li> <li class="kuaiBox"> <li class="kuai" v-for="(item,index) in arr" :key="index" :style="{opacity :item.active ? '0':'1'}"></li> </li> <li class="ball" :style="{left :x + 'px', top : y + 'px', width : ball +'px', height: ball+'px'}"></li> <li class="bottomMove" :style="{left :mx + 'px' , top : my + 'px',width :moveBottomW +'px',height : moveBottomH+'px' }"></li> </li> </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>
最后
以后继续用vue3,多写写实例。
附上打砖块小游戏地址
shinewen189.github.io/nigo-ball-v…
到此这篇关于用vue3开发一个打砖块小游戏的文章就介绍到这了,更多相关vue3打砖块小游戏内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- vue可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)
- vue3 ref 的用法(Vue3中watchEffect的用途浅析)
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- 10句英语常用(英语常用900句)
- 爱情能当饭吃吗(爱情能当饭吃吗说说)
- 白T恤穿法(白t恤)
- 你怎么忘了是说先爱我(你怎么忘了如何爱我)
- 做技术难吗(技术难不难)
- 林心如是谁(林心如是谁演的)
热门推荐
- python怎样读取mysql数据(使用Python将Mysql的查询数据导出到文件的方法)
- ubuntu如何搭建vnc(Ubuntu20.04 VNC 安装与设置实现)
- 织梦dede数据库(dedeCMS 织梦的日期时间格式大全最新)
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- 浅谈Python3中strip()、lstrip()、rstrip()用法详解(浅谈Python3中strip、lstrip、rstrip用法详解)
- sql server设置自增(sql server建表时设置ID字段自增的简单方法)
- SQL中的运算符
- js编写一个数组去重的方法(JS实现数组过滤从简单到多条件筛选)
- python语言翻译中文(浅析Python 实现一个自动化翻译和替换的工具)
- laravel怎么查询信息过滤(laravel多条件查询方法and,or嵌套查询)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9