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

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

article 2025/3/11 2:16:32

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

相关文章：

  • Java后端高频面经——JVM、Linux、Git、Docker
  • GPT 4.5 可能是戳破 AI 泡沫的模型
  • 力扣 最长公共子序列
  • RabbitMQ高级特性--消息确认机制
  • 创建Electron35 + vue3 + electron-builder项目，有很过坑，记录过程
  • 大白话react第十八章React 与 WebGL 项目的高级拓展与优化
  • Java常见的并发设计模式
  • Elastic：AI 会开始取代网络安全工作吗？
  • 小程序事件系统 —— 33 事件传参 - data-*自定义数据
  • blender 坐标系 金属度
  • Linux 4.4 内核源码的目录结构及其主要内容的介绍
  • 使用python自动提取文本关键词
  • 【文献阅读】On-Device Language Models: A Comprehensive Review
  • LVGL开发说明
  • YOLOv10改进之MHAF(多分支辅助特征金字塔)
  • 【爬虫】开篇词
  • SSH/HTTP/HTTPS
  • Manus：革新未来的智能助手
  • 用R语言的XML库写一个采集图片的爬虫程序
  • 基于编译器特性浅析C++程序性能优化