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

news2025/3/12 9:21:38

大家好！今天我将分享如何使用 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.coloradmin.cn/o/2313672.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android Compose MutableInteractionSource介绍

Android Compose MutableInteractionSource介绍

在 Android 开发中&#xff0c;Compose 是 Google 推出的现代化 UI 工具包&#xff0c;它让开发者能够更简洁高效地构建应用界面。而 MutableInteractionSource 是 Compose 中一个重要的组件&#xff0c;它可以帮助你处理用户与界面交互时的状态变化&#xff0c;尤其在处理交互…
阅读更多...
[杂学笔记] TCP和UDP的区别，对http接口解释 ， Cookie和Session的区别 ，http和https的区别 ， 智能指针 ，断点续传

[杂学笔记] TCP和UDP的区别，对http接口解释 ， Cookie和Session的区别 ，http和https的区别 ， 智能指针 ，断点续传

文章目录 1. TCP和UDP的区别2. 对http接口解释3. Cookie和Session的区别4. http和https的区别5. 智能指针6.断点续传 1. TCP和UDP的区别 tcp的特点&#xff1a; 面向连接&#xff0c;可靠性高&#xff0c;全双工&#xff0c;面向字节流udp特点&#xff1a;无连接&#xff0c;不…
阅读更多...
【NLP 29、项目 Ⅰ：电商评论分类（好评 / 差评） 】

【NLP 29、项目 Ⅰ：电商评论分类（好评 / 差评） 】

目录 项目介绍 一、训练及测试数据 二、代码实现 1.配置文件 config.py 2.分割训练集和验证集 split_train_valid.py 3.数据加载文件 loader.py Ⅰ、 加载和处理数据 DataGenerator ① 初始化 ② 数据加载 ③ 文本编码 ④ 补齐 / 截断 ⑤ 获取数据集长度和指定索引的数据 Ⅱ、加…
阅读更多...
halcon deeplearn 语义分割经验分享 1

halcon deeplearn 语义分割经验分享 1

本人因为公司遗留问题,为了解决识别错误的问题。尝试过yolo12进行目标检测。初步测试良好但是是halcon的socket通信不行。故而去测试halcon 的deeplearn。自己标注数据。 注: 这个软件使用非常无脑。推荐没有基础的人去用 语义分割 以下是halcon的调用模型 *读取模型 read_dl_…
阅读更多...
从零开始的python学习（五）P75+P76+P77+P78+P79+P80

从零开始的python学习（五）P75+P76+P77+P78+P79+P80

本文章记录观看B站python教程学习笔记和实践感悟&#xff0c;视频链接&#xff1a;【花了2万多买的Python教程全套&#xff0c;现在分享给大家&#xff0c;入门到精通(Python全栈开发教程)】 https://www.bilibili.com/video/BV1wD4y1o7AS/?p6&share_sourcecopy_web&v…
阅读更多...
Kylin麒麟操作系统服务部署 | ISCSI存储服务

Kylin麒麟操作系统服务部署 | ISCSI存储服务

以下所使用的环境为&#xff1a; 虚拟化软件&#xff1a;VMware Workstation 17 Pro 麒麟系统版本&#xff1a;Kylin-Server-V10-SP3-2403-Release-20240426-x86_64 一、网络存储结构 网络存储技术&#xff08;Network Storage Technologies&#xff09;是基于数据存储的一种通…
阅读更多...
数据结构_单链表

数据结构_单链表

今天我们要开启链表的学习 &#x1f58b;️&#x1f58b;️&#x1f58b;️ 学了顺序表我们可以知道&#xff1a; &#x1f388;链表其实就是争对顺序表的缺点来设计的&#xff0c;补足的就是顺序表的缺点 &#x1f388;链表在物理上是上一个节点存放的下一个节点的地址 链表 …
阅读更多...
深陷帕金森困境，怎样重燃生活信心？

深陷帕金森困境，怎样重燃生活信心？

帕金森&#xff0c;这个悄然影响无数中老年人生活的神经系统疾病&#xff0c;正逐渐走进大众视野。患病后&#xff0c;患者常出现静止性震颤&#xff0c;安静时手部、下肢不自主抖动&#xff0c;如同在默默诉说着身体的异常。肢体变得僵硬&#xff0c;行动迟缓&#xff0c;起步…
阅读更多...
C语言（23）

C语言（23）

字符串函数 11.strstr函数 1.1函数介绍&#xff1a; 头文件&#xff1a;string.h char *strstr ( const char * str1,const char *str2); 作用&#xff1a;在一个字符串&#xff08;str1&#xff09;中寻找另外一个字符串&#xff08;str2&#xff09;是否出现过 如果找到…
阅读更多...
Docker运行hello-world镜像失败或超时：Unable to find image ‘hello-world:latest‘ locally Trying to pull reposi

Docker运行hello-world镜像失败或超时：Unable to find image ‘hello-world:latest‘ locally Trying to pull reposi

