【愚公系列】《循序渐进Vue.js 3.x前端开发实践》020-案例：弹球游戏
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。博客内容.NET、...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在游戏开发中，简单而富有趣味的项目往往能够激发我们的创造力和技术能力。弹球游戏作为经典的小游戏，不仅易于上手，而且在实现过程中能够帮助我们深入理解动画、碰撞检测和事件处理等核心概念。本篇文章将通过构建一个简单的弹球游戏，带领大家探索前端开发中的乐趣与技巧。
在这个案例中，我们将使用 Vue.js 创建一个基本的弹球游戏，玩家可以通过控制挡板来反弹小球，防止其掉落。我们将详细讲解游戏的各个组成部分，包括游戏初始化、球的运动轨迹、碰撞检测和得分机制等。通过这一过程，你将不仅能够掌握 Vue 的基本用法，还能学会如何将其应用于动态游戏开发中。
🚀一、案例：弹球游戏
🔎1.HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆球游戏</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
margin: 0 auto;
width: 440px;
height: 440px;
background-color: blanchedalmond;
}
.ball {
position: absolute;
width: 30px;
height: 30px;
left: 0px;
top: 0px;
background-color: orange;
border-radius: 30px;
}
.board {
position: absolute;
left: 0;
bottom: 0;
height: 10px;
width: 80px;
border-radius: 5px;
background-color: red;
}
</style>
</head>
<body>
<div id="Application">
<div class="container">
<div class="board" :style="{left: boardX + 'px'}"></div>
<div class="ball" :style="{left: ballX+'px', top: ballY+'px'}"></div>
<h1 v-if="fail" style="text-align: center;">游戏失败</h1>
</div>
</div>
<script>
const {createApp, ref, onMounted} = Vue
const config = {
setup() {
const boardX = ref(0) // 控制挡板位置
const ballX = ref(0) // 控制弹球的 X 坐标
const ballY = ref(0) // 控制弹球的 Y 坐标
let rateX = 0.4 // 弹球的水平速度
let rateY = 0.4 // 弹球的垂直速度
const fail = ref(false) // 控制游戏是否结束
let timer = undefined // 定时器，用于控制弹球的移动
// 控制挡板左右移动的事件处理
const keydown = (event) => {
if (event.key == "ArrowLeft" && boardX.value > 10) {
boardX.value -= 20 // 挡板左移
} else if (event.key == "ArrowRight" && boardX.value < 440 - 80) {
boardX.value += 20 // 挡板右移
}
}
// 绑定键盘事件
const enterKeydown = () => {
document.addEventListener("keydown", keydown); // 监听键盘事件
}
// Vue 生命周期钩子，在组件加载时调用
onMounted(() => {
enterKeydown(); // 初始化键盘事件监听
rateX = (Math.random() + 0.1); // 随机生成弹球的水平速度
rateY = (Math.random() + 0.1); // 随机生成弹球的垂直速度
// 启动计时器，控制弹球的移动
timer = setInterval(() => {
// 判断弹球是否碰到边界并进行反弹
if (ballX.value + rateX >= 440 - 30 || ballX.value + rateX <= 0) {
rateX *= -1 // 水平反弹
}
if (ballY.value + rateY <= 0) {
rateY *= -1 // 垂直反弹
}
// 控制小球的移动
ballX.value += rateX;
ballY.value += rateY;
// 游戏失败判定
if (ballY.value >= 440 - 30 - 10) {
// 如果弹球触及底部，检查是否被挡板接住
if (boardX.value <= ballX.value + 30 && boardX.value + 80 >= ballX.value) {
rateY *= -1 // 挡板接住弹球，反弹
} else {
// 没有接住弹球，游戏结束
clearInterval(timer);
fail.value = true; // 设置游戏失败
}
}
}, 2);
})
// 返回响应式数据给模板
return { boardX, ballX, ballY, fail };
}
}
createApp(config).mount("#Application");
</script>
</body>
</html>
🔎2.HTML 结构解析
<div id="Application">：Vue 应用的根元素，所有的游戏界面都在这个容器内渲染。<div class="container">：游戏区域容器，控制了游戏的大小（440x440px），并设定了背景颜色。<div class="board" :style="{left: boardX + 'px'}"></div>：这是控制挡板的元素，它的left样式绑定了boardX，以便根据用户的输入调整挡板位置。<div class="ball" :style="{left: ballX + 'px', top: ballY + 'px'}"></div>：这是控制弹球的位置，通过绑定ballX和ballY来实时更新弹球的位置。<h1 v-if="fail">游戏失败</h1>：如果游戏失败，显示一个提示文字游戏失败。v-if="fail"用来控制是否显示。
🔎3.CSS 样式解析
.container：游戏区域的样式，设置为 440px x 440px，并使用position: relative来确保子元素可以相对定位。.ball：弹球的样式，宽高为 30px，设置为圆形（border-radius: 30px），背景为橙色，使用position: absolute来精确定位。.board：挡板的样式，宽 80px，高 10px，放置在容器的底部（通过left: 0和bottom: 0设置）。
🔎4.JavaScript (Vue 3) 逻辑解析
-
响应式变量：
boardX：控制挡板的水平位置（使用ref创建响应式变量）。ballX和ballY：控制弹球的坐标。fail：控制游戏失败的标志，当为true时显示“游戏失败”的提示。
-
运动控制：
rateX和rateY：控制弹球的移动速度。每次游戏开始时，rateX和rateY被赋予一个随机的速度，模拟弹球的运动。
-
键盘事件：
keydown监听箭头键的按下，左右箭头控制挡板的左右移动，限制挡板的移动范围（不超出容器的边界）。enterKeydown方法将keydown事件监听器添加到文档上。
-
生命周期钩子：
onMounted：组件挂载后调用，初始化键盘事件监听，并启动定时器，定时器每 2 毫秒更新一次弹球的位置。
-
弹球反弹和失败判定：
- 弹球碰到容器的边界（左右或顶部）时，会反弹（即改变速度的方向）。
- 如果弹球触及容器底部，并且挡板没有接住它（即挡板的水平位置不覆盖弹球），游戏结束，显示“游戏失败”。
🔎5.总结
这个游戏的核心功能包括：
- 控制弹球在游戏区域内移动并反弹。
- 使用键盘左右箭头控制挡板的位置。
- 检查弹球是否被挡板接住，如果没有接住则游戏失败。
- 游戏失败后显示提示。
通过 Vue 3 的响应式特性，代码简洁易懂，所有界面更新都通过数据绑定和事件驱动来实现，使得游戏逻辑与界面状态相互绑定。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）