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

用Deepseek写一个 HTML 和 JavaScript 实现一个简单的飞机游戏

news 2026/2/9 12:28:17

大家好！今天我将分享如何使用 HTML 和 JavaScript 编写一个简单的飞机游戏。这个游戏的核心功能包括：控制飞机移动、发射子弹、敌机生成、碰撞检测和得分统计。代码简洁易懂，适合初学者学习和实践。

游戏功能概述

  1. 玩家控制：使用键盘的 ← 和 → 键控制飞机的左右移动，按下 空格键 发射子弹。

  2. 敌机生成：每隔 1 秒生成一个敌机，敌机从屏幕顶部随机位置向下移动。

  3. 碰撞检测：子弹击中敌机后，敌机和子弹都会消失，并增加 10 分；如果玩家飞机与敌机碰撞，游戏结束。

  4. 得分统计：击中敌机后，得分会显示在屏幕左上角。

实现步骤

1. 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><style>body {margin: 0;overflow: hidden;background-color: #000;}canvas {display: block;margin: 0 auto;background-color: #000;}</style>
</head>
<body><canvas id="gameCanvas"></canvas><script>// JavaScript 代码将在下面实现</script>
</body>
</html>
2. JavaScript 逻辑

JavaScript 部分负责实现游戏的核心逻辑，包括玩家控制、敌机生成、碰撞检测和得分统计。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');canvas.width = 480;
canvas.height = 640;// 飞机对象
const player = {x: canvas.width / 2 - 25,y: canvas.height - 60,width: 50,height: 50,speed: 5,color: '#00FF00',bullets: [],fire: function() {this.bullets.push({ x: this.x + this.width / 2 - 2.5, y: this.y, width: 5, height: 10, color: '#FF0000' });}
};// 敌机数组
const enemies = [];// 得分
let score = 0;// 监听键盘事件
document.addEventListener('keydown', (e) => {if (e.code === 'ArrowLeft' && player.x > 0) {player.x -= player.speed;}if (e.code === 'ArrowRight' && player.x < canvas.width - player.width) {player.x += player.speed;}if (e.code === 'Space') {player.fire();}
});// 生成敌机
function spawnEnemy() {const x = Math.random() * (canvas.width - 50);enemies.push({ x: x, y: -50, width: 50, height: 50, color: '#0000FF', speed: 2 });
}// 检测碰撞
function checkCollision(rect1, rect2) {return rect1.x < rect2.x + rect2.width &&rect1.x + rect1.width > rect2.x &&rect1.y < rect2.y + rect2.height &&rect1.y + rect1.height > rect2.y;
}// 更新游戏状态
function update() {// 移动子弹player.bullets.forEach((bullet, index) => {bullet.y -= 5;if (bullet.y < 0) {player.bullets.splice(index, 1);}});// 移动敌机enemies.forEach((enemy, index) => {enemy.y += enemy.speed;if (enemy.y > canvas.height) {enemies.splice(index, 1);}});// 检测子弹与敌机的碰撞player.bullets.forEach((bullet, bulletIndex) => {enemies.forEach((enemy, enemyIndex) => {if (checkCollision(bullet, enemy)) {player.bullets.splice(bulletIndex, 1);enemies.splice(enemyIndex, 1);score += 10;}});});// 检测玩家与敌机的碰撞enemies.forEach((enemy, index) => {if (checkCollision(player, enemy)) {alert('游戏结束！得分：' + score);document.location.reload();}});
}// 绘制游戏元素
function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制玩家飞机ctx.fillStyle = player.color;ctx.fillRect(player.x, player.y, player.width, player.height);// 绘制子弹ctx.fillStyle = '#FF0000';player.bullets.forEach(bullet => {ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);});// 绘制敌机ctx.fillStyle = '#0000FF';enemies.forEach(enemy => {ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);});// 绘制得分ctx.fillStyle = '#FFFFFF';ctx.font = '20px Arial';ctx.fillText('得分: ' + score, 10, 30);
}// 游戏主循环
function gameLoop() {update();draw();requestAnimationFrame(gameLoop);
}// 定时生成敌机
setInterval(spawnEnemy, 1000);// 启动游戏
gameLoop();
3. 运行游戏

将上述代码保存为一个 .html 文件，然后在浏览器中打开即可运行游戏。你可以使用键盘控制飞机，体验游戏的乐趣！

