用vue3開發一個打磚塊小遊戲

前言

用vue3寫了幾個實例，感受Vue3的composition Api設計得仍是很不錯，改變了一下習慣，但寫多兩個就行了。 此次寫一個也是兒時很以爲很好玩的遊戲-打磚塊， 無聊的時候玩一下也以爲挺好玩，遊戲性也挺高。此次我直接用vite+vue3打包嘗試一下，vite也是開箱即用，特色是也是能夠清除死代碼，按需打包，因此打包速度也是很是快的。沒用過的同窗能夠嘗試用用。

遊戲效果

遊戲需求

1. 建立一個場景
2. 建立一個球，建立一堆被打擊方塊
3. 建立一個能夠移動方塊並可控制左右移動
4. 當球碰撞左右上邊界及移動方塊回彈
5. 擋球碰撞下邊界遊戲結束

上完整代碼

<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>
複製代碼

最後

之後繼續用vue3，多寫寫實例。喜歡的點個贊支持一下！！^_^

附上打磚塊小遊戲地址

shinewen189.github.io/nigo-ball-v…