飞行射击：Trae 一句话生成的“空中战场”

Goboy2025-08-09 15:26

提到 ​飞行射击 ​，脑海里立刻浮现出那种经典街机画面：​一架小飞机，呼呼往上冲，一路扫射敌人，还要捡道具升级武器 ​。 过去想做一个类似游戏，要写 ​飞机移动逻辑、子弹发射、敌机生成、碰撞检测、道具系统​，光是调弹道就够折腾的。

而现在，只要一句话，Trae IDE 就能把一个完整的飞行射击游戏搬到你面前。

💡 我想要的玩法

这次我的想法特别明确：

  • 玩家能操控飞机自由移动：上下左右灵活滑动；
  • 持续发射子弹：只要按住射击键，小飞机就能不断开火；
  • 敌人飞机动态生成：一波一波往下飞，有的快，有的带弹幕；
  • 收集道具升级武器：捡到星星或能量块，子弹变粗、变散射；
  • 画面要有街机感：色彩鲜艳，打击感强。

于是我对 Trae 说了一句：

"生成一个飞行射击游戏，玩家控制飞机射击敌人，收集道具提升能力。"

✨ Trae 的"秒产"魔法

几秒钟后，Trae 就给了我一个完整的飞行射击游戏：

✅ ​飞机操控流畅 ​：键盘、鼠标、甚至触屏都能控制； ✅ ​子弹自动发射 ​：按住射击键，小飞机就能持续开火； ✅ ​敌人动态生成 ​：一波比一波凶，有些还会发射子弹； ✅ ​道具掉落系统 ​：消灭敌机后，随机掉星星、能量块，捡了子弹直接升级； ✅ ​炫酷画面和音效​：子弹有火花特效，敌机爆炸时的音效特别爽。

🧩 试玩体验

第一局就被带进了"小时候街机厅"的感觉：

✈ ​飞机在空中自由穿梭 ​，打掉一架敌机特别解压； 💥 ​子弹一波波扫出去 ​，敌机爆炸带来的快感让人停不下来； ⭐ ​捡到第一个升级道具时 ​，子弹瞬间变三连发，爽感直线上升； ⚠ ​敌机越来越多​，屏幕瞬间成了"弹幕炼狱"，躲子弹的时候手忙脚乱，但超刺激！

🛠 想加料？一句话就能搞定

Trae 的厉害之处在于，你可以 ​随时扩展玩法​，比如：

  • "加一个大 BOSS 关卡" → 出现超大敌机，血条超厚，要打好久才掉；
  • "增加护盾道具" → 捡到后可以短时间无敌；
  • "加双人模式" → 两个玩家一起扫射，配合更欢乐；
  • "让敌机掉金币，可以买升级" → 增加养成感。

这些玩法，说一句就行，Trae 自动生成逻辑和 UI。

🎮 过去 vs 现在

过去写飞行射击游戏：

  • 设计 飞机控制和移动逻辑；
  • 调 子弹发射和碰撞检测；
  • 写 敌机 AI 和道具系统；
  • 调 爆炸特效和音效。

现在用 Trae： 👉 一句话 → 核心玩法马上有； 👉 想改想扩展 → 继续说，Trae 自动补全。

✅ 结语

如果你也想做一个 ​开火就停不下来的飞行射击游戏​，打开 Trae，只要输入：

"生成一个飞行射击游戏，玩家控制飞机射击敌人，收集道具提升能力。"

几秒后，一个 能打、能捡、能升级 的空中战场就在你面前展开：敌机一波波来，子弹满天飞，爽感直接拉满。

这就是 Trae 的魅力 ------ 一句话，就能重现经典街机的飞行射击快感！

html 复制代码 
<!DOCTYPE html>

