js模仿微信打飞机游戏代码

以下是一个使用JavaScript模仿微信打飞机游戏的简单示例代码：

一、基础概念

HTML5 Canvas
- 这是在网页上绘制图形的一种方式。它提供了一个可以通过JavaScript脚本来绘制图形、动画等的区域。

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>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        // 获取canvas元素和上下文
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // 飞机对象
        const plane = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            width: 50,
            height: 50,
            speed: 5,
            draw: function () {
                ctx.fillStyle = 'blue';
                ctx.fillRect(this.x, this.y, this.width, this.height);
            },
            moveLeft: function () {
                this.x -= this.speed;
                if (this.x < 0) {
                    this.x = 0;
                }
            },
            moveRight: function () {
                this.x += this.speed;
                if (this.x > canvas.width - this.width) {
                    this.x = canvas.width - this.width;
                }
            }
        };

        // 敌机对象（简单示例，单个敌机）
        const enemy = {
            x: Math.random() * (canvas.width - 50),
            y: 0,
            width: 50,
            height: 50,
            speed: 3,
            draw: function () {
                ctx.fillStyle = 'red';
                ctx.fillRect(this.x, this.y, this.width, this.height);
            },
            update: function () {
                this.y += this.speed;
            }
        };

        // 游戏循环
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            plane.draw();
            enemy.draw();
            enemy.update();
            requestAnimationFrame(gameLoop);
        }

        // 事件监听控制飞机移动
        document.addEventListener('keydown', function (e) {
            if (e.code === 'ArrowLeft') {
                plane.moveLeft();
            } else if (e.code === 'ArrowRight') {
                plane.moveRight();
            }
        });


        gameLoop();


    </script>
</body>

</html>

三、优势