飞行射击游戏简介
这款飞行射击游戏是一个简单而有趣的 HTML5 游戏，玩家控制一架飞行器，通过发射子弹来击败不断出现的敌机，同时需要避免敌机的掉落。游戏的目标是尽可能多地击败敌机以获得更高的分数。
主要特点：
-
控制方式：
- 使用左右箭头键控制飞行器的移动。
- 按空格键发射子弹。
-
敌机生成：
- 敌机会随机生成并向下移动，玩家需要及时击败它们。
-
碰撞检测：
- 游戏实现了简单的碰撞检测机制，当子弹击中敌机时，敌机和子弹都会消失，玩家的分数会增加。
-
得分系统：
- 玩家击败敌机后会获得分数，游戏界面上会实时显示当前分数。
-
图形表现：
- 游戏使用 HTML5 Canvas 绘制图形，玩家飞机、子弹和敌机都用不同颜色的矩形表示。
HTML 部分
解释
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>飞行射击游戏</title> <style> canvas { background: #87CEEB; /* 设置背景颜色 */ display: block; margin: 0 auto; /* 居中显示画布 */ } </style> </head> <body> <canvas id="gameCanvas" width="800" height="600"></canvas><canvas>元素：用于绘制游戏内容，指定宽度为 800 像素，高度为 600 像素。- 样式：设置画布的背景颜色为天蓝色，并使其居中显示。
JavaScript 部分
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d'); // 获取 2D 上下文以绘制图形
- 获取画布和上下文：通过
getElementById获取画布元素，并使用getContext('2d')获取 2D 绘图上下文。
玩家对象
解释
let player = { x: canvas.width / 2, y: canvas.height - 50, width: 50, height: 50, speed: 5, bullets: [] // 用于存储子弹 };- 玩家属性：定义玩家的位置、大小、移动速度和子弹数组。
敌机和分数
let enemies = []; // 敌机数组
let score = 0; // 初始化分数
- 敌机数组：用于存储当前屏幕上的敌机。
- 分数：用于记录玩家的得分。
绘制函数
解释
function drawPlayer() { ctx.fillStyle = 'blue'; ctx.fillRect(player.x, player.y, player.width, player.height); }drawPlayer：绘制玩家飞机，使用蓝色填充矩形。
解释
function drawBullet(bullet) { ctx.fillStyle = 'red'; ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height); } function drawEnemy(enemy) { ctx.fillStyle = 'green'; ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height); }drawBullet和drawEnemy：分别绘制子弹和敌机，使用红色和绿色填充。
更新游戏状态
解释
function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布 drawPlayer(); // 绘制玩家 // 更新子弹 player.bullets.forEach((bullet, index) => { bullet.y -= bullet.speed; // 子弹向上移动 if (bullet.y < 0) { player.bullets.splice(index, 1); // 移除超出边界的子弹 } else { drawBullet(bullet); // 绘制子弹 } }); // 更新敌机 enemies.forEach((enemy, index) => { enemy.y += enemy.speed; // 敌机向下移动 if (enemy.y > canvas.height) { enemies.splice(index, 1); // 移除超出边界的敌机 } else { drawEnemy(enemy); // 绘制敌机 } // 检测碰撞 player.bullets.forEach((bullet, bulletIndex) => { if (bullet.x < enemy.x + enemy.width && bullet.x + bullet.width > enemy.x && bullet.y < enemy.y + enemy.height && bullet.y + bullet.height > enemy.y) { enemies.splice(index, 1); // 移除敌机 player.bullets.splice(bulletIndex, 1); // 移除子弹 score++; // 增加分数 } }); }); // 每隔一段时间生成敌机 if (Math.random() < 0.02) { enemies.push({ x: Math.random() * (canvas.width - 50), y: -50, width: 50, height: 50, speed: 2 }); } // 显示分数 ctx.fillStyle = 'black'; ctx.fillText('分数: ' + score, 10, 20); }update函数：清空画布并更新游戏状态，包括绘制玩家、子弹和敌机，检测碰撞，生成新的敌机，并更新分数。
游戏循环
解释
function gameLoop() { update(); // 更新游戏状态 requestAnimationFrame(gameLoop); // 请求下一帧 }gameLoop：使用requestAnimationFrame创建一个循环，持续更新游戏状态。
控制事件
解释
document.addEventListener('keydown', (event) => { if (event.key === 'ArrowLeft' && player.x > 0) { player.x -= player.speed; // 向左移动 } else if (event.key === 'ArrowRight' && player.x < canvas.width - player.width) { player.x += player.speed; // 向右移动 } else if (event.key === ' ') { player.bullets.push({ x: player.x + player.width / 2 - 2.5, y: player.y, width: 5, height: 20, speed: 5 }); // 发射子弹 } });- 键盘事件监听：根据用户按下的键（左箭头、右箭头和空格）来控制玩家的移动和发射子弹。
启动游戏
gameLoop(); // 启动游戏循环
</script>
- 启动游戏：调用
gameLoop函数开始游戏循环。
游戏截图如下：
游戏说明：
- 控制飞行器：使用左右箭头键控制飞行器移动，使用空格键发射子弹。
- 敌机生成：敌机会随机生成并向下移动，玩家需要击败敌机以获得分数。
- 碰撞检测：当子弹击中敌机时，敌机和子弹都会消失，分数增加。
有需要的同学可下载完整的文件：https://download.csdn.net/download/xcc212/89740813
扫一扫
764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