扩展与优化

这个游戏是一个简单的示例，你可以在此基础上进行扩展和优化，例如：

  1. 增加敌机类型：添加不同速度和血量的敌机。

  2. 添加音效：为子弹发射、击中敌机和游戏结束添加音效。

  3. 提升游戏难度：随着时间推移，逐渐增加敌机的生成速度和数量。

  4. 添加背景音乐：为游戏增加背景音乐，提升沉浸感。

总结

通过这个简单的飞机游戏项目，你可以学习到如何使用 HTML 和 JavaScript 实现基本的游戏逻辑，包括玩家控制、碰撞检测和动态生成游戏元素。希望这篇文章对你有所帮助，也欢迎大家在评论区分享你的改进和优化建议！

如果你对游戏开发感兴趣，不妨尝试扩展这个项目，或者基于此开发更多有趣的游戏！🚀

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>飞机游戏</title><style>body {margin: 0;overflow: hidden;background-color: #000;}canvas {display: block;margin: 0 auto;background-color: #000;}</style>
</head>
<body><canvas id="gameCanvas"></canvas><script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');canvas.width = 480;canvas.height = 640;// 飞机对象const player = {x: canvas.width / 2 - 25,y: canvas.height - 60,width: 50,height: 50,speed: 5,color: '#00FF00',bullets: [],fire: function() {this.bullets.push({ x: this.x + this.width / 2 - 2.5, y: this.y, width: 5, height: 10, color: '#FF0000' });}};// 敌机数组const enemies = [];// 得分let score = 0;// 监听键盘事件document.addEventListener('keydown', (e) => {if (e.code === 'ArrowLeft' && player.x > 0) {player.x -= player.speed;}if (e.code === 'ArrowRight' && player.x < canvas.width - player.width) {player.x += player.speed;}if (e.code === 'Space') {player.fire();}});// 生成敌机function spawnEnemy() {const x = Math.random() * (canvas.width - 50);enemies.push({ x: x, y: -50, width: 50, height: 50, color: '#0000FF', speed: 2 });}// 检测碰撞function checkCollision(rect1, rect2) {return rect1.x < rect2.x + rect2.width &&rect1.x + rect1.width > rect2.x &&rect1.y < rect2.y + rect2.height &&rect1.y + rect1.height > rect2.y;}// 更新游戏状态function update() {// 移动子弹player.bullets.forEach((bullet, index) => {bullet.y -= 5;if (bullet.y < 0) {player.bullets.splice(index, 1);}});// 移动敌机enemies.forEach((enemy, index) => {enemy.y += enemy.speed;if (enemy.y > canvas.height) {enemies.splice(index, 1);}});// 检测子弹与敌机的碰撞player.bullets.forEach((bullet, bulletIndex) => {enemies.forEach((enemy, enemyIndex) => {if (checkCollision(bullet, enemy)) {player.bullets.splice(bulletIndex, 1);enemies.splice(enemyIndex, 1);score += 10;}});});// 检测玩家与敌机的碰撞enemies.forEach((enemy, index) => {if (checkCollision(player, enemy)) {alert('游戏结束！得分：' + score);document.location.reload();}});}// 绘制游戏元素function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制玩家飞机ctx.fillStyle = player.color;ctx.fillRect(player.x, player.y, player.width, player.height);// 绘制子弹ctx.fillStyle = '#FF0000';player.bullets.forEach(bullet => {ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);});// 绘制敌机ctx.fillStyle = '#0000FF';enemies.forEach(enemy => {ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);});// 绘制得分ctx.fillStyle = '#FFFFFF';ctx.font = '20px Arial';ctx.fillText('得分: ' + score, 10, 30);}// 游戏主循环function gameLoop() {update();draw();requestAnimationFrame(gameLoop);}// 定时生成敌机setInterval(spawnEnemy, 1000);// 启动游戏gameLoop();</script>
</body>
</html>

相关文章：

用Deepseek写一个 HTML 和 JavaScript 实现一个简单的飞机游戏

大家好&#xff01;今天我将分享如何使用 HTML 和 JavaScript 编写一个简单的飞机游戏。这个游戏的核心功能包括&#xff1a;控制飞机移动、发射子弹、敌机生成、碰撞检测和得分统计。代码简洁易懂&#xff0c;适合初学者学习和实践。 游戏功能概述 玩家控制&#xff1a;使用键…...

编程日记 2025/3/11 4:46:31

three.js 在 webGL 添加纹理

在我们生成了3D设计之后&#xff0c;我们可以添加纹理使其更加吸引人。在 webGL 和 p5.js中&#xff0c;可以使用 gl.texImage2D() 和 texture() API来为形状应用纹理。 使用 webGL 在 webGL 中&#xff0c;gl.texImage2D() 函数用于从图像文件生成2D纹理。该函数接受许多参…...

编程日记 2025/3/11 4:44:27

【5】单调队列学习笔记

前言 鸽了很久&#xff0c; 2023 / 1 / 5 2023/1/5 2023/1/5 开始&#xff0c; 2023 / 1 / 21 2023/1/21 2023/1/21 才完工。 中途去集训了&#xff0c;没时间来补漏洞。 单调队列 单调队列是一种非常实用的数据结构&#xff0c;可以用于查询一个定长区间在以一定速度向后滑…...

编程日记 2025/3/11 4:41:24

deepseek为什么要开源

一、生态位的抢占与锁定&#xff1a;以 JDK 版本为例​ 在软件开发的世界里&#xff0c;生态位的抢占和先入为主的效应十分显著。就拿 Java 开发中的 JDK 版本来说&#xff0c;目前大多数开发者仍在广泛使用 JDK8。尽管 JDK17 和 JDK21 已经推出&#xff0c;且具备更多先进特性…...

编程日记 2025/3/11 4:38:20

MySQL基本建表操作

目录 1&#xff0c;创建数据库db_ck 1.1创建表 1.2 查看创建好的表 2,创建表t_hero 2.1 先进入数据库Db_Ck 2.1.1 这里可以看是否进入数据库: 2.2 创建表t_Hero 2.2.1 我们可以先在文本文档里面写好然后粘贴进去&#xff0c;因为直接写的话&#xff0c;错了要重新开始 …...

编程日记 2025/3/11 4:36:19

防火墙旁挂组网双机热备负载均衡

一&#xff0c;二层交换网络&#xff1a; 使用MSTPVRRP组网形式 VLAN 2--->SW3为主,SW4 作为备份 VLAN 3--->SW4为主,SW3 作为备份 MSTP 设计 --->SW3 、 4 、 5 运行 实例 1 &#xff1a; VLAN 2 实例 2 &#xff1a; VLAN 3 SW3 是实例 1 的主根&#xff0c;实…...

编程日记 2025/3/11 4:35:17

大白话react第十八章React 与 WebGL 项目的高级拓展与优化

大白话react第十八章React 与 WebGL 项目的高级拓展与优化 1. 实现 3D 模型的导入与动画 在之前的基础上&#xff0c;我们可以导入更复杂的 3D 模型&#xff0c;并且让这些模型动起来&#xff0c;就像在游戏里看到的角色和场景一样。这里我们使用 GLTF 格式的模型&#xff0c…...

编程日记 2025/3/11 4:27:11

JavaScript系列06-深入理解 JavaScript 事件系统：从原生事件到 React 合成事件

JavaScript 事件系统是构建交互式 Web 应用的核心。本文从原生 DOM 事件到 React 的合成事件&#xff0c;内容涵盖&#xff1a; JavaScript 事件基础&#xff1a;事件类型、事件注册、事件对象事件传播机制&#xff1a;捕获、目标和冒泡阶段高级事件技术&#xff1a;事件委托、…...

编程日记 2025/3/11 4:24:07

C++：string容器（下篇）

1.string浅拷贝的问题 // 为了和标准库区分&#xff0c;此处使用String class String { public :/*String():_str(new char[1]){*_str \0;}*///String(const char* str "\0") // 错误示范//String(const char* str nullptr) // 错误示范String(const char* str …...

编程日记 2025/3/11 4:23:05

2.数据结构-栈和队列

数据结构-栈和队列 2.1栈2.1.1栈的表示和实现2.1.2栈的应用举例数制转换括号匹配检验迷宫给求解表达式求值 2.1.3链栈的表示和实现2.1.4栈与递归的实现遍历输出链表中各个结点的递归算法*Hanoi塔问题的递归算法 2.2队列2.2.1循环队列——队列的顺序表示和实现2.2.2链队——队列…...

编程日记 2025/3/11 4:21:03

aws(学习笔记第三十一课) aws cdk深入学习（batch-arm64-instance-type）

aws(学习笔记第三十一课) aws cdk深入学习 学习内容&#xff1a; 深入练习aws cdk下部署batch-arm64-instance-type 1. 深入练习aws cdk下部署batch-arm64-instance-type 代码链接 代码链接 代码链接 -> batch-arm64-instance-type之前代码学习 之前学习代码链接 -> aw…...

编程日记 2025/3/11 4:16:57

MySQL 中，SELECT ... FOR UPDATE

在 MySQL 中&#xff0c;SELECT ... FOR UPDATE 语句会对查询结果集中的行加排他锁&#xff08;X 锁&#xff09;。关于其他事务是否能读取当前行&#xff0c;以下是详细说明&#xff1a; 1. 排他锁&#xff08;X 锁&#xff09;的特性 排他锁是一种独占锁&#xff0c;加锁后&…...

编程日记 2025/3/11 4:09:49

云服务运维智能时代：阿里云操作系统控制台

阿里云操作系统控制台 引言需求介绍操作系统使用实例获得的帮助与提升建议 引言 阿里云操作系统控制台是一款创新型云服务器运维工具&#xff0c;专为简化用户的运维工作而设计。它采用智能化和可视化的方式&#xff0c;让运维变得更加高效、直观。借助AI技术&#xff0c;控制…...

编程日记 2025/3/11 4:06:46

【Agent的革命之路——LangGraph】如何使用config

有时我们希望在调用代理时能够对其进行配置。这包括配置使用哪个语言模型&#xff08;LLM&#xff09;等例子。下面我们将通过一个示例来详细介绍如何进行这样的配置。 在介绍 configurable 之前我们先介绍一下 Langchain 的 RunnableConfig。RunnableConfig是一个配置对象&…...

编程日记 2025/3/11 4:05:44

ArcGIS操作：15 计算点的经纬度，并添加到属性表

注意&#xff1a;需要转化为地理坐标系 1、打开属性表&#xff0c;添加字段 2、计算字段&#xff08;以计算纬度为例 !Shape!.centroid.Y ) 3、效果...

编程日记 2025/3/11 4:04:43

Docker基础入门

第 1 章&#xff1a;核心概念与安装配置 本章首先介绍Docker 的三大核心概念&#xff1a; 镜像 (Image)容器&#xff08;Container)仓库&#xff08;Repository&#xff09; 只有理解了这三个核心概念&#xff0c;才能顺利地理解Docker容器的整个生命周期。 随后&#xff0…...

编程日记 2025/3/11 3:59:38

【Linux】详谈 基础I/O

目录 一、理解文件 狭义的理解&#xff1a; 广义理解&#xff1a; 文件操作的归类认知 系统角度 二、系统文件I/O 2.1 标志位的传递 系统级接口open ​编辑 open返回值 写入文件 读文件 三、文件描述符 3.1&#xff08;0 & 1 & 2&#xff09; 3.2 文件描…...

编程日记 2025/3/11 3:57:35

爬虫案例七Python协程爬取视频

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Python协程爬取视频 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 爬虫案例七协程爬取视频 提示&#xff1a;以下是本篇文章正文…...

编程日记 2025/3/11 3:52:30

[20250304] 关于 RISC-V芯片 的介绍

[20250304] 关于 RISC-V芯片 的介绍 1. 调研报告 一、RISC-V 芯片结构分析 RISC-V 芯片基于开源指令集架构&#xff08;ISA&#xff09;&#xff0c;其核心优势在于模块化设计与高度灵活性。 指令集架构 基础指令集&#xff1a;包含 RV32I&#xff08;32 位&#xff09;、R…...

编程日记 2025/3/11 3:50:28

一学就会：A*算法详细介绍（Python）

&#x1f4e2;本篇文章是博主人工智能学习以及算法研究时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对相关等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅解。文章分类在&am…...

编程日记 2025/3/11 3:48:26

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2026/2/6 14:42:11

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/12/5 3:38:11

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2026/1/27 18:13:23

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2026/2/4 13:10:38

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2026/1/9 3:08:54