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

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

article 2025/6/5 9:54:35

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. 敌人系统设计

敌人类型	速度	生命值	分数	特性
基础型	3	1	10	普通移动
快速型	5	1	20	高速移动
坦克型	2	5	50	高生命值

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>

在这里插入图片描述

五、扩展方向

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

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

HTML5 Canvas 星空战机游戏开发全解析一、游戏介绍这是一款基于HTML5 Canvas开发的2D射击游戏，具有以下特色功能： 🚀 纯代码绘制的星空动态背景✈️ 三种不同特性的敌人类型🎮 键盘控制的玩家战机📊 完整的分数统…...

编程日记 2025/6/5 9:54:35

箱式不确定集

“箱式不确定集（Box Uncertainty Set）”可以被认为是一种相对简单但实用的不确定集建模方式。 ✅ 一、什么是“简单的不确定集”？ 在鲁棒优化领域，“简单不确定集”通常指的是： 特点描述形式直观数学表达简洁&#…...

编程日记 2025/6/5 12:15:34

内存管理： 04段页结合的实际内存管理

一、课程核心主题引入这一讲，我要给大家讲的是真正的内存管理，也就是段和页结合在一起的内存管理方式。之前提到过，我们先学习了分段管理内存的工作原理，知道操作系统采用分段的方式，让用户程序能以分段的结构进行编…...

编程日记 2025/6/5 11:33:46

public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); // 初始设置 A 控件的宽度 ControlA.Width ControlB.Width / 2; // 监听 B 控件的 SizeChanged 事件 ControlB.SizeChanged (sender, e) > { ControlA.Width ControlB.Actual…...

编程日记 2025/6/3 21:05:52

Spring Boot 中的 Web 应用与 Reactive Web 应用

该判断题表述为：“Spring Boot启动过程中会判断当前应用类型是Web应用还是Reactive Web应用。” 这个说法是正确的。Spring Boot 的自动配置机制会检查类路径，以确定是将应用程序配置为传统的 Servlet Web 应用还是 Reactive Web 应用。 Spring Boot 中…...

编程日记 2025/6/5 7:59:45

基于 stm32 的农用车控制系统设计

一、系统功能需求分析农用车控制系统需实现多方面功能，以满足农业生产多样化需求。在动力控制方面，要实现发动机转速调节、挡位自动切换；作业控制涵盖农机具升降、播种施肥量调节、喷洒农药的流量与压力控制等；同时，还需具备车辆状态监测功能，实时监控发动机温度、油压…...

编程日记 2025/6/5 15:39:00

vue3: baidusubway using typescript

项目结构：  <template><div class"relative w-full h-screen"><div id"subway-container…...

编程日记 2025/6/5 4:20:42

Redis最佳实践——性能优化技巧之集群与分片

Redis集群与分片在电商应用中的性能优化技巧一、Redis集群架构模式解析 1. 主流集群方案对比方案核心原理适用场景电商应用案例主从复制读写分离数据冗余中小规模读多写少商品详情缓存Redis Sentinel自动故障转移监控高可用需求场景订单状态缓存Redis Cluster原生分布式分片…...

编程日记 2025/6/5 14:19:24

vue或者前端适配makedown推荐开源依赖

在 Vue 或前端项目中处理 Markdown 格式，以下是一些推荐的开源依赖和工具，根据需求分类整理： 1. 基础 Markdown 解析与渲染 Vue 专用库 vueuse/markdown VueUse 生态的 Markdown 工具，轻量且集成度高。适合快速在 Vue 项目中渲…...

编程日记 2025/6/5 3:18:02

打打基础 | 从翻转链表到寄存器、汇编与内存

