实战篇：（十一）JavaScript 网页设计案例：使用 Canvas 实现趣味打气球小游戏
JavaScript 网页设计案例：使用 Canvas 实现趣味打气球小游戏
在网页设计中，交互性和趣味性是吸引用户的重要因素。借助 JavaScript 和 HTML5 的 canvas 元素，我们可以轻松实现各种动画效果，今天将带你打造一个有趣的 打气球小游戏。通过这种小游戏，不仅能展示 JavaScript 的强大功能，还能让用户在轻松愉快的氛围中体验互动式网页。
1. 案例简介
这个小游戏的核心玩法是：通过点击气球，让它们“爆炸”并得分。气球会随机从屏幕底部向上浮动，玩家的目标是尽可能多地点击气球以获取高分。我们将使用 canvas 实现气球的动画，并通过简单的 JavaScript 控制用户交互和得分机制。
2. 项目结构
我们先来创建 HTML 页面，包含 canvas 元素用于绘制气球，并简单设置游戏的启动和结束界面。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>打气球小游戏</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>打气球小游戏</h1><canvas id="gameCanvas"></canvas><div id="score">得分: 0</div><button id="startBtn">开始游戏</button><script src="script.js"></script>
</body>
</html>
3. 使用 Canvas 绘制气球
我们将在 canvas 上绘制不同颜色的气球。为了实现气球的动画效果，气球会从屏幕底部开始向上浮动，同时玩家可以点击气球来得分。首先，让我们设置 canvas 的基本样式和布局。
body {font-family: 'Arial', sans-serif;text-align: center;background-color: #f4f4f4;
}canvas {background-color: #87CEEB; /* 蓝天背景 */display: block;margin: 0 auto;border: 2px solid #333;
}#score {font-size: 20px;margin-top: 10px;
}#startBtn {padding: 10px 20px;font-size: 16px;margin-top: 20px;cursor: pointer;
}
4. 使用 JavaScript 控制气球动画
接下来，我们编写 JavaScript 逻辑，控制气球的生成、动画效果以及点击事件。
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 600;let balloons = [];
let score = 0;
let gameActive = false;// 初始化气球类
class Balloon {constructor(x, y, radius, color, speed) {this.x = x;this.y = y;this.radius = radius;this.color = color;this.speed = speed;this.popped = false; // 气球是否被打破}draw() {if (!this.popped) {ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fillStyle = this.color;ctx.fill();ctx.closePath();}}update() {this.y -= this.speed; // 气球向上移动}
}// 创建随机气球
function createBalloon() {const x = Math.random() * canvas.width;const radius = Math.random() * 20 + 20; // 气球大小const color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色const speed = Math.random() * 2 + 1; // 随机速度balloons.push(new Balloon(x, canvas.height + radius, radius, color, speed));
}// 动画循环
function animate() {if (gameActive) {ctx.clearRect(0, 0, canvas.width, canvas.height);balloons.forEach((balloon, index) => {balloon.update();balloon.draw();// 移除飞出屏幕的气球if (balloon.y + balloon.radius < 0) {balloons.splice(index, 1);}});requestAnimationFrame(animate); // 持续刷新}
}// 检测点击气球
canvas.addEventListener('click', (e) => {const rect = canvas.getBoundingClientRect();const mouseX = e.clientX - rect.left;const mouseY = e.clientY - rect.top;balloons.forEach((balloon, index) => {const dist = Math.hypot(mouseX - balloon.x, mouseY - balloon.y);if (dist < balloon.radius && !balloon.popped) {balloon.popped = true;score += 10;document.getElementById('score').textContent = `得分: ${score}`;balloons.splice(index, 1); // 移除被点击的气球}});
});// 启动游戏
document.getElementById('startBtn').addEventListener('click', () => {gameActive = true;score = 0;document.getElementById('score').textContent = `得分: ${score}`;balloons = [];animate();setInterval(createBalloon, 1000); // 每秒生成一个气球
});
5. 功能说明
这个小游戏的核心逻辑相对简单，通过 canvas 的 arc 方法绘制气球，通过 JavaScript 控制它们的动画和交互：
- 气球动画：每个气球从屏幕底部往上移动，速度和颜色随机。
- 点击事件：玩家可以点击气球，点击成功后气球会消失，得分增加。
- 动态生成气球：通过
setInterval定时生成气球，确保游戏有持续性和挑战性。
6. 游戏扩展
为了进一步提升游戏的趣味性，你可以进行如下扩展：
- 倒计时功能：为游戏添加一个倒计时，限制游戏时间，提升紧张感。
- 多种气球类型：不同颜色的气球可以带来不同分数或效果（如加速、减速）。
- 游戏难度：随着时间增加，气球出现频率提高或移动速度加快，增加挑战性。
- 排行榜：记录玩家的最高分数，增加游戏的竞争性和重复游玩的动机。
通过这个简单的 打气球小游戏，我们展示了如何利用 canvas 实现有趣的互动效果。这个项目不仅可以帮助你熟悉 JavaScript 和 canvas 的基础操作，还可以通过不断扩展功能来提升用户体验。在网页设计中，利用这些趣味性的小游戏，可以有效吸引用户的注意力并提升网站的交互性。
实战篇：（一）项目实战与高频面试题解析含代码：深入理解 ECMAScript 标准
实战篇：（二）React 创建项目并连接 MySQL 后台的实战教程
实战篇：（三）项目实战Vue 3 + WebGL 创建一个简单的 3D 渲染应用
实战篇：（四）Vue2 + Three.js 创建可交互的360度全景视图，可控制旋转、缩放完整代码
实战篇：（五）UniApp 中 Request 封装与使用全解析（避坑指南）
实战篇：（六）创建属于自己的 Vue 3 组件库：主题切换与样式管理
实战篇：（七）Vue2项目中使用 echarts（5.2.2）图表组件含代码
实战篇：（八）Vue2项目中使用 echarts（5.2.2）图表组件含代码
实战篇：（九）vue dhtmlx-gantt 甘特图拖拽 配置
实战篇：（十）Three.js创建全景图预览效果含代码
实战篇：（十一）JavaScript 网页设计案例：使用 Canvas 实现趣味打气球小游戏