手把手教你用vue3开发一个打砖块小游戏手把手教你用vue3开发一个打砖

前言

用vue3写了几个实例，感觉Vue3的composition Api设计得还是很不错，改变了一下习惯，但写多两个就好了。这次写一个也是儿时很觉得很好玩的游戏-打砖块，无聊的时候玩一下也觉得挺好玩，游戏性也挺高。这次我直接用vite+vue3打包尝试一下，vite也是开箱即用，特点是也是可以清除死代码，按需打包，所以打包速度也是非常快的。没用过的同学可以尝试用用。
游戏效果

游戏需求

创建一个场景
创建一个球，创建一堆被打击方块
创建一个可以移动方块并可控制左右移动
当球碰撞左右上边界及移动方块回弹
挡球碰撞下边界游戏结束

上完整代码

.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; }

最后

以后继续用vue3，多写写实例。
附上打砖块小游戏地址
shinewen189.github.io/nigo-ball-v…
【手把手教你用vue3开发一个打砖块小游戏】到此这篇关于用vue3开发一个打砖块小游戏的文章就介绍到这了,更多相关vue3打砖块小游戏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！