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

—Qeyser2025-03-11 1:31

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

游戏功能概述

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

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

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

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

实现步骤

1. HTML 结构

我们使用 <canvas> 元素作为游戏画布，所有的游戏元素（如飞机、子弹、敌机）都将在画布上绘制。

html 复制代码 
<!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 部分负责实现游戏的核心逻辑，包括玩家控制、敌机生成、碰撞检测和得分统计。

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 实现基本的游戏逻辑，包括玩家控制、碰撞检测和动态生成游戏元素。希望这篇文章对你有所帮助，也欢迎大家在评论区分享你的改进和优化建议！

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

完整代码

html 复制代码 
<!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>
相关推荐
一只月月鸟呀24 分钟前
Vue 过滤器 filter(s) 的使用
javascript·vue.js·ecmascript
秋月华星2 小时前
【flutter】TextField输入框工具栏文本为英文解决（不用安装插件版本
前端·javascript·flutter
青红光硫化黑3 小时前
React基础之React.memo
前端·javascript·react.js
HELLOMILI4 小时前
第四章：反射-Reflecting Your World《Unity Shaders and Effets Cookbook》
游戏·unity·游戏引擎·游戏程序·图形渲染·材质·着色器
NoBarLing4 小时前
python将目录下的所欲md文件转化为html和pdf
python·pdf·html
GDAL4 小时前
better-sqlite3之exec方法
javascript·sqlite
匹马夕阳5 小时前
基于Canvas和和原生JS实现俄罗斯方块小游戏
javascript·canva可画
m0_616188495 小时前
Vue3 中 Computed 用法
前端·javascript·vue.js
六个点5 小时前
图片懒加载与预加载的实现
前端·javascript·面试
热门推荐
01如何在WPS和Word/Excel中直接使用DeepSeek功能02DeepSeek各版本说明与优缺点分析03本地部署DeepSeek教程（Mac版本）04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05Windows 11 安装 Dify 完整指南 非docker环境06DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具07DeepSeek RAGFlow构建本地知识库系统08如何本地部署AI智能体平台，带你手搓一个AI Agent09保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型10本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程