vue.js 课程自己编写小游戏

一、太空大战template div classgame keydownonKey tabindex0 div classscore分数{{ score }}/div !-- 子弹 -- div classbullet v-for(b, i) in bullets :keyi :style{ left: b.x px, top: b.y px } /div !-- 怪物 -- div classenemy v-for(e, i) in enemys :keyi :style{ left: e.x px, top: e.y px } /div !-- 飞机 -- div classplane :style{ left: planeX px }✈️/div !-- 游戏结束 -- div classgame-over v-ifgameOver h2游戏结束/h2 p最终得分{{ score }}/p /div /div /template script setup import { ref } from vue const planeX ref(200) const bullets ref([]) const enemys ref([]) const score ref(0) const gameOver ref(false) // 左右移动 空格发射 const onKey (e) { if (gameOver.value) return if (e.key ArrowLeft) planeX.value - 15 if (e.key ArrowRight) planeX.value 15 if (e.key ) { bullets.value.push({ x: planeX.value 10, y: 550 }) } } // 子弹飞行 setInterval(() { if (gameOver.value) return bullets.value.forEach(b b.y - 8) bullets.value bullets.value.filter(b b.y 0) }, 30) // 自动生成怪物 setInterval(() { if (gameOver.value) return enemys.value.push({ x: Math.random() * 350, y: 0 }) }, 1000) // 怪物下落 setInterval(() { if (gameOver.value) return enemys.value.forEach(e e.y 3) // 怪物到底部 游戏结束 enemys.value.forEach(e { if (e.y 570) gameOver.value true }) }, 40) // 碰撞检测 计分 setInterval(() { if (gameOver.value) return bullets.value.forEach((b, bi) { enemys.value.forEach((e, ei) { if (Math.abs(b.x - e.x) 20 Math.abs(b.y - e.y) 20) { bullets.value.splice(bi, 1) enemys.value.splice(ei, 1) score.value 10 } }) }) }, 50) /script style .game { width: 400px; height: 600px; background: #111; margin: 20px auto; position: relative; outline: none; color: white; overflow: hidden; } .score { position: absolute; top: 10px; left: 10px; font-size: 18px; z-index: 10; } .plane { font-size: 30px; position: absolute; bottom: 20px; } .bullet { width: 4px; height: 12px; background: yellow; position: absolute; } .enemy { font-size: 24px; position: absolute; } .game-over { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: red; font-size: 20px; background: #000; padding: 20px 40px; border: 2px solid red; } /style