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

大家好！今天我将分享如何使用 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/32125.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

《Spring日志整合与注入技术：从入门到精通》

《Spring日志整合与注入技术：从入门到精通》

1.Spring与日志框架的整合 1.Spring与日志框架进行整合&#xff0c;日志框架就可以在控制台中&#xff0c;输出Spring框架运行过程中的一些重要的信息。 好处&#xff1a;方便了解Spring框架的运行过程&#xff0c;利于程序的调试。 Spring如何整合日志框架 Spring5.x整合log4j…
阅读更多...
关于mybatis查询时，时间字段的映射问题

关于mybatis查询时，时间字段的映射问题

目录 1.mysql中&#xff0c;关于时间的两种类型 1.1 date 1.2 datetime 2.mybatis从mysql数据库查询出上述两种类型的字段后&#xff0c;映射到Java实体类时的问题 3.结语 1.mysql中&#xff0c;关于时间的两种类型 1.1 date 格式&#xff1a;2002-09-23 特点&#xff1a…
阅读更多...
高效自动化测试：打造Python+Requests+Pytest+Allure+YAML的接口测试框架

高效自动化测试：打造Python+Requests+Pytest+Allure+YAML的接口测试框架

一、背景 在快节奏的开发周期中&#xff0c;如何确保接口质量&#xff1f;自动化测试是关键。通过构建标准化、可复用的测试框架&#xff0c;能显著提升测试效率与准确性&#xff0c;为项目质量保驾护航[1][7]。 二、目标 ✅ 核心目标&#xff1a; ● 实现快速、高效的接口测试…
阅读更多...
【鸿蒙开发】MongoDB入门

【鸿蒙开发】MongoDB入门

https://www.mongodb.com/try/download/community 下载MongoDB: var mongoose require("mongoose");// localhost 域名&#xff0c;代表本机 // 127.0.0.1 ip , 代码本机 mongoose.connect("mongodb://localhost:27017/jiaju").then(() > {console.l…
阅读更多...
Linux中的TCP编程接口基本使用

Linux中的TCP编程接口基本使用

TCP编程接口基本使用 本篇介绍 在UDP编程接口基本使用已经介绍过UDP编程相关的接口&#xff0c;本篇开始介绍TCP编程相关的接口。有了UDP编程的基础&#xff0c;理解TCP相关的接口会更加容易&#xff0c;下面将按照两个方向使用TCP编程接口&#xff1a; 基本使用TCP编程接口…
阅读更多...
wireshark 如何关闭混杂模式 wireshark操作

wireshark 如何关闭混杂模式 wireshark操作

Fiddler和Wireshark都是进行抓包的工具&#xff1a;所谓抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作&#xff0c;也用来检查网络安全。抓包也经常被用来进行数据截取等。黑客常常会用抓包软件获取你非加密的上网数据&#xff0c;然后通过分析&#…
阅读更多...
IDEA2024又一坑：连接Docker服务连不上，提示：Cannot run program “docker“: CreateProcess error=2

IDEA2024又一坑：连接Docker服务连不上，提示：Cannot run program “docker“: CreateProcess error=2

为新电脑安装了IDEA2024版&#xff0c;因为局域网中安装有Docker,所以这台电脑上没有安装&#xff0c;当运行时发现死活连不上Docker报&#xff1a;Cannot run program “docker“: CreateProcess error2 分析&#xff1a; Docker服务有问题 其它电脑都能连&#xff0c;排除 网…
阅读更多...
文件包含漏洞第一关

文件包含漏洞第一关

一、什么是文件包含漏洞 1.文件包含漏洞概述 和SQL注入等攻击方式一样&#xff0c;文件包含漏洞也是一种注入型漏洞&#xff0c;其本质就是输入一段用户能够控制的脚本或者代码&#xff0c;并让服务端执行。 什么叫包含呢&#xff1f;以PHP为例&#xff0c;我们常常把可重复使…
阅读更多...
网络安全事件响应--应急响应（windows）

网络安全事件响应--应急响应（windows）

应用系统日志 Windows主要有以下三类日志记录系统事件&#xff1a;应用程序日志、系统日志和安全日志。 系统和应用程序日志存储着故障排除信息&#xff0c;对于系统管理员更为有用。安全日志记录着事件审计信息&#xff0c;包括用户验证&#xff08;登录、远程访问等&#x…
阅读更多...
C++蓝桥杯基础篇（九）

C++蓝桥杯基础篇（九）

片头 嗨&#xff01;小伙伴们&#xff0c;大家好~ 今天我们将学习蓝桥杯基础篇&#xff08;十&#xff09;&#xff0c;学习函数相关知识&#xff0c;准备好了吗&#xff1f;咱们开始咯&#xff01; 一、函数基础 一个典型的函数定义包括以下部分&#xff1a;返回类型、函数名…
阅读更多...
JVM内存结构笔记01-运行时数据区域

