当前位置： 首页 > news >正文

HTML5 Canvas 星空战机游戏开发全解析

news 来源：原创 2025/6/1 9:23:38

HTML5 Canvas 星空战机游戏开发全解析

一、游戏介绍

这是一款基于HTML5 Canvas开发的2D射击游戏，具有以下特色功能：

  • 🚀 纯代码绘制的星空动态背景
  • ✈️ 三种不同特性的敌人类型
  • 🎮 键盘控制的玩家战机
  • 📊 完整的分数统计和排行榜系统
  • ⚙️ 三种难度可选
    在这里插入图片描述

二、核心代码解析

1. 游戏初始化

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let game = {// 游戏状态对象stars: [],      // 星星数组bullets: [],    // 玩家子弹enemies: [],    // 敌人数组score: 0,       // 当前分数level: 1,       // 当前关卡player: {       // 玩家对象x: canvas.width/2,y: canvas.height-100,width: 40,health: 100}
};

2. 游戏主循环

function gameLoop() {// 1. 清空画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 2. 更新游戏状态updateGame();// 3. 绘制所有元素drawBackground();drawPlayer();drawEnemies();drawBullets();// 4. 请求下一帧requestAnimationFrame(gameLoop);
}

3. 玩家控制实现

// 键盘事件监听
const keys = {};
window.addEventListener('keydown', e => keys[e.key] = true);
window.addEventListener('keyup', e => keys[e.key] = false);// 玩家移动逻辑
function movePlayer() {if (keys['ArrowLeft']) {// 左移限制：不能超出左边界game.player.x = Math.max(game.player.width/2, game.player.x - 8);}if (keys['ArrowRight']) {// 右移限制：不能超出右边界game.player.x = Math.min(canvas.width-game.player.width/2, game.player.x + 8);}if (keys[' ']) {// 空格键射击fireBullet();}
}

三、关键技术点

1. 敌人系统设计

敌人类型速度生命值分数特性
基础型3110普通移动
快速型5120高速移动
坦克型2550高生命值

2. 碰撞检测优化

采用圆形碰撞检测算法：

function checkCollision(bullet, enemy) {const dx = bullet.x - enemy.x;const dy = bullet.y - enemy.y;const distance = Math.sqrt(dx * dx + dy * dy);return distance < (bullet.radius + enemy.width/2);
}

3. 排行榜实现

使用localStorage存储数据：

function saveHighScore(name, score) {const scores = JSON.parse(localStorage.getItem('highScores')) || [];scores.push({ name, score });scores.sort((a, b) => b.score - a.score);localStorage.setItem('highScores', JSON.stringify(scores.slice(0, 10)));
}

在这里插入图片描述

四、完整代码

<!DOCTYPE html>
<html>
<head><title>星空战机</title><style>body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }canvas { display: block; }#ui {position: absolute;top: 20px;left: 20px;color: white;font-size: 16px;text-shadow: 2px 2px 4px rgba(0,0,0,0.5);}#menu {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.8);padding: 20px;border-radius: 10px;color: white;text-align: center;}button {padding: 10px 20px;margin: 10px;font-size: 16px;cursor: pointer;border: none;border-radius: 5px;background: #3498db;color: white;}</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="ui"></div>
<div id="menu"><h1>星空战机</h1><p>选择难度：</p><button onclick="startGame('easy')">简单</button><button onclick="startGame('normal')">普通</button><button onclick="startGame('hard')">困难</button><div id="highScores"></div>
</div><script>
// 初始化
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const ui = document.getElementById('ui');
const menu = document.getElementById('menu');
const highScores = document.getElementById('highScores');let game = {stars: [],bullets: [],enemyBullets: [],enemies: [],powerups: [],explosions: [],score: 0,level: 1,difficulty: 'normal',player: {x: 0, // 初始位置会在 startGame 中设置y: 0, // 初始位置会在 startGame 中设置width: 40,height: 60,speed: 8,canShoot: true,health: 100,weapon: 'normal',shield: 0},running: false
};// 调整画布大小
function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;if (game.running) {// 如果游戏运行中调整画布大小，重置玩家位置game.player.x = canvas.width / 2;game.player.y = canvas.height - 100;}
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);// 显示高分榜
function showHighScores() {const scores = JSON.parse(localStorage.getItem('highScores')) || [];highScores.innerHTML = '<h2>高分榜</h2>' +scores.map((score, i) => `<div>${i + 1}. ${score.name}: ${score.score}</div>`).join('');
}// 开始游戏
function startGame(difficulty) {game = {...game,stars: [],bullets: [],enemyBullets: [],enemies: [],powerups: [],explosions: [],score: 0,level: 1,difficulty,player: {...game.player,x: canvas.width / 2, // 初始位置在画布中央y: canvas.height - 100, // 初始位置在画布底部health: difficulty === 'easy' ? 150 : difficulty === 'normal' ? 100 : 75,weapon: 'normal',shield: 0},running: true};menu.style.display = 'none';createStars();gameLoop();
}// 游戏结束
function gameOver() {game.running = false;const name = prompt('游戏结束！请输入你的名字：');if (name) {saveHighScore(name, game.score);}menu.style.display = 'block';showHighScores();
}// 保存高分
function saveHighScore(name, score) {const scores = JSON.parse(localStorage.getItem('highScores')) || [];scores.push({ name, score });scores.sort((a, b) => b.score - a.score);localStorage.setItem('highScores', JSON.stringify(scores.slice(0, 10)));
}// 生成星星
function createStars() {for (let i = 0; i < 200; i++) {game.stars.push({x: Math.random() * canvas.width,y: Math.random() * canvas.height,size: Math.random() * 3,alpha: Math.random()});}
}// 绘制背景
function drawBackground() {const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);gradient.addColorStop(0, "#000428");gradient.addColorStop(1, "#004e92");ctx.fillStyle = gradient;ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = "white";game.stars.forEach(star => {ctx.globalAlpha = star.alpha;ctx.beginPath();ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);ctx.fill();});ctx.globalAlpha = 1;
}// 绘制玩家
function drawPlayer() {// 护盾if (game.player.shield > 0) {ctx.strokeStyle = `rgba(0, 255, 255, ${game.player.shield / 100})`;ctx.lineWidth = 2;ctx.beginPath();ctx.arc(game.player.x, game.player.y, 40, 0, Math.PI * 2);ctx.stroke();}// 机身ctx.fillStyle = "#4a90e2";ctx.beginPath();ctx.moveTo(game.player.x, game.player.y);ctx.lineTo(game.player.x - game.player.width / 2, game.player.y + game.player.height);ctx.lineTo(game.player.x + game.player.width / 2, game.player.y + game.player.height);ctx.closePath();ctx.fill();// 机翼ctx.fillStyle = "#2c3e50";ctx.fillRect(game.player.x - 25, game.player.y + 20, 50, 15);// 推进器火焰ctx.fillStyle = `hsl(${Math.random() * 30 + 30}, 100%, 50%)`;ctx.beginPath();ctx.ellipse(game.player.x, game.player.y + game.player.height + 5, 8, 15, 0, 0, Math.PI * 2);ctx.fill();
}// 生成敌人
function createEnemy() {const enemyTypes = ['basic', 'fast', 'tank'];const type = enemyTypes[Math.floor(Math.random() * enemyTypes.length)];game.enemies.push({x: Math.random() * canvas.width,y: -50,width: 40,height: 40,speed: type === 'fast' ? 5 : type === 'tank' ? 2 : 3,health: type === 'tank' ? 5 : 1,type});
}// 敌人射击
function enemyShoot() {game.enemies.forEach(enemy => {if (Math.random() < 0.02) {game.enemyBullets.push({x: enemy.x,y: enemy.y + enemy.height / 2,speed: 5});}});
}// 碰撞检测
function checkCollisions() {// 玩家子弹击中敌人game.bullets.forEach((bullet, bIndex) => {game.enemies.forEach((enemy, eIndex) => {if (bullet.x > enemy.x - enemy.width / 2 &&bullet.x < enemy.x + enemy.width / 2 &&bullet.y > enemy.y - enemy.height / 2 &&bullet.y < enemy.y + enemy.height / 2) {game.score += 10;game.bullets.splice(bIndex, 1);enemy.health -= 1;if (enemy.health <= 0) {game.enemies.splice(eIndex, 1);}}});});// 敌人子弹击中玩家game.enemyBullets.forEach((bullet, index) => {if (bullet.x > game.player.x - game.player.width / 2 &&bullet.x < game.player.x + game.player.width / 2 &&bullet.y > game.player.y - game.player.height / 2 &&bullet.y < game.player.y + game.player.height / 2) {game.player.health -= 10;game.enemyBullets.splice(index, 1);if (game.player.health <= 0) {gameOver();}}});
}// 更新关卡
function updateLevel() {if (game.score >= game.level * 1000) {game.level++;}
}// 游戏主循环
function gameLoop() {if (!game.running) return;// 更新游戏状态updateGame();// 绘制游戏元素drawBackground();drawPlayer();drawBullets();drawEnemies();drawUI();requestAnimationFrame(gameLoop);
}// 更新游戏状态
function updateGame() {// 更新星星位置game.stars.forEach(star => {star.y += 2;if (star.y > canvas.height) {star.y = 0;star.x = Math.random() * canvas.width;}});// 更新子弹位置game.bullets.forEach(bullet => bullet.y -= 10);game.bullets = game.bullets.filter(bullet => bullet.y > 0);// 更新敌人子弹位置game.enemyBullets.forEach(bullet => bullet.y += bullet.speed);game.enemyBullets = game.enemyBullets.filter(bullet => bullet.y < canvas.height);// 更新敌人位置game.enemies.forEach(enemy => enemy.y += enemy.speed);game.enemies = game.enemies.filter(enemy => enemy.y < canvas.height + 50);// 生成敌人if (Math.random() < 0.03) {createEnemy();}// 敌人射击enemyShoot();// 碰撞检测checkCollisions();// 更新关卡updateLevel();
}// 绘制UI
function drawUI() {ui.innerHTML = `<div>分数: ${game.score}</div><div>生命值: ${game.player.health}</div><div>护盾: ${game.player.shield}</div><div>武器: ${game.player.weapon}</div><div>关卡: ${game.level}</div>`;
}// 绘制子弹
function drawBullets() {ctx.fillStyle = "#ffdd57";game.bullets.forEach(bullet => {ctx.beginPath();ctx.arc(bullet.x, bullet.y, 5, 0, Math.PI * 2);ctx.fill();});ctx.fillStyle = "#e74c3c";game.enemyBullets.forEach(bullet => {ctx.beginPath();ctx.arc(bullet.x, bullet.y, 5, 0, Math.PI * 2);ctx.fill();});
}// 绘制敌人
function drawEnemies() {ctx.fillStyle = "#e74c3c";game.enemies.forEach(enemy => {ctx.beginPath();ctx.ellipse(enemy.x, enemy.y, enemy.width / 2, enemy.height / 2, 0, 0, Math.PI * 2);ctx.fill();});
}// 键盘控制
const keys = {};
window.addEventListener('keydown', e => keys[e.key] = true);
window.addEventListener('keyup', e => keys[e.key] = false);// 玩家移动
function movePlayer() {if (keys['ArrowLeft'] && game.player.x > game.player.width / 2) {game.player.x -= game.player.speed;}if (keys['ArrowRight'] && game.player.x < canvas.width - game.player.width / 2) {game.player.x += game.player.speed;}if (keys[' '] && game.player.canShoot) {game.bullets.push({ x: game.player.x, y: game.player.y });game.player.canShoot = false;setTimeout(() => game.player.canShoot = true, 200);}
}// 运行游戏
setInterval(movePlayer, 1000 / 60);
showHighScores();
</script>
</body>
</html>

在这里插入图片描述

五、扩展方向

  1. 添加BOSS战系统
  2. 实现武器升级机制
  3. 加入粒子爆炸特效
  4. 添加背景音乐和音效

相关文章：

  • DNS缓存
  • Java面试实战：从Spring Boot到微服务与AI的全栈挑战
  • java直接获取MyBatis将要执行的动态sql命令（不是拦截器方式）
  • 【海康USB相机被HALCON助手连接过后，MVS显示无法连接故障。】
  • 按照状态实现自定义排序的方法
  • 力扣HOT100之动态规划：70. 爬楼梯
  • LangFuse：开源LLM工程平台的革新实践
  • 关于DDOS
  • 无需自建高防：APP遭遇DDoS的解决方案
  • 汽车售后诊断数据流详细分析
  • IPD的基础理论与框架——（四）矩阵型组织：打破部门壁垒，构建高效协同的底层
  • sass基础语法
  • 优云智算-GPU实例使用指南
  • KEYSIGHT N9320B是德科技N9320B频谱分析仪
  • 2025年DDoS混合CC攻击防御全攻略：构建智能弹性防护体系
  • React---day4
  • 家庭路由器改装，搭建openwrt旁路由以及手机存储服务器，实现外网节点转发、内网穿透、远程存储、接入满血DeepSeek方案
  • React 生命周期与 Hook：从原理到实战全解析
  • 2025.05.28-华为暑期实习第一题-100分
  • STM32 启动文件详解：理解单片机启动的“引导者”
  • 微信里面小程序/简述seo的应用范围
  • 哪个网站可以做拼图/seo工具软件
  • 青岛网站设计选哪家/深圳货拉拉
  • 深圳网站建设 百业/太原网站seo
  • 站长工具seo综合查询隐私查询导航/广告网
  • 合肥网站建设合肥/青岛网站推广企业