我作为软件工程师在美国工作了三年，期间接触和浸泡过不少的技术栈，罗列一番的话有 AWS cloud, frontend (React, TypeScript), backend (Django, Springboot, ECS, GraphQL), JVM (Java, Scala, Kotlin), data pipelines (Spark, Snowflake, Prefect, DB…...

编程日记 2025/6/5 23:57:06

深入解析 Dotnet-Boxed.Framework：提升 .NET 开发效率的利器

在现代 .NET 开发中，框架和工具的选择对项目的开发效率和长期维护至关重要。Dotnet-Boxed.Framework 是一个开源框架，旨在简化开发流程，提高生产力。它通过一组实用的工具和自动化功能，帮助开发者快速构建高质量的应用程序。本文将…...

编程日记 2025/6/6 7:01:48

常见相机的ISP算法

常见的ISP算法 3A算法去雾算法图像增强算法图像宽动态算法图像的电子缩放算法，无极电子缩放图像降噪算法相机常见问题 1.相机启动速度问题，启动速度较慢 2.相机扛不住高低温问题 3.相机散热问题问题 4.相机高低温芯片保护掉电 5.相机的成像效果或者…...

编程日记 2025/6/5 9:52:30

2024 CKA模拟系统制作 | Step-By-Step | 8、题目搭建-创建 Ingress

目录免费获取题库配套 CKA_v1.31_模拟系统一、题目二、核心考点 Ingress 资源定义 Ingress Controller 依赖服务暴露验证网络层次关系三、搭建模拟环境 1.创建命名空间 2.安装ingress ingress-nginx-controller 3.创建hello.yaml并部署四、总结 …...

编程日记 2025/6/5 2:38:38

OldRoll复古胶片相机：穿越时光，定格经典

在数字摄影盛行的今天，复古胶片相机的独特魅力依然吸引着无数摄影爱好者。OldRoll复古胶片相机这款软件，以其独特的复古风格和丰富的胶片滤镜效果，让用户仿佛穿越回了那个胶片摄影的黄金时代。它不仅模拟了胶片相机的操作界面，还提…...

编程日记 2025/6/4 0:35:08

通俗易懂的 JS DOM 操作指南：从创建到挂载

目录 🧩 1. 创建元素：document.createElement / createElementNS 📝 2. 创建文本：document.createTextNode ✏️ 3. 修改文本：node.nodeValue 🗑️ 4. 移除元素：el.removeChild() &#x1…...

编程日记 2025/6/5 4:13:09

CSS Day07

1.搭建项目目录 2.网页头部SEO三大标签 3.Favicon图标与版心 （1）Favicon图标 （2）版心 4.快捷导航 5.头部-布局 6.头部-logo 7.头部-导航 8.头部-搜索 9头部-购物车 10.底部-布局 11.底部-服务区域 12.底部-帮助中心 13.底部-版权…...

编程日记 2025/6/3 16:12:47

爬虫框架:scrapy使用心得

文章目录前言一、scrapy是什么？二、使用步骤1.安装和创建2.请求以及参数3.代理池4.请求错误处理5.采集数据入库6.日志及其他配置总结前言有些时候我们需要采集大量数据时,我们需要程序的运行效率高,当然如果有时候不想写请求代码的时候，这些情况我都…...

编程日记 2025/6/6 1:35:32

RV1126-OPENCV 交叉编译

一.下载opencv-3.4.16.zip到自己想装的目录下二.解压并且打开 opencv 目录先用 unzip opencv-3.4.16.zip 来解压 opencv 的压缩包，并且进入 opencv 目录(cd opencv-3.4.16) 三. 修改 opencv 的 cmake 脚本的内容先 cd platforms/linux 然后修改 arm-gnueabi.to…...

编程日记 2025/6/6 5:00:43

【深度学习】 19. 生成模型：Diffusion Models

Diffusion Models Diffusion Models 简介 Diffusion 模型是一类通过逐步添加噪声并再逆向还原的方式进行图像生成的深度生成模型。其基本流程包括： 前向过程（Forward Process）：将真实图像逐步加噪，最终变为高斯噪声…...

编程日记 2025/6/5 12:18:50

JMeter 直连数据库

1.直连数据库的使用场景 1.1 参数化，例如登录使用的账户名密码都可以从数据库中取得 1.2 断言，查看实际结果和数据库中的预期结果是否一致 1.3 清理垃圾数据，例如插入一个用户，它的ID不能相同，在测试插入功能后将数据删…...

编程日记 2025/6/5 2:32:34

易路 iBuilder：解构企业 AI 落地困境，重构智能体时代生产力范式

一、从大模型到智能体的产业跃迁 2024 年堪称中国人工智能产业的 "战略拐点" 之年。当 DeepSeek R1 模型以 "技术价格" 双重普惠模式掀起行业震荡时，各企业纷纷意识到，大模型的真正价值不在于技术炫技，而在于成为企业…...

编程日记 2025/6/5 8:01:41

数据库，Spring Boot，数据源

您是对的，我之前的回答解释了Spring Boot在操作MySQL时不一定需要显式配置指定的数据源类型，因为它有自动配置机制，但没有直接点明在自动配置情况下“数据源是什么”。在Spring Boot自动配置机制下，这个“数据源”指的是一个连接…...

编程日记 2025/6/3 12:23:08

Linux 第三阶段课程：数据库基础与 SQL 应用

数据库定义数据库是按一定规则存储数据的仓库，可存储海量数据（百万级至亿级），数据来源包括文本、图像、音视频等多种形式，如出行记录、消费数据等。数据库分类关系型数据库：基于二维表格模型&#xff0…...

编程日记 2025/6/5 3:35:32

计算机网络之路由表更新

1.解题思路对新接收到的路由表进行更新，全部"距离"1，且"下一跳路由器"都写成发送方路由器的名称。开始对比新表和原来的路由表 1.看目的网络如果是新的目的网络，则直接把对应的各项信息填入表中；如果是相同…...

编程日记 2025/6/4 1:10:11

万兴PDF手机版

万兴PDF手机版(万兴PDF编辑器)是一款国产PDF编辑工具.万兴PDF安卓版提供PDF文档编辑,AI撰写摘要,文档签名,设置密码保护等功能,万兴PDF专家APP以简约风格及文档编辑功能为核心,支持多设备终端同步保存.全免万兴 PDF 编辑器是一款功能强大的 PDF 编辑软件，它支持多种…...

编程日记 2025/6/5 5:57:36

Qt -使用OpenCV得到SDF

博客主页：【夜泉_ly】本文专栏：【暂无】欢迎点赞👍收藏⭐关注❤️ 目录 cv::MatdistanceTransform获得SDF 本文的目标， 是简单学习并使用OpenCV的相关函数， 并获得QImage的SDF(Signed Distance Field 有向距离场) 至…...

编程日记 2025/6/5 7:57:37

Python 中Vector类的格式化实现，重点拆解其超球面坐标系的设计精髓

📌 高维向量的格式化革新在Vector类第5版中，格式化系统迎来重要升级： 坐标系转型：从Vector2d的极坐标（p’后缀）升级为超球面坐标（h’后缀），支持n维空间维度突破&#…...

编程日记 2025/6/3 10:53:39

DDR5 ECC详细原理介绍与基于协议讲解

本文篇幅较长，涉及背景原理介绍方便大家理解其运作方式以及基于DDR5协议具体展开介绍。背景原理介绍上图参考：DDR 内存中的 ECC 写入操作时，On-die ECC的工作过程如下： SoC将需要写入到Memory中的数据发送给控制器控制器将需要写入的数据直接发送给DRAM芯片在DDR5 DR…...

编程日记 2025/6/5 8:45:44