JVM内存结构笔记01-运行时数据区域

文章目录 前言运行时数据区域1.程序计数器定义特点总结 2.虚拟机栈2.1 定义局部变量表 ★操作数栈动态链接方法返回地址(方法出口) 2.2 栈内存溢出演示栈内存溢出 java.lang.StackOverflowError 2.3问题辨析1. 垃圾回收是否涉及栈内存&#xff1f;2. 栈内存分配越大越好吗&…
阅读更多...
01-简单几步！在Windows上用llama.cpp运行DeepSeek-R1模型

01-简单几步！在Windows上用llama.cpp运行DeepSeek-R1模型

1.llama.cpp介绍 Llama.cpp 是一个开源的、轻量级的项目&#xff0c;旨在实现 Meta 推出的开源大语言模型 Llama 的推理&#xff08;inference&#xff09;。Llama 是 Meta 在 2023 年开源的一个 70B 参数的高质量大语言模型&#xff0c;而 llama.cpp 是一个用 C 实现的轻量化…
阅读更多...
对开源VLA sota π0的微调——如何基于各种开源数据集、以及你自己的私有数据集微调π0(含我司的微调实践)

对开源VLA sota π0的微调——如何基于各种开源数据集、以及你自己的私有数据集微调π0(含我司的微调实践)

前言 25年2.4日&#xff0c;几个月前推出π0的公司Physical Intelligence (π)宣布正式开源π0及π0-FAST&#xff0c;如之前所介绍的&#xff0c;他们对用超过 10,000 小时的机器人数据进行了预训练 该GitHub代码仓库「 π0及π0-FAST的GitHub地址&#xff1a;github.com/Ph…
阅读更多...
Redis网络模型

Redis网络模型

redis为什么快 1.主要原因是因为redis是基于内存操作的&#xff0c;比起直接操作磁盘速度快好几倍 2.基于内存的数据库瓶颈主要是在网络io这一块&#xff0c;redis网络模型采用io多路复用技术能够高效的处理并发连接。 3.redis使用单线程执行命令&#xff0c;可以避免上下文…
阅读更多...
PyTorch系列教程：Tensor.view() 方法详解

PyTorch系列教程：Tensor.view() 方法详解

这篇简明扼要的文章是关于PyTorch中的tensor.view()方法的介绍与应用&#xff0c;与reshape()方法的区别&#xff0c;同时给出示例进行详细解释。 Tensor基础 Tensor(张量)的视图是一个新的Tensor&#xff0c;它与原始Tensor共享相同的底层数据&#xff0c;但具有不同的形状或…
阅读更多...
Python数据分析之数据可视化

Python数据分析之数据可视化

Python 数据分析重点知识点 本系列不同其他的知识点讲解&#xff0c;力求通过例子让新同学学习用法&#xff0c;帮助老同学快速回忆知识点 可视化系列&#xff1a; Python基础数据分析工具数据处理与分析数据可视化机器学习基础 四、数据可视化 图表类型与选择 根据数据特…
阅读更多...
swift -(5) 汇编分析结构体、类的内存布局

swift -(5) 汇编分析结构体、类的内存布局

一、结构体 在 Swift 标准库中&#xff0c;绝大多数的公开类型都是结构体&#xff0c;而枚举和类只占很小一部分 比如Bool、 Int、 Double、 String、 Array、 Dictionary等常见类型都是结构体 ① struct Date { ② var year: Int ③ var month: Int ④ …
阅读更多...
推荐一个比较好的开源的工作流引擎

推荐一个比较好的开源的工作流引擎

由于DeepSeek等AI大模型的出现&#xff0c;工作流模式再次流行起来&#xff0c;低代码甚至零代码就可以实现应用开发&#xff0c;而且有DeepSeek这样的超级AI作为大脑&#xff0c;人人都可以开发自动化工作流。 比如搭建邮件助手工作流&#xff0c;可以自动润色各种邮件内容。…
阅读更多...
CarPlanner：用于自动驾驶大规模强化学习的一致性自回归轨迹规划

CarPlanner：用于自动驾驶大规模强化学习的一致性自回归轨迹规划

25年2月来自浙大和菜鸟网络的论文“CarPlanner: Consistent Auto-regressive Trajectory Planning for Large-scale Reinforcement Learning in Autonomous Driving”。 轨迹规划对于自动驾驶至关重要&#xff0c;可确保在复杂环境中安全高效地导航。虽然最近基于学习的方法&a…
阅读更多...
Fedora41安装MySQL8.4.4

Fedora41安装MySQL8.4.4

Fedora41安装MySQL8.4.4 Fedora41用yum仓库安装MySQL8.4.4 笔记250310下载安装启动mysqld服务查看生成的初始密码 , 用初始密码登录登录后,必须修改初始密码才能执行其它操作可选设置降低密码强度要求, 使用简单密码降低 validate_password 组件对密码强度的要求 用SET GLOBAL命…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023