飞行射击：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>
相关推荐
围巾哥萧尘4 小时前
TRAE 最佳实践征文大赛 | Trae + Supabase + Vercel 的理解与运用：TodoList 案例展示🧣
trae
lgc6534 小时前
TRAE和playwright MCP完成E2E测试
aigc·trae
小厂永远得不到的男人4 小时前
用 Trae + 自制 MCP 构建 AI 工具链：从理论到实战的全流程解析
trae
CF14年老兵5 小时前
🎮 把 GitHub 变成游戏厅！(吃豆人 + 贪吃蛇 + 炫酷奖杯！)
前端·后端·trae
小厂永远得不到的男人5 小时前
用Trae搭智能体的实战笔记：从0到1造出你的专属AI助手
trae
一点一木5 小时前
Trae 实测系列 #1：30 分钟用中文 AI 编程搞定 Vue3 + Pinia 倒计时应用
前端·ai编程·trae
Goboy6 小时前
海底捞鱼：一句话生成的“深海挑战”
trae
围巾哥萧尘6 小时前
Trae.ai的发展历程和软件更新🧣
trae
我想说一句6 小时前
bubu智聘App亮点详解(2) Coze工作流接入
前端·前端框架·trae
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02UV安装并设置国内源03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code042025年华数杯C题超详细解题思路05🚀Cursor CLI+GPT-5保姆级教程+编程能力测评！Cursor CLI零成本免费使用GPT-5！Claude Code的劲敌来了！从安装到实战演示06KGG转MP3工具|非KGM文件|解密音频07OpenAI重返开源！GPT-OSS本地部署完全指南08ChatGPT 5发布日期揭秘：2025年8月上线，多模态推理能力全面升级09Cursor 终端“卡死/无响应”问题的解法10腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）