HTML5飞机大战

⁡ ⁡ 　

于 2023-06-01 16:23:38 发布

阅读量640

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/m0_71663621/article/details/130990635

版权

文章分享了一段使用HTML和JavaScript编写的简易飞机大战游戏代码。代码中包括HTML的文档结构、Canvas设置以及JavaScript类定义，用于创建玩家飞机、敌人和子弹对象，并实现了游戏循环、碰撞检测和用户交互功能。

摘要由CSDN通过智能技术生成

今天博主由于无聊所以用HTML写了一个简易的飞机大战代码，来给大家分享，希望大家能够喜欢。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5飞机大战</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            background-color: #000;
        }
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

以上是它包括了文档类型声明、语言设置、字符集设置、视口设置和标题设置。此外，它还包括了一些CSS样式，用于设置Canvas的样式。

<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

这是HTML文档的主体部分。它包括了一个Canvas元素和一个JavaScript脚本。JavaScript脚本获取了Canvas元素和其上下文对象，并动态设置了Canvas的宽度和高度为整个标签页大小。

        class GameObject {
            constructor(x, y, width, height) {
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }

            isCollidingWith(other) {
                return this.x < other.x + other.width &&
                       this.x + this.width > other.x &&
                       this.y < other.y + other.height &&
                       this.y + this.height > other.y;
            }
        }

        class Player extends GameObject {
            constructor(x, y) {
                super(x, y, 30, 30);
                this.color = 'green';
            }
        }

        class Enemy extends GameObject {
            constructor(x, y) {
                super(x, y, 30, 30);
                this.color = 'red';
            }
        }

        class Bullet extends GameObject {
            constructor(x, y) {
                super(x, y, 5, 10);
                this.color = 'white';
            }
        }

        class GameObject {
            constructor(x, y, width, height) {
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }

            isCollidingWith(other) {
                return this.x < other.x + other.width &&
                       this.x + this.width > other.x &&
                       this.y < other.y + other.height &&
                       this.y + this.height > other.y;
            }
        }

        class Player extends GameObject {
            constructor(x, y) {
                super(x, y, 30, 30);
                this.color = 'green';
            }
        }

        class Enemy extends GameObject {
            constructor(x, y) {
                super(x, y, 30, 30);
                this.color = 'red';
            }
        }

        class Bullet extends GameObject {
            constructor(x, y) {
                super(x, y, 5, 10);
                this.color = 'white';
            }
        }

这是JavaScript脚本中的类定义部分。它定义了四个类：GameObject、Player、Enemy和Bullet。GameObject是一个基本类，它包含了所有游戏对象的共同属性和方法。Player、Enemy和Bullet是GameObject的子类，它们分别代表玩家、敌人和子弹。

        const player = new Player(canvas.width / 2 - 15, canvas.height - 50);
        const enemies = [];
        const bullets = [];

        function spawnEnemy() {
            const x = Math.random() * (canvas.width - 30);
            const enemy = new Enemy(x, -30);
            enemies.push(enemy);
            setTimeout(spawnEnemy, 1000);
        }

        function shoot() {
            const bullet = new Bullet(player.x + 12.5, player.y);
            bullets.push(bullet);
            setTimeout(shoot, 500);
        }

这是JavaScript脚本中的变量和函数定义部分。它定义了三个变量：player、enemies和bullets，分别代表玩家、敌人和子弹。它还定义了两个函数：spawnEnemy和shoot，分别用于生成敌人和发射子弹。

        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            player.draw();

            enemies.forEach((enemy, index) => {
                enemy.y += 2;
                enemy.draw();

                if (enemy.y > canvas.height) {
                    enemies.splice(index, 1);
                }

                if (player.isCollidingWith(enemy)) {
                    if (!gameOver) {
                        gameOver = true;
                        if (confirm('Game Over，是否重新开始？')) {
                            location.reload();
                        } else {
                            window.close();
                        }
                    }
                }
            });

            bullets.forEach((bullet, index) => {
                bullet.y -= 5;
                bullet.draw();

                if (bullet.y < -10) {
                    bullets.splice(index, 1);
                }

                enemies.forEach((enemy, enemyIndex) => {
                    if (bullet.isCollidingWith(enemy)) {
                        bullets.splice(index, 1);
                        enemies.splice(enemyIndex, 1);
                    }
                });
            });

            requestAnimationFrame(update);
        }

这是JavaScript脚本中的游戏循环部分。它定义了一个update函数，用于更新游戏状态和绘制游戏画面。在update函数中，它首先清除了Canvas上的所有内容，然后绘制了玩家和敌人。接着，它更新了敌人和子弹的位置，并检查是否有敌人被消灭或者是否有玩家与敌人相撞。如果玩家与敌人相撞，则会弹出一个确认框，询问玩家是否重新开始游戏。如果玩家点击“确定”，则会重新加载页面并重新开始游戏。如果玩家点击“取消”，则会关闭网页。最后，它使用requestAnimationFrame函数来循环调用update函数，以实现游戏的动态效果。

        canvas.addEventListener('mousemove', (event) => {
            player.x = event.clientX - canvas.offsetLeft - player.width / 2;
        });

        let gameOver = false;
        spawnEnemy();
        shoot();
        update();
    </script>
</body>
</html>