vue3实现一个接球小游戏

使用 Vue3 + ts + canvas 实现一个web端接球小游戏，主要交互包括：操作键盘的【<】【>】来滑动手柄去接球、游戏开始、游戏暂停、游戏继续、游戏重新开始、游戏失败，用到的知识包括：ts、canvas绘图、事件监听器的添加与移除，定时器的使用与移除。效果如下图所示：

接球小游戏

详细代码：
模版部分

<template><div class="game"><canvas ref="canvasRef" id="breakout-canvas" width="500" height="500"></canvas><div class="btn-box"><el-button color="#529b2e" :disabled="['processing', 'pausing'].includes(status)" :icon="Sunrise"@click="handleStartGame">{{ status === 'end' ? 'Restart' : 'Start' }} game</el-button><el-button color="#c45656" :disabled="['default', 'end'].includes(status)" :icon="MostlyCloudy"@click="handlePauseOrContinueGame">{{ status === 'pausing' ? 'continue' : 'Pause' }} game</el-button></div></div>
</template>

TS部分

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, toValue } from 'vue'
import { ElMessage } from 'element-plus'
import {Sunrise,MostlyCloudy,
} from '@element-plus/icons-vue'
const paddleHeight = 10
const paddleWidth = 75
const BallRadius = 10const canvasRef = ref<HTMLCanvasElement>()
const intervalRef = ref<Number>()
const status = ref<'default' | 'processing' | 'pausing' | 'end'>('default')// 球的坐标
const ballPosition = reactive<{ x: number; y: number }>({ x: 0, y: 0 })
// 球每次移动的距离
const step = reactive<{ dx: number; dy: number }>({ dx: 2, dy: -2 })// 手柄的坐标 x 
const paddleX = ref<number>(0)
const rightPress = ref<boolean>(false)
const leftPress = ref<boolean>(false)const init = () => {const { width, height } = toValue(canvasRef)paddleX.value = (width - paddleWidth) / 2ballPosition.x = width / 2ballPosition.y = height - 30draw()
}// 绘制球
const drawBall = () => {const { x, y } = toValue(ballPosition)const { width, height } = toValue(canvasRef)const canvas = canvasRef.valueconst ctx = canvas.getContext('2d')// 清除上一个阶段的球，clearRect：指定矩形区域，让清除部分完全透明ctx.clearRect(0, 0, width, height)ctx.beginPath()ctx.arc(x, y, BallRadius, 0, Math.PI * 2, true)ctx.fillStyle = '#0095DD'ctx.fill()ctx.closePath()
}// 绘制手柄
const drawPaddle = () => {const { width, height } = toValue(canvasRef)if (toValue(rightPress)) {paddleX.value = Math.min(toValue(paddleX) + 7, width - paddleWidth)} else if (toValue(leftPress)) {paddleX.value = Math.max(toValue(paddleX) - 7, 0)}const canvas = canvasRef.valueconst ctx = canvas.getContext('2d')ctx.rect(paddleX.value, height - paddleHeight, paddleWidth, paddleHeight)ctx.fillStyle = "#0095DD"ctx.fill()ctx.closePath()
}const draw = () => {drawBall()drawPaddle()const { width, height } = toValue(canvasRef)const { x, y } = toValue(ballPosition)const { dx, dy } = toValue(step)// 判断球的 x 坐标 位置是否到达画布边缘，如果是，则调整stepif (x + dx > width - BallRadius || x + dx < BallRadius) {step.dx = -step.dx}// 判断球的 y 坐标 位置是否到达画布边缘，如果是，则调整stepif (y + dy < BallRadius) {step.dy = -step.dy} else if (y + dy > height - BallRadius) {// 球在手柄上，则也继续游戏if(x > toValue(paddleX) && x < toValue(paddleX) + paddleWidth){step.dy = -step.dy} else {// 球在手柄外面，游戏结束handleGameOver()return}}ballPosition.x += step.dxballPosition.y += step.dy
}const handleStartGame = () => {if (toValue(status) === 'end') {init()step.dx = 2step.dy = -2status.value = 'default'return}ElMessage.success('游戏开始！')status.value = 'processing'intervalRef.value = setInterval(() => draw(), 10)
}const handlePauseOrContinueGame = () => {const msg = status.value === 'pausing' ? '继续' : '暂停'ElMessage.info(`游戏${msg}！`)if (status.value === 'pausing') {status.value = 'processing'intervalRef.value = setInterval(() => draw(), 10)} else {status.value = 'pausing'clearInterval(Number(intervalRef.value))}
}const handleGameOver = () => {ElMessage.error('游戏失败！')status.value = 'end'clearInterval(Number(intervalRef.value))
}const keyDownHandler = (e: KeyboardEvent) => {if (['Right', 'ArrowRight'].includes(e.key)) {rightPress.value = true} else if (['Left', 'ArrowLeft'].includes(e.key)) {leftPress.value = true}
}const keyUpHandler = (e: KeyboardEvent) => {if (['Right', 'ArrowRight'].includes(e.key)) {rightPress.value = false} else if (['Left', 'ArrowLeft'].includes(e.key)) {leftPress.value = false}
}onMounted(() => {init()window.addEventListener('keydown', keyDownHandler, false)window.addEventListener('keyup', keyUpHandler, false)
})onUnmounted(() => {clearInterval(Number(intervalRef.value))window.removeEventListener('keydown', keyDownHandler, false)window.removeEventListener('keyup', keyUpHandler, false)
})
</script>

Scss部分

<style lang="scss" scoped>
.game {min-height: 675px;height: 100vh;width: 100vw;display: flex;align-items: center;justify-content: center;flex-direction: column;background-image: url(@/assets/ground.png);background-repeat: no-repeat;background-size: cover;background-position: center;
}canvas {box-shadow: -15px 15px 15px rgba(236, 245, 255, 1);background: linear-gradient(230deg,#337ecc 0%,#d9ecff 100%);display: block;border-radius: 10px;
}.btn-box {width: 300px;margin: 50px auto;display: flex;justify-content: center;align-items: center;justify-content: space-between;
}
</style>