<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>空战英雄</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        

        body {
            font-family: 'Arial', sans-serif;
            background-color: #111;
            display: flex;
            justify-content: center;
            align-items: center;

            height: 100vh;
            overflow: hidden;
            color: #fff;
        }
        

        .game-container {
            position: relative;
            width: 800px;
            height: 600px;
            background: linear-gradient(to bottom, #1a2a3a, #0a1a2a);
            border: 2px solid #3a5a7a;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
            overflow: hidden;
        }
        
        /* 云朵背景 */
        .cloud {
            position: absolute;
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 1;
            opacity: 0.5;
        }
        
        /* 游戏信息显示 */
        .info-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 10;
        }
        
        .score-container {
            font-size: 20px;

            color: #fff;
            text-shadow: 0 0 5px #00f, 0 0 10px #00f;
        }
        
        .health-container {
            font-size: 20px;

            color: #fff;
            text-shadow: 0 0 5px #f00, 0 0 10px #f00;
        }
        
        .weapon-container {
            font-size: 20px;
            color: #fff;
            text-shadow: 0 0 5px #ff0, 0 0 10px #ff0;
        }
        

        .health-bar {
            display: inline-block;
            width: 150px;
            height: 15px;
            background-color: #333;
            border-radius: 7px;
            margin-left: 10px;
            overflow: hidden;
            vertical-align: middle;
        }
        
        .health-fill {

            height: 100%;
            background: linear-gradient(to right, #f00, #ff0);

            width: 100%;

            transition: width 0.3s;
        }
        

        /* 玩家飞机 */

        .player {
            position: absolute;
            width: 60px;
            height: 60px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path d="M30,5 L45,45 L30,35 L15,45 Z" fill="%2300BFFF" stroke="%230080FF" stroke-width="2"/><path d="M25,15 L35,15 L35,30 L25,30 Z" fill="%23FFFFFF" stroke="%230080FF" stroke-width="1"/><circle cx="30" cy="25" r="3" fill="%23FF0000"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 5;
            transition: transform 0.2s;
        }
        
        /* 敌人飞机 */
        .enemy {
            position: absolute;
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 4;
        }
        
        .enemy-1 {
            width: 40px;
            height: 40px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M20,5 L30,20 L20,35 L10,20 Z" fill="%23FF4500" stroke="%23FF0000" stroke-width="2"/><circle cx="20" cy="20" r="5" fill="%23333"/></svg>');

        }
        
        .enemy-2 {
            width: 50px;
            height: 50px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M10,10 L40,10 L25,40 Z" fill="%23FF00FF" stroke="%23800080" stroke-width="2"/><circle cx="25" cy="20" r="7" fill="%23333"/></svg>');
        }
        
        .enemy-3 {
            width: 70px;
            height: 70px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M35,5 L60,30 L35,55 L10,30 Z" fill="%2300FF00" stroke="%23008000" stroke-width="2"/><circle cx="25" cy="25" r="5" fill="%23333"/><circle cx="45" cy="25" r="5" fill="%23333"/><path d="M25,40 Q35,50 45,40" stroke="%23000" stroke-width="2" fill="none"/></svg>');

        }
        
        /* 子弹 */
        .bullet {
            position: absolute;
            width: 5px;
            height: 15px;

            background-color: #0ff;
            border-radius: 2.5px;
            z-index: 3;
            box-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
        }
        
        .bullet-2 {
            background-color: #ff0;
            box-shadow: 0 0 5px #ff0, 0 0 10px #ff0;
        }
        

        .bullet-3 {
            width: 8px;
            height: 20px;
            background-color: #f0f;

            box-shadow: 0 0 5px #f0f, 0 0 10px #f0f;
        }
        
        .enemy-bullet {
            position: absolute;
            width: 5px;

            height: 15px;
            background-color: #f00;
            border-radius: 2.5px;
            z-index: 3;
            box-shadow: 0 0 5px #f00, 0 0 10px #f00;
        }
        
        /* 道具 */
        .powerup {
            position: absolute;
            width: 30px;
            height: 30px;
            z-index: 4;

            animation: rotate 3s linear infinite;
        }

        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .powerup-health {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><circle cx="15" cy="15" r="13" fill="%23FF0000" stroke="%23FFFFFF" stroke-width="2"/><rect x="7" y="13" width="16" height="4" fill="%23FFFFFF"/><rect x="13" y="7" width="4" height="16" fill="%23FFFFFF"/></svg>');
        }
        
        .powerup-shield {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><circle cx="15" cy="15" r="13" fill="%230000FF" stroke="%23FFFFFF" stroke-width="2"/><path d="M15,5 L25,10 L25,20 L15,25 L5,20 L5,10 Z" fill="%230000AA" stroke="%23FFFFFF" stroke-width="1"/></svg>');
        }
        
        .powerup-weapon {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><circle cx="15" cy="15" r="13" fill="%23FFFF00" stroke="%23FFFFFF" stroke-width="2"/><path d="M10,20 L15,5 L20,20 L15,15 Z" fill="%23FFFFFF"/></svg>');
        }
        
        .powerup-speed {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><circle cx="15" cy="15" r="13" fill="%2300FF00" stroke="%23FFFFFF" stroke-width="2"/><path d="M8,15 L22,15 M18,11 L22,15 L18,19" stroke="%23FFFFFF" stroke-width="2" fill="none"/></svg>');
        }
        
        /* 特效 */
        .explosion {
            position: absolute;
            width: 50px;
            height: 50px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="%23FF4500"/><circle cx="25" cy="25" r="15" fill="%23FF7F00"/><circle cx="25" cy="25" r="10" fill="%23FFFF00"/><circle cx="25" cy="25" r="5" fill="%23FFFFFF"/></svg>');
            background-size: contain;

            z-index: 6;
            animation: explode 0.5s forwards;
        }

        
        @keyframes explode {
            0% { transform: scale(0.1); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }
        
        .shield {
            position: absolute;
            width: 80px;
            height: 80px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><circle cx="40" cy="40" r="35" fill="none" stroke="%2300BFFF" stroke-width="3" stroke-opacity="0.7"/><circle cx="40" cy="40" r="30" fill="none" stroke="%230080FF" stroke-width="2" stroke-opacity="0.5"/></svg>');
            background-size: contain;
            z-index: 4;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.7; }

            50% { transform: scale(1.1); opacity: 0.5; }
            100% { transform: scale(1); opacity: 0.7; }
        }
        
        /* 游戏界面 */
        .game-over {

            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 20;
            display: none;
        }
        
        .game-over-title {
            font-size: 48px;
            font-weight: bold;
            color: #f00;
            margin-bottom: 20px;
            text-align: center;
            text-shadow: 0 0 10px #f00;
        }
        
        .final-score {
            font-size: 36px;
            color: #fff;

            margin-bottom: 30px;
            text-align: center;
            text-shadow: 0 0 5px #0ff;
        }
        
        .restart-button {
            padding: 15px 30px;
            font-size: 20px;
            font-weight: bold;
            background-color: #00f;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;

            transition: all 0.3s;
            text-shadow: 0 0 5px #fff;
            box-shadow: 0 0 10px #00f;
        }
        
        .restart-button:hover {
            background-color: #00a;
            transform: scale(1.05);

            box-shadow: 0 0 20px #00f;
        }
        
        .start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 20;
        }
        
        .start-screen-title {
            font-size: 48px;

            font-weight: bold;
            color: #0ff;
            margin-bottom: 20px;
            text-align: center;

            text-shadow: 0 0 10px #0ff;
        }
        
        .start-screen-subtitle {
            font-size: 24px;

            color: #fff;
            margin-bottom: 30px;
            text-align: center;

            max-width: 80%;
            line-height: 1.4;
            text-shadow: 0 0 5px #0ff;
        }
        

        .start-button {

            padding: 15px 30px;
            font-size: 20px;
            font-weight: bold;
            background-color: #00f;
            color: white;

            border: none;

            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            text-shadow: 0 0 5px #fff;

            box-shadow: 0 0 10px #00f;
        }
        
        .start-button:hover {
            background-color: #00a;

            transform: scale(1.05);

            box-shadow: 0 0 20px #00f;
        }
        
        .level-indicator {
            position: absolute;
            top: 50px;
            left: 20px;
            font-size: 20px;
            color: #fff;
            z-index: 10;
            text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
        }
    </style>

