<!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;
            color: #fff;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #game-area {
            position: relative;
            width: 800px;
            height: 600px;
            background-color: #111;
            border: 2px solid #444;
            overflow: hidden;
        }
        #player {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #00f;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        .bullet {
            position: absolute;
            width: 5px;
            height: 15px;
            background-color: #ff0;
        }
        .enemy {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #f00;
        }
        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="game-area">
        <div id="player"></div>
        <div id="score">得分: 0</div>
    </div>

    <script>
        const gameArea = document.getElementById('game-area');
        const player = document.getElementById('player');
        const scoreDisplay = document.getElementById('score');
        let score = 0;
        let playerX = 375; // 初始位置
        const playerSpeed = 10;
        const bulletSpeed = 10;
        const enemySpeed = 3;
        let bullets = [];
        let enemies = [];

        // 玩家移动
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft' && playerX > 0) {
                playerX -= playerSpeed;
            }
            if (e.key === 'ArrowRight' && playerX < 750) {
                playerX += playerSpeed;
            }
            player.style.left = playerX + 'px';
        });

        // 发射子弹
        document.addEventListener('keydown', (e) => {
            if (e.key === ' ') {
                const bullet = document.createElement('div');
                bullet.classList.add('bullet');
                bullet.style.left = (playerX + 22.5) + 'px';
                bullet.style.bottom = '60px';
                gameArea.appendChild(bullet);
                bullets.push(bullet);
            }
        });

        // 生成敌机
        function spawnEnemy() {
            const enemy = document.createElement('div');
            enemy.classList.add('enemy');
            enemy.style.left = Math.random() * 760 + 'px';
            enemy.style.top = '0px';
            gameArea.appendChild(enemy);
            enemies.push(enemy);
        }

        // 更新游戏状态
        function update() {
            // 移动子弹
            bullets.forEach((bullet, index) => {
                const bulletBottom = parseInt(bullet.style.bottom);
                if (bulletBottom > 600) {
                    bullet.remove();
                    bullets.splice(index, 1);
                } else {
                    bullet.style.bottom = (bulletBottom + bulletSpeed) + 'px';
                }
            });

            // 移动敌机
            enemies.forEach((enemy, index) => {
                const enemyTop = parseInt(enemy.style.top);
                if (enemyTop > 600) {
                    enemy.remove();
                    enemies.splice(index, 1);
                } else {
                    enemy.style.top = (enemyTop + enemySpeed) + 'px';
                }
            });

            // 检测碰撞
            bullets.forEach((bullet, bulletIndex) => {
                const bulletRect = bullet.getBoundingClientRect();
                enemies.forEach((enemy, enemyIndex) => {
                    const enemyRect = enemy.getBoundingClientRect();
                    if (bulletRect.left < enemyRect.right &&
                        bulletRect.right > enemyRect.left &&
                        bulletRect.bottom > enemyRect.top &&
                        bulletRect.top < enemyRect.bottom) {
                        // 碰撞发生
                        bullet.remove();
                        enemy.remove();
                        bullets.splice(bulletIndex, 1);
                        enemies.splice(enemyIndex, 1);
                        score += 10;
                        scoreDisplay.textContent = '得分: ' + score;
                    }
                });
            });

            requestAnimationFrame(update);
        }

        // 定时生成敌机
        setInterval(spawnEnemy, 1000);

        // 启动游戏循环
        update();
    </script>
</body>
</html>

# css # 前端 # css3
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

PHP与人工智能：结合案例与可能性探索

avatar 讯飞AI开发者社区
cover

[论文阅读] 人工智能 + 软件工程 | 真实场景下GitHub Copilot生产力之谜：2年数据揭示客观提交无提升，开发者却直呼“好用”

avatar 讯飞AI开发者社区

上下文工程驱动智能体向 通用人工智能

例如在文章开头，我们举的产品经理和工程师之间的那一段对话，一个高质量智能体，不再只是让大模型回答用户的问题，而是通过上下文工程，帮助大模型在回答前获得更加结构化的输入，包括项目状态、需求文档、任务历史、甚至团队氛围，实现大模型更好的理解当前的任务规划、团队过往的沟通隐患、对方的工作状态与担忧、文档/知识库的实时状态等等。这和我们维护我们手机上内存很像，一开始所有应用和历史信息都保留，但当手机出现运

avatar 讯飞AI开发者社区