Docker运行hello-world镜像失败或超时&#xff0c;报错&#xff1a;Unable to find image ‘hello-world:latest’ locally Trying to pull repository docker.io/library/hello-world … /usr/bin/docker-current: missing signature key. See ‘/usr/bin/docker-current run …
阅读更多...
Linux内核如何和设备树协同工作的？

Linux内核如何和设备树协同工作的？

1.编写设备树 cd arch/riscv/boot/dts/ 再cd到厂商&#xff0c;例如下述内容。 2.编译设备树&#xff08;dts->dtb&#xff09;通过dtc命令来转换 3.解析设备树 例如上述内容&#xff0c;都是对设备树的解析。 这里重点说一下内核对设备树的处理吧&#xff0c;因为这个内…
阅读更多...
LLM中的transformer结构学习（二 完结 Multi-Head Attention、Encoder、Decoder）

LLM中的transformer结构学习（二 完结 Multi-Head Attention、Encoder、Decoder）

文章目录 LLM中的transformer结构学习&#xff08;二 完结 Multi-Head Attention、Encoder、Decoder&#xff09;Self-Attention &#xff08;自注意力机制&#xff09;结构多头注意力 EncoderAdd & Norm 层Feed Forward 层 EncoderDecoder的第一个Multi-Head AttentionMas…
阅读更多...
高效编程指南：PyCharm与DeepSeek的完美结合

高效编程指南：PyCharm与DeepSeek的完美结合

DeepSeek接入Pycharm 前几天DeepSeek的充值窗口又悄悄的开放了&#xff0c;这也就意味着我们又可以丝滑的使用DeepSeek的API进行各种辅助性工作了。本文我们来聊聊如何在代码编辑器中使用DeepSeek自动生成代码。 注&#xff1a;本文适用于所有的JetBrains开发工具&#xff0c…
阅读更多...
爱可以传递，幸福可以具象化

爱可以传递，幸福可以具象化

遇到什么&#xff1a;晚上上课学生吵吵吵&#xff0c;把学生手机全部收了&#xff0c;放讲台上。 感受到的情绪&#xff1a;很烦躁。 反思&#xff1a;收手机也不是长久之计&#xff0c;可是物理有什么翻转课堂呢&#xff1f; 明天的待办事项&#xff1a;早上高数选修课&#x…
阅读更多...
力扣-数组-367 有效的完全平方数

力扣-数组-367 有效的完全平方数

思路和时间复杂度 思路&#xff1a;利用二分&#xff0c;确定区间是左闭右闭&#xff0c;然后根据大小进行二分时间复杂度&#xff1a; 代码 class Solution { public:bool isPerfectSquare(int num) {bool flag false;if(num 0 || num 1) return true;long long …
阅读更多...
Java关键字与标识符

Java关键字与标识符

Java关键字是预定义的保留字&#xff0c;用于定义程序结构和语义&#xff0c;如if、for、class等&#xff0c;不能用作标识符。JDK 8有50个关键字&#xff0c;JDK 11引入var用于局部变量类型推断。标识符用于命名变量、类等&#xff0c;由字母、数字、_、$组成&#xff0c;不能…
阅读更多...
【神经网络】python实现神经网络（二）——正向推理的模拟演练

【神经网络】python实现神经网络（二）——正向推理的模拟演练

一.神经网络假设 在开始讲解之前，首先我们假设有这样一套神经网络，一共有三层： 其中，关于神经网络的权重、偏置的符号定义如下（如果不知道什么是权重和偏置，可以参考我之前写过的一篇文章：【机器学习】机器学习是什么意思）： 以下文章将沿用以上这个设…
阅读更多...
DeepSeek模型本地化部署方案及Python实现

DeepSeek模型本地化部署方案及Python实现

DeepSeek实在是太火了&#xff0c;虽然经过扩容和调整&#xff0c;但反应依旧不稳定&#xff0c;甚至小圆圈转半天最后却提示“服务器繁忙&#xff0c;请稍后再试。” 故此&#xff0c;本文通过讲解在本地部署 DeepSeek并配合python代码实现&#xff0c;让你零成本搭建自己的AI…
阅读更多...
Houdini SOP层 Scatter节点

Houdini SOP层 Scatter节点

SOP 代表 Surface Operator&#xff08;几何体操作节点&#xff09;&#xff0c;所有几何体的建模、变形、分布等操作都在此层级完成。 Scatter节点的作用就是 以不同的密度在模型表面撒点 Scatter 节点属于 SOP&#xff08;几何体&#xff09;层级&#xff1a; 进入 Geometr…
阅读更多...
【网络安全工程】任务12：网络安全设备

【网络安全工程】任务12：网络安全设备

目录 一、防火墙​ 1、作用​ 2、配置方式​ 3、存在的漏洞​ 二、入侵检测系统&#xff08;IDS&#xff09;和入侵防御系统&#xff08;IPS&#xff09;​ 1、作用​ 2、配置方式​ 3、存在的漏洞​ 三、防病毒网关​ ​1、作用​ 2、配置方式​ 3、存在的漏洞​ …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023