</head>
<body>
    <div class="game-container" id="game-container">
        <div class="info-container">
            <div class="score-container">

                分数: <span id="score">0</span>
            </div>

            
            <div class="weapon-container">
                武器等级: <span id="weapon-level">1</span>
            </div>
            
            <div class="health-container">
                生命值: <div class="health-bar"><div class="health-fill" id="health-fill"></div></div>
            </div>

        </div>
        
        <div class="level-indicator">
            等级: <span id="level">1</span>
        </div>
        
        <div class="player" id="player"></div>
        
        <div class="game-over" id="game-over">

            <div class="game-over-title">游戏结束</div>
            <div class="final-score">最终得分: <span id="final-score">0</span></div>

            <button class="restart-button" id="restart-button">再玩一次</button>

        </div>
        
        <div class="start-screen" id="start-screen">
            <div class="start-screen-title">空战英雄</div>

            <div class="start-screen-subtitle">使用方向键或WASD移动飞机，空格键发射子弹。收集道具提升能力，击败敌人获得分数。</div>
            <button class="start-button" id="start-button">开始游戏</button>
        </div>

    </div>
    
    <script>
        // 游戏元素
        const gameContainer = document.getElementById('game-container');
        const player = document.getElementById('player');
        const scoreElement = document.getElementById('score');
        const levelElement = document.getElementById('level');

        const weaponLevelElement = document.getElementById('weapon-level');
        const healthFill = document.getElementById('health-fill');
        const gameOver = document.getElementById('game-over');
        const finalScore = document.getElementById('final-score');
        const restartButton = document.getElementById('restart-button');
        const startScreen = document.getElementById('start-screen');

        const startButton = document.getElementById('start-button');
        
        // 游戏配置
        const containerWidth = gameContainer.offsetWidth;
        const containerHeight = gameContainer.offsetHeight;
        const playerWidth = 60;
        const playerHeight = 60;
        const playerSpeed = 6;
        const bulletSpeed = 12;

        const enemyBulletSpeed = 6;
        const enemySpeed = 3;
        const enemyGenerationInterval = 1200; // 毫秒
        const powerupGenerationInterval = 8000; // 毫秒
        const cloudGenerationInterval = 3000; // 毫秒
        
        // 游戏状态
        let playerX = containerWidth / 2 - playerWidth / 2;

        let playerY = containerHeight - playerHeight - 20;
        let playerHealth = 100;
        let score = 0;

        let level = 1;
        let bullets = [];
        let enemyBullets = [];
        let enemies = [];
        let powerups = [];
        let explosions = [];

        let clouds = [];
        let hasShield = false;
        let shieldElement = null;
        let weaponLevel = 1;
        let weaponTimer = null;
        let playerSpeedBoost = 1;
        let speedBoostTimer = null;
        let gameRunning = false;
        let gameLoop;

        let enemyInterval;

        let powerupInterval;
        let cloudInterval;
        let levelInterval;
        let upPressed = false;
        let downPressed = false;
        let leftPressed = false;
        let rightPressed = false;
        let wPressed = false;
        let sPressed = false;
        let aPressed = false;
        let dPressed = false;
        let spacePressed = false;
        let lastBulletTime = 0;
        
        // 初始化游戏
        function initGame() {
            // 隐藏开始屏幕
            startScreen.style.display = 'none';
            
            // 重置游戏状态
            playerX = containerWidth / 2 - playerWidth / 2;
            playerY = containerHeight - playerHeight - 20;
            playerHealth = 100;
            score = 0;
            level = 1;
            bullets = [];
            enemyBullets = [];
            enemies = [];
            powerups = [];
            explosions = [];
            clouds = [];
            hasShield = false;
            if (shieldElement) {
                shieldElement.remove();
                shieldElement = null;
            }
            weaponLevel = 1;
            if (weaponTimer) {

                clearTimeout(weaponTimer);
                weaponTimer = null;
            }
            playerSpeedBoost = 1;
            if (speedBoostTimer) {
                clearTimeout(speedBoostTimer);
                speedBoostTimer = null;
            }
            
            // 清除所有元素
            const elementsToRemove = document.querySelectorAll('.bullet, .enemy-bullet, .enemy, .powerup, .explosion, .cloud');
            elementsToRemove.forEach(element => element.remove());
            
            // 更新显示
            scoreElement.textContent = score;
            levelElement.textContent = level;
            weaponLevelElement.textContent = weaponLevel;
            healthFill.style.width = `${playerHealth}%`;
            player.style.left = `${playerX}px`;
            player.style.top = `${playerY}px`;
            
            // 创建初始云朵
            for (let i = 0; i < 5; i++) {
                generateCloud();
            }
            
            // 开始游戏循环
            gameRunning = true;
            gameLoop = setInterval(updateGame, 16); // 约60帧每秒
            
            // 开始生成敌人
            enemyInterval = setInterval(generateEnemy, enemyGenerationInterval);

            
            // 开始生成道具
            powerupInterval = setInterval(generatePowerup, powerupGenerationInterval);
            

            // 开始生成云朵
            cloudInterval = setInterval(generateCloud, cloudGenerationInterval);
            
            // 随着时间增加难度
            levelInterval = setInterval(() => {
                if (gameRunning) {
                    level++;
                    levelElement.textContent = level;
                }
            }, 30000); // 每30秒增加一次难度
        }

        
        // 生成云朵
        function generateCloud() {
            if (!gameRunning) return;
            
            const cloud = document.createElement('div');
            cloud.className = 'cloud';
            
            // 随机云朵大小和透明度
            const cloudSize = Math.random() * 100 + 50;
            const opacity = Math.random() * 0.3 + 0.1;
            
            // 随机云朵形状
            const cloudType = Math.floor(Math.random() * 3) + 1;
            let cloudSvg;
            
            if (cloudType === 1) {
                cloudSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><path d="M10,40 Q15,20 30,25 Q40,5 60,15 Q80,5 90,25 Q100,40 80,45 Q90,60 60,55 Q40,65 30,50 Q10,55 10,40" fill="white" opacity="${opacity}"/></svg>`;
            } else if (cloudType === 2) {
                cloudSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><path d="M20,40 Q30,20 50,30 Q65,10 80,30 Q95,35 90,50 Q95,60 70,55 Q60,70 40,60 Q20,65 20,40" fill="white" opacity="${opacity}"/></svg>`;
            } else {
                cloudSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><path d="M15,40 Q5,25 20,20 Q30,5 50,20 Q70,0 85,20 Q100,25 90,45 Q100,60 75,55 Q65,70 45,60 Q25,70 15,40" fill="white" opacity="${opacity}"/></svg>`;
            }
            
            cloud.style.width = `${cloudSize}px`;
            cloud.style.height = `${cloudSize * 0.6}px`;
            cloud.style.backgroundImage = `url('data:image/svg+xml;utf8,${cloudSvg}')`;

            
            const x = Math.random() * containerWidth;
            const y = -cloudSize * 0.6;
            
            cloud.style.left = `${x}px`;
            cloud.style.top = `${y}px`;
            
            gameContainer.appendChild(cloud);

            
            clouds.push({
                element: cloud,
                x: x,
                y: y,
                speed: Math.random() * 1 + 0.5,
                size: cloudSize
            });
        }
        
        // 生成敌人
        function generateEnemy() {
            if (!gameRunning) return;
            
            const enemy = document.createElement('div');
            enemy.className = 'enemy';
            
            // 随机选择敌人类型
            const enemyType = Math.floor(Math.random() * 3) + 1;
            let enemyWidth, enemyHeight, enemyHealth;
            
            if (enemyType === 1) {

                enemy.classList.add('enemy-1');
                enemyWidth = 40;
                enemyHeight = 40;

                enemyHealth = 1;
            } else if (enemyType === 2) {
                enemy.classList.add('enemy-2');
                enemyWidth = 50;
                enemyHeight = 50;
                enemyHealth = 2;
            } else {
                enemy.classList.add('enemy-3');

                enemyWidth = 70;
                enemyHeight = 70;
                enemyHealth = 3;
            }
            
            const x = Math.random() * (containerWidth - enemyWidth);
            const y = -enemyHeight;
            
            enemy.style.width = `${enemyWidth}px`;
            enemy.style.height = `${enemyHeight}px`;
            enemy.style.left = `${x}px`;
            enemy.style.top = `${y}px`;

            

            gameContainer.appendChild(enemy);
            
            enemies.push({
                element: enemy,
                x: x,
                y: y,

                width: enemyWidth,
                height: enemyHeight,
                type: enemyType,
                health: enemyHealth,
                lastShot: 0,
                movePattern: Math.floor(Math.random() * 3) // 随机移动模式
            });
        }
        
        // 生成道具

        function generatePowerup() {
            if (!gameRunning) return;
            
            const powerup = document.createElement('div');
            powerup.className = 'powerup';
            
            // 随机选择道具类型
            const powerupType = Math.floor(Math.random() * 4) + 1;
            let powerupClass;
            
            if (powerupType === 1) {
                powerupClass = 'powerup-health';
            } else if (powerupType === 2) {
                powerupClass = 'powerup-shield';
            } else if (powerupType === 3) {
                powerupClass = 'powerup-weapon';
            } else {
                powerupClass = 'powerup-speed';
            }
            
            powerup.classList.add(powerupClass);
            
            const powerupSize = 30;
            const x = Math.random() * (containerWidth - powerupSize);
            const y = -powerupSize;
            
            powerup.style.width = `${powerupSize}px`;

            powerup.style.height = `${powerupSize}px`;
            powerup.style.left = `${x}px`;
            powerup.style.top = `${y}px`;

            
            gameContainer.appendChild(powerup);

            
            powerups.push({
                element: powerup,
                x: x,
                y: y,
                size: powerupSize,
                type: powerupType
            });
        }
        
        // 创建爆炸效果
        function createExplosion(x, y, size = 50) {
            const explosion = document.createElement('div');
            explosion.className = 'explosion';

            explosion.style.left = `${x}px`;
            explosion.style.top = `${y}px`;
            explosion.style.width = `${size}px`;
            explosion.style.height = `${size}px`;

            
            gameContainer.appendChild(explosion);
            
            // 爆炸动画结束后移除元素
            setTimeout(() => {
                explosion.remove();
            }, 500);
        }

        
        // 创建护盾
        function createShield() {
            if (shieldElement) {
                shieldElement.remove();
            }
            
            shieldElement = document.createElement('div');
            shieldElement.className = 'shield';
            updateShieldPosition();
            
            gameContainer.appendChild(shieldElement);
            hasShield = true;
            
            // 护盾持续时间
            setTimeout(() => {

                if (shieldElement) {
                    shieldElement.remove();
                    shieldElement = null;
                    hasShield = false;
                }
            }, 10000); // 10秒
        }
        
        // 更新护盾位置
        function updateShieldPosition() {
            if (shieldElement && hasShield) {
                shieldElement.style.left = `${playerX - 10}px`;
                shieldElement.style.top = `${playerY - 10}px`;
            }
        }
        
        // 升级武器
        function upgradeWeapon() {
            if (weaponTimer) {
                clearTimeout(weaponTimer);

            }
            
            weaponLevel = Math.min(3, weaponLevel + 1);
            weaponLevelElement.textContent = weaponLevel;
            
            // 武器升级持续时间
            weaponTimer = setTimeout(() => {
                weaponLevel = 1;
                weaponLevelElement.textContent = weaponLevel;

            }, 15000); // 15秒
        }
        
        // 提升速度
        function boostSpeed() {
            if (speedBoostTimer) {
                clearTimeout(speedBoostTimer);
            }
            
            playerSpeedBoost = 1.5;
            player.style.filter = 'drop-shadow(0 0 5px #0f0)';
            

            // 速度提升持续时间
            speedBoostTimer = setTimeout(() => {
                playerSpeedBoost = 1;
                player.style.filter = 'none';
            }, 8000); // 8秒
        }
        
        // 发射子弹
        function fireBullet() {
            const currentTime = Date.now();
            const bulletCooldown = 300 / weaponLevel; // 武器等级越高，发射间隔越短
            
            if (currentTime - lastBulletTime < bulletCooldown) return;
            
            lastBulletTime = currentTime;
            
            if (weaponLevel === 1) {
                // 单发子弹
                createBullet(playerX + playerWidth / 2 - 2.5, playerY, 1);
            } else if (weaponLevel === 2) {
                // 双发子弹
                createBullet(playerX + playerWidth / 4, playerY, 2);
                createBullet(playerX + playerWidth * 3/4, playerY, 2);

            } else {
                // 三发子弹
                createBullet(playerX + playerWidth / 2 - 4, playerY, 3);

                createBullet(playerX + playerWidth / 4, playerY + 10, 2);
                createBullet(playerX + playerWidth * 3/4, playerY + 10, 2);
            }
        }
        
        // 创建子弹
        function createBullet(x, y, type) {
            const bullet = document.createElement('div');
            bullet.className = 'bullet';
            
            if (type === 2) {
                bullet.classList.add('bullet-2');
            } else if (type === 3) {
                bullet.classList.add('bullet-3');

            }
            
            bullet.style.left = `${x}px`;
            bullet.style.top = `${y}px`;
            
            gameContainer.appendChild(bullet);
            
            bullets.push({
                element: bullet,
                x: x,
                y: y,
                type: type
            });
        }
        
        // 敌人发射子弹
        function enemyFireBullet(enemy) {
            const currentTime = Date.now();
            const bulletCooldown = 2000 - level * 100; // 随等级增加发射频率

            
            if (currentTime - enemy.lastShot < bulletCooldown) return;
            
            enemy.lastShot = currentTime;
            
            const bullet = document.createElement('div');
            bullet.className = 'enemy-bullet';
            
            const bulletX = enemy.x + enemy.width / 2 - 2.5;
            const bulletY = enemy.y + enemy.height;
            
            bullet.style.left = `${bulletX}px`;
            bullet.style.top = `${bulletY}px`;

            

            gameContainer.appendChild(bullet);
            
            enemyBullets.push({
                element: bullet,
                x: bulletX,
                y: bulletY
            });
        }
        
        // 更新游戏状态
        function updateGame() {
            if (!gameRunning) return;
            
            // 更新玩家位置
            const effectivePlayerSpeed = playerSpeed * playerSpeedBoost;
            
            if ((upPressed || wPressed) && playerY > 0) {
                playerY -= effectivePlayerSpeed;

                player.style.transform = 'rotate(0deg)';
            }
            if ((downPressed || sPressed) && playerY < containerHeight - playerHeight) {
                playerY += effectivePlayerSpeed;
                player.style.transform = 'rotate(0deg)';
            }
            if ((leftPressed || aPressed) && playerX > 0) {
                playerX -= effectivePlayerSpeed;

                player.style.transform = 'rotate(-15deg)';
            }
            if ((rightPressed || dPressed) && playerX < containerWidth - playerWidth) {
                playerX += effectivePlayerSpeed;
                player.style.transform = 'rotate(15deg)';
            }
            
            // 如果没有按方向键，恢复正常姿态
            if (!leftPressed && !rightPressed && !aPressed && !dPressed) {
                player.style.transform = 'rotate(0deg)';
            }
            

            player.style.left = `${playerX}px`;
            player.style.top = `${playerY}px`;
            

            // 更新护盾位置
            updateShieldPosition();
            
            // 发射子弹
            if (spacePressed) {

                fireBullet();
            }
            
            // 更新云朵位置
            clouds.forEach((cloud, index) => {
                cloud.y += cloud.speed;
                cloud.element.style.top = `${cloud.y}px`;

                
                // 移除屏幕外的云朵

                if (cloud.y > containerHeight) {
                    cloud.element.remove();
                    clouds.splice(index, 1);
                }
            });
            
            // 更新子弹位置
            bullets.forEach((bullet, bulletIndex) => {
                bullet.y -= bulletSpeed;
                bullet.element.style.top = `${bullet.y}px`;
                
                // 移除屏幕外的子弹
                if (bullet.y + 15 < 0) {
                    bullet.element.remove();
                    bullets.splice(bulletIndex, 1);
                    return;
                }
                
                // 检查子弹与敌人的碰撞
                enemies.forEach((enemy, enemyIndex) => {
                    if (bullet.x + 5 > enemy.x && 
                        bullet.x < enemy.x + enemy.width && 
                        bullet.y < enemy.y + enemy.height && 
                        bullet.y + 15 > enemy.y) {
                        
                        // 移除子弹
                        bullet.element.remove();
                        bullets.splice(bulletIndex, 1);
                        
                        // 减少敌人生命值（根据子弹类型造成不同伤害）
                        enemy.health -= bullet.type;
                        
                        // 如果敌人被击败
                        if (enemy.health <= 0) {
                            // 增加分数

                            const pointsEarned = enemy.type * 10;
                            score += pointsEarned;
                            scoreElement.textContent = score;
                            
                            // 显示得分浮动文字
                            showFloatingText(`+${pointsEarned}`, enemy.x + enemy.width / 2, enemy.y);

                            
                            // 创建爆炸效果
                            createExplosion(enemy.x, enemy.y, enemy.width + 10);
                            
                            // 移除敌人
                            enemy.element.remove();
                            enemies.splice(enemyIndex, 1);
                        }
                        
                        return;
                    }
                });
            });
            
            // 更新敌人子弹位置
            enemyBullets.forEach((bullet, bulletIndex) => {

                bullet.y += enemyBulletSpeed;
                bullet.element.style.top = `${bullet.y}px`;
                
                // 移除屏幕外的子弹
                if (bullet.y > containerHeight) {
                    bullet.element.remove();
                    enemyBullets.splice(bulletIndex, 1);
                    return;
                }
                
                // 检查子弹与玩家的碰撞
                if (!hasShield && 
                    bullet.x + 5 > playerX && 
                    bullet.x < playerX + playerWidth && 
                    bullet.y + 15 > playerY && 
                    bullet.y < playerY + playerHeight) {
                    
                    // 移除子弹
                    bullet.element.remove();
                    enemyBullets.splice(bulletIndex, 1);
                    
                    // 减少玩家生命值
                    playerHealth = Math.max(0, playerHealth - 10);
                    healthFill.style.width = `${playerHealth}%`;
                    
                    // 检查游戏结束
                    if (playerHealth <= 0) {
                        endGame();
                    }
                    
                    return;
                }
                

                // 检查子弹与护盾的碰撞
                if (hasShield && 
                    bullet.x + 5 > playerX - 10 && 
                    bullet.x < playerX + playerWidth + 10 && 
                    bullet.y + 15 > playerY - 10 && 
                    bullet.y < playerY + playerHeight + 10) {
                    
                    // 移除子弹
                    bullet.element.remove();
                    enemyBullets.splice(bulletIndex, 1);
                    return;

                }
            });
            
            // 更新敌人位置
            enemies.forEach((enemy, index) => {
                // 根据移动模式更新敌人位置
                if (enemy.movePattern === 0) {
                    // 直线下降

                    enemy.y += enemySpeed * (1 + level * 0.1);
                } else if (enemy.movePattern === 1) {
                    // 左右摆动
                    enemy.y += enemySpeed * (1 + level * 0.1);
                    enemy.x += Math.sin(enemy.y / 30) * 2;
                } else {
                    // 追踪玩家
                    enemy.y += enemySpeed * (1 + level * 0.1);
                    if (enemy.x + enemy.width / 2 < playerX + playerWidth / 2) {

                        enemy.x += 1;
                    } else {
                        enemy.x -= 1;
                    }
                }
                
                enemy.element.style.left = `${enemy.x}px`;

                enemy.element.style.top = `${enemy.y}px`;
                
                // 敌人发射子弹
                if (Math.random() < 0.005 * enemy.type * (1 + level * 0.1)) {
                    enemyFireBullet(enemy);
                }
                
                // 检查敌人与玩家的碰撞
                if (!hasShield && 
                    enemy.x + enemy.width > playerX && 
                    enemy.x < playerX + playerWidth && 
                    enemy.y + enemy.height > playerY && 
                    enemy.y < playerY + playerHeight) {
                    
                    // 创建爆炸效果
                    createExplosion(enemy.x, enemy.y, enemy.width + 10);
                    
                    // 移除敌人
                    enemy.element.remove();
                    enemies.splice(index, 1);
                    
                    // 减少玩家生命值
                    playerHealth = Math.max(0, playerHealth - 20);
                    healthFill.style.width = `${playerHealth}%`;
                    
                    // 检查游戏结束
                    if (playerHealth <= 0) {
                        endGame();
                    }
                    
                    return;
                }
                
                // 检查敌人与护盾的碰撞
                if (hasShield && 
                    enemy.x + enemy.width > playerX - 10 && 
                    enemy.x < playerX + playerWidth + 10 && 
                    enemy.y + enemy.height > playerY - 10 && 
                    enemy.y < playerY + playerHeight + 10) {
                    
                    // 创建爆炸效果
                    createExplosion(enemy.x, enemy.y, enemy.width + 10);
                    
                    // 移除敌人
                    enemy.element.remove();

                    enemies.splice(index, 1);
                    

                    // 增加分数
                    const pointsEarned = enemy.type * 5;
                    score += pointsEarned;
                    scoreElement.textContent = score;
                    
                    // 显示得分浮动文字
                    showFloatingText(`+${pointsEarned}`, enemy.x + enemy.width / 2, enemy.y);
                    
                    return;
                }
                

                // 移除屏幕外的敌人
                if (enemy.y > containerHeight) {
                    enemy.element.remove();
                    enemies.splice(index, 1);
                }
            });
            
            // 更新道具位置
            powerups.forEach((powerup, index) => {
                // 移动道具
                powerup.y += 2;
                powerup.element.style.top = `${powerup.y}px`;
                
                // 检查道具与玩家的碰撞
                if (powerup.x + powerup.size > playerX && 

                    powerup.x < playerX + playerWidth && 
                    powerup.y + powerup.size > playerY && 
                    powerup.y < playerY + playerHeight) {
                    

                    // 应用道具效果
                    if (powerup.type === 1) {
                        // 生命值道具
                        playerHealth = Math.min(100, playerHealth + 30);
                        healthFill.style.width = `${playerHealth}%`;
                        showFloatingText("+30生命", playerX + playerWidth / 2, playerY);
                    } else if (powerup.type === 2) {

                        // 护盾道具
                        createShield();
                        showFloatingText("护盾激活!", playerX + playerWidth / 2, playerY);

                    } else if (powerup.type === 3) {
                        // 武器升级道具
                        upgradeWeapon();

                        showFloatingText("武器升级!", playerX + playerWidth / 2, playerY);

                    } else {
                        // 速度提升道具
                        boostSpeed();

                        showFloatingText("速度提升!", playerX + playerWidth / 2, playerY);
                    }
                    
                    // 移除道具
                    powerup.element.remove();
                    powerups.splice(index, 1);
                    
                    // 增加分数
                    score += 5;
                    scoreElement.textContent = score;
                    

                    return;
                }
                
                // 移除屏幕外的道具
                if (powerup.y > containerHeight) {
                    powerup.element.remove();
                    powerups.splice(index, 1);
                }

            });
        }
        
        // 显示浮动文字
        function showFloatingText(text, x, y) {
            const floatingText = document.createElement('div');
            floatingText.style.position = 'absolute';
            floatingText.style.left = `${x}px`;
            floatingText.style.top = `${y}px`;
            floatingText.style.color = '#fff';
            floatingText.style.fontSize = '20px';
            floatingText.style.fontWeight = 'bold';
            floatingText.style.textShadow = '0 0 5px #0ff, 0 0 10px #0ff';
            floatingText.style.zIndex = '10';
            floatingText.style.pointerEvents = 'none';

            floatingText.textContent = text;
            
            gameContainer.appendChild(floatingText);
            
            // 动画效果
            let opacity = 1;
            let posY = y;
            
            const floatInterval = setInterval(() => {

                opacity -= 0.05;
                posY -= 2;
                

                floatingText.style.opacity = opacity;
                floatingText.style.top = `${posY}px`;
                
                if (opacity <= 0) {
                    clearInterval(floatInterval);
                    floatingText.remove();
                }
            }, 50);
        }
        
        // 结束游戏
        function endGame() {
            gameRunning = false;
            clearInterval(gameLoop);
            clearInterval(enemyInterval);

            clearInterval(powerupInterval);
            clearInterval(cloudInterval);
            clearInterval(levelInterval);
            

            if (weaponTimer) {
                clearTimeout(weaponTimer);
                weaponTimer = null;
            }
            

            if (speedBoostTimer) {
                clearTimeout(speedBoostTimer);

                speedBoostTimer = null;
            }
            
            // 显示游戏结束界面

            gameOver.style.display = 'flex';
            finalScore.textContent = score;
        }
        
        // 键盘控制
        document.addEventListener('keydown', (e) => {

            if (e.code === 'ArrowUp' || e.key === 'ArrowUp') {
                upPressed = true;
            } else if (e.code === 'ArrowDown' || e.key === 'ArrowDown') {
                downPressed = true;
            } else if (e.code === 'ArrowLeft' || e.key === 'ArrowLeft') {
                leftPressed = true;
            } else if (e.code === 'ArrowRight' || e.key === 'ArrowRight') {
                rightPressed = true;

            } else if (e.code === 'KeyW' || e.key === 'w' || e.key === 'W') {
                wPressed = true;
            } else if (e.code === 'KeyS' || e.key === 's' || e.key === 'S') {

                sPressed = true;
            } else if (e.code === 'KeyA' || e.key === 'a' || e.key === 'A') {
                aPressed = true;

            } else if (e.code === 'KeyD' || e.key === 'd' || e.key === 'D') {
                dPressed = true;

            } else if (e.code === 'Space' || e.key === ' ') {
                spacePressed = true;
                e.preventDefault(); // 防止空格键滚动页面
            }
        });
        
        document.addEventListener('keyup', (e) => {
            if (e.code === 'ArrowUp' || e.key === 'ArrowUp') {
                upPressed = false;
            } else if (e.code === 'ArrowDown' || e.key === 'ArrowDown') {
                downPressed = false;
            } else if (e.code === 'ArrowLeft' || e.key === 'ArrowLeft') {
                leftPressed = false;
            } else if (e.code === 'ArrowRight' || e.key === 'ArrowRight') {
                rightPressed = false;

            } else if (e.code === 'KeyW' || e.key === 'w' || e.key === 'W') {
                wPressed = false;
            } else if (e.code === 'KeyS' || e.key === 's' || e.key === 'S') {
                sPressed = false;

            } else if (e.code === 'KeyA' || e.key === 'a' || e.key === 'A') {
                aPressed = false;
            } else if (e.code === 'KeyD' || e.key === 'd' || e.key === 'D') {
                dPressed = false;
            } else if (e.code === 'Space' || e.key === ' ') {
                spacePressed = false;
            }
        });
        
        // 触摸控制（移动设备）
        let touchStartX, touchStartY;
        
        gameContainer.addEventListener('touchstart', (e) => {
            e.preventDefault();
            const touch = e.touches[0];
            touchStartX = touch.clientX;
            touchStartY = touch.clientY;
            
            // 如果触摸在屏幕下半部分，发射子弹
            if (touch.clientY > window.innerHeight / 2) {
                spacePressed = true;
            }
        });
        
        gameContainer.addEventListener('touchmove', (e) => {
            e.preventDefault();
            if (!touchStartX || !touchStartY) return;
            
            const touch = e.touches[0];
            const diffX = touch.clientX - touchStartX;
            const diffY = touch.clientY - touchStartY;
            
            // 更新玩家位置
            playerX = Math.max(0, Math.min(containerWidth - playerWidth, playerX + diffX));
            playerY = Math.max(0, Math.min(containerHeight - playerHeight, playerY + diffY));
            
            player.style.left = `${playerX}px`;
            player.style.top = `${playerY}px`;
            
            // 更新触摸起始位置
            touchStartX = touch.clientX;
            touchStartY = touch.clientY;
        });
        
        gameContainer.addEventListener('touchend', () => {
            touchStartX = null;
            touchStartY = null;
            spacePressed = false;
        });
        
        // 事件监听
        restartButton.addEventListener('click', () => {
            gameOver.style.display = 'none';
            initGame();
        });
        
        startButton.addEventListener('click', () => {
            initGame();
        });
    </script>
</body>
</html>
相关推荐
yosh'joy！！5 分钟前
下载Trae使用
ai·trae
豆包MarsCode12 小时前
只需一个指令，让 OpenClaw 安排 TRAE 干活
trae
sugar156920 小时前
Trae快速构建自己项目的docker镜像
docker·容器·trae
sugar15691 天前
Trae 添加项目规则，快速完成crmeb项目本地开发环境搭建
docker·容器·trae
欧简墨2 天前
kotlin Android Extensions插件迁移到viewbinding总结
android·trae
arbboter2 天前
【AI编程】约束即设计：AI时代的人机边界重构
ai编程·ai工作流·人机协作·trae·声明式执行·流程编排
进击的雷神4 天前
Trae AI IDE 完全指南：从入门到精通
大数据·ide·人工智能·trae
圣殿骑士-Khtangc5 天前
Trae IDE AI 编程超全使用教程｜从入门到精通，解锁 AI 开发新效率
ide·人工智能·ai编程·编程助手·trae
Mr_Carl7 天前
我用 Trae 花了一周，从零打造了一个 AI 面试官🚀
面试·trae·vibecoding
北漂的尘埃7 天前
学习AI 编程工具
ai·trae·ai ide·vibe coding·claude code
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南05班级宠物园部署指南06小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）07UV安装并设置国内源08OpenClaw 使用和管理 MCP 完全指南09【计算机一级WPSoffice】小黑课堂题库软件下载安装教程（2026年3月最新版）10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）