跳跃小球，Trae 一句话生成的“上头”小游戏

Goboy2025-08-13 9:07

"跳跃小球"看似简单：一个小球在平台上跳来跳去，​玩家只要控制它避开障碍物，不要掉下去 ​。 可真要自己开发，背后可是一堆活儿------​跳跃动作的平滑动画、碰撞检测、重力效果、掉落判定、动态背景 ​...... 现在有了 ​Trae IDE ​，这一切只需要 ​一句话​。

💡 我想要的玩法

脑子里最初的画面很简单：

  • 小球会跳：按一下按键，小球轻盈跳起；按两下能连跳，增加趣味性。
  • 障碍物要躲：屏幕上会随机生成小方块或尖刺，必须跳过去。
  • 平台要踩稳：一旦跳空或掉下去，直接 Game Over。
  • 背景活泼：有动态背景或渐变色，让画面不单调。

于是我直接输入了一句：

"生成一个跳跃小球游戏，玩家控制小球跳跃，避免碰到障碍物或掉落。"

✨ Trae 怎么"读懂"并生成

只花了几秒，Trae 就把一个完整的"跳跃小球"端了上来：

✅ ​顺滑的跳跃逻辑 ​：点击或按空格，小球自然弹起，还支持连跳。 ✅ ​障碍物与平台系统 ​：障碍物随机生成，平台错落摆放，增加难度。 ✅ ​碰撞 & 掉落检测 ​：碰到障碍物或掉下平台，游戏立刻结束，提示重新开始。 ✅ ​动态背景​：渐变色和轻微的背景移动，让游戏看起来更"活"。

🧩 试玩的感觉

试玩时，我整个人陷进去了：

🎮 ​第一次跳跃很轻松 ​，小球顺滑地越过第一个障碍； ⚠ ​障碍越来越多 ​，必须精确掌握跳跃时机； 💥 ​一不小心掉下去 ​，屏幕一黑，Game Over......​立刻想重来​！

那种 ​**"想挑战下一局"的冲动**​，是 Trae 自动生成游戏最让人惊讶的地方。

🛠 想升级玩法？一句话就行

Trae 的神奇之处在于，你可以随时给它追加需求，比如：

  • "加个积分系统" → 每跳过一个障碍加分，形成挑战感。
  • "让背景变成白天/夜晚切换" → 游戏多了变化，更耐玩。
  • "加入道具" → 跳到道具能获得护盾、加速等 buff。
  • "增加关卡模式" → 每关障碍不同，难度递进。

一句自然语言，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: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;

            height: 100vh;
            overflow: hidden;
        }
        
        .game-container {
            position: relative;

            width: 800px;

            height: 500px;
            background: linear-gradient(to bottom, #1a237e, #283593, #3949ab);

            border-radius: 10px;

            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        
        .score-container {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
            z-index: 10;
        }
        
        .ball {
            position: absolute;
            width: 40px;

            height: 40px;
            background: radial-gradient(circle at 30% 30%, #ffeb3b, #ffc107);

            border-radius: 50%;
            bottom: 100px;
            left: 100px;

            z-index: 5;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
        }
        
        .platform {
            position: absolute;
            height: 15px;

            background: linear-gradient(to bottom, #4CAF50, #388E3C);
            border-radius: 5px;
            z-index: 3;
        }
        
        .obstacle {
            position: absolute;

            background: linear-gradient(to bottom, #f44336, #d32f2f);
            border-radius: 5px;
            z-index: 3;
        }
        
        .star {
            position: absolute;
            width: 25px;
            height: 25px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
            background-size: contain;
            z-index: 4;
        }

        
        .game-over {
            position: absolute;
            top: 0;

            left: 0;

            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            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: white;
            margin-bottom: 20px;

            text-align: center;
        }
        
        .final-score {
            font-size: 36px;
            color: white;

            margin-bottom: 30px;
            text-align: center;
        }
        
        .restart-button {
            padding: 15px 30px;
            font-size: 20px;

            font-weight: bold;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .restart-button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        
        .start-screen {
            position: absolute;

            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 20;
        }
        
        .start-screen-title {
            font-size: 48px;
            font-weight: bold;
            color: white;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .start-screen-subtitle {
            font-size: 24px;
            color: white;
            margin-bottom: 30px;

            text-align: center;
            max-width: 80%;
            line-height: 1.4;
        }
        
        .start-button {
            padding: 15px 30px;
            font-size: 20px;
            font-weight: bold;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        

        .start-button:hover {
            background-color: #45a049;
            transform: scale(1.05);

        }
        
        .level-indicator {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px 15px;
            border-radius: 5px;

            font-size: 18px;

            font-weight: bold;
            color: #333;

            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="game-container" id="game-container">

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

        
        <div class="level-indicator">
            关卡: <span id="level">1</span>

        </div>
        

        <div class="ball" id="ball"></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">按空格键或点击屏幕让小球跳跃，收集星星并避开障碍物。小球只能在平台上跳跃，不要掉落！</div>
            <button class="start-button" id="start-button">开始游戏</button>
        </div>
    </div>

    
    <script>
        // 游戏元素
        const gameContainer = document.getElementById('game-container');
        const ball = document.getElementById('ball');
        const scoreElement = document.getElementById('score');
        const levelElement = document.getElementById('level');
        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 ballSize = 40;
        const gravity = 0.6;
        const jumpStrength = -15;
        const moveSpeed = 5;

        const platformGenerationInterval = 2000; // 毫秒

        
        // 游戏状态
        let ballX = 100;
        let ballY = containerHeight - 100;
        let ballVelocityY = 0;
        let ballVelocityX = 0;
        let isJumping = false;
        let canJump = false;
        let score = 0;
        let level = 1;
        let platforms = [];
        let obstacles = [];
        let stars = [];
        let gameRunning = false;
        let gameLoop;
        let platformInterval;
        let obstacleInterval;
        let starInterval;
        let levelInterval;
        let rightPressed = false;
        let leftPressed = false;
        
        // 初始化游戏
        function initGame() {

            // 隐藏开始屏幕
            startScreen.style.display = 'none';
            
            // 重置游戏状态
            ballX = 100;
            ballY = containerHeight - 100;
            ballVelocityY = 0;
            ballVelocityX = 0;

            isJumping = false;
            canJump = false;

            score = 0;
            level = 1;
            platforms = [];
            obstacles = [];
            stars = [];
            
            // 清除所有元素

            const existingPlatforms = document.querySelectorAll('.platform');
            existingPlatforms.forEach(platform => platform.remove());

            
            const existingObstacles = document.querySelectorAll('.obstacle');

            existingObstacles.forEach(obstacle => obstacle.remove());
            
            const existingStars = document.querySelectorAll('.star');
            existingStars.forEach(star => star.remove());
            
            // 更新显示
            scoreElement.textContent = score;
            levelElement.textContent = level;
            ball.style.left = `${ballX}px`;
            ball.style.bottom = `${containerHeight - ballY - ballSize}px`;
            
            // 创建初始平台
            createInitialPlatforms();
            
            // 开始游戏循环
            gameRunning = true;
            gameLoop = setInterval(updateGame, 16); // 约60帧每秒
            
            // 开始生成平台
            platformInterval = setInterval(generatePlatform, platformGenerationInterval);
            
            // 开始生成障碍物
            obstacleInterval = setInterval(generateObstacle, platformGenerationInterval * 1.5);

            
            // 开始生成星星
            starInterval = setInterval(generateStar, platformGenerationInterval * 2);
            
            // 随着时间增加难度
            levelInterval = setInterval(() => {
                if (gameRunning) {
                    level++;
                    levelElement.textContent = level;
                }
            }, 30000); // 每30秒增加一次难度
        }
        
        // 创建初始平台
        function createInitialPlatforms() {
            // 创建起始平台
            createPlatform(50, containerHeight - 100, 200);
            
            // 创建几个随机平台
            for (let i = 0; i < 5; i++) {
                const x = Math.random() * (containerWidth - 100) + 50;
                const y = Math.random() * (containerHeight - 200) + 100;
                const width = Math.random() * 100 + 100;
                
                createPlatform(x, y, width);
            }
        }
        
        // 创建平台
        function createPlatform(x, y, width) {
            const platform = document.createElement('div');
            platform.className = 'platform';
            platform.style.width = `${width}px`;
            platform.style.left = `${x}px`;
            platform.style.bottom = `${y}px`;

            
            gameContainer.appendChild(platform);
            
            platforms.push({
                element: platform,
                x: x,
                y: y,
                width: width
            });
        }
        
        // 生成新平台
        function generatePlatform() {

            if (!gameRunning) return;
            
            const width = Math.random() * 100 + 80;
            const x = containerWidth;
            const y = Math.random() * (containerHeight - 200) + 50;
            
            createPlatform(x, y, width);
        }
        
        // 生成障碍物
        function generateObstacle() {
            if (!gameRunning) return;
            
            // 随机选择一个平台放置障碍物
            if (platforms.length > 0) {
                const platformIndex = Math.floor(Math.random() * platforms.length);
                const platform = platforms[platformIndex];
                
                // 只在平台上生成障碍物
                if (platform.x < containerWidth && platform.x + platform.width > 0) {
                    const obstacle = document.createElement('div');
                    obstacle.className = 'obstacle';
                    
                    const obstacleWidth = 20;
                    const obstacleHeight = 30;

                    const obstacleX = platform.x + Math.random() * (platform.width - obstacleWidth);
                    const obstacleY = platform.y + 15; // 放在平台上
                    
                    obstacle.style.width = `${obstacleWidth}px`;
                    obstacle.style.height = `${obstacleHeight}px`;
                    obstacle.style.left = `${obstacleX}px`;
                    obstacle.style.bottom = `${obstacleY}px`;
                    
                    gameContainer.appendChild(obstacle);
                    

                    obstacles.push({

                        element: obstacle,
                        x: obstacleX,
                        y: obstacleY,
                        width: obstacleWidth,
                        height: obstacleHeight,
                        platformIndex: platformIndex
                    });

                }
            }
        }
        

        // 生成星星
        function generateStar() {
            if (!gameRunning) return;
            

            const star = document.createElement('div');
            star.className = 'star';
            
            const starSize = 25;
            const starX = containerWidth;
            const starY = Math.random() * (containerHeight - 100) + 50;
            
            star.style.width = `${starSize}px`;
            star.style.height = `${starSize}px`;
            star.style.left = `${starX}px`;
            star.style.bottom = `${starY}px`;
            
            gameContainer.appendChild(star);
            

            stars.push({
                element: star,
                x: starX,
                y: starY,
                size: starSize,
                collected: false
            });
        }
        
        // 更新游戏状态
        function updateGame() {
            if (!gameRunning) return;
            
            // 应用重力
            ballVelocityY += gravity;
            
            // 应用水平移动
            if (rightPressed) {
                ballVelocityX = moveSpeed;
            } else if (leftPressed) {
                ballVelocityX = -moveSpeed;
            } else {
                // 水平减速
                ballVelocityX *= 0.9;
            }
            
            // 更新小球位置
            ballX += ballVelocityX;
            ballY += ballVelocityY;
            
            // 边界检查
            if (ballX < 0) {
                ballX = 0;
                ballVelocityX = 0;
            } else if (ballX > containerWidth - ballSize) {
                ballX = containerWidth - ballSize;
                ballVelocityX = 0;
            }
            
            // 检查是否掉出屏幕底部
            if (ballY > containerHeight) {
                endGame();
                return;
            }
            
            // 更新小球位置
            ball.style.left = `${ballX}px`;

            ball.style.bottom = `${containerHeight - ballY - ballSize}px`;
            
            // 重置跳跃状态
            canJump = false;
            
            // 检查平台碰撞
            platforms.forEach((platform, index) => {
                // 移动平台
                platform.x -= moveSpeed * (1 + level * 0.1);
                platform.element.style.left = `${platform.x}px`;
                
                // 检查小球是否站在平台上
                if (ballVelocityY >= 0 && 

                    ballX + ballSize > platform.x && 
                    ballX < platform.x + platform.width && 
                    ballY + ballSize >= platform.y && 
                    ballY < platform.y + 15) {
                    
                    ballY = platform.y - ballSize;
                    ballVelocityY = 0;
                    canJump = true;
                }
                
                // 移除屏幕外的平台
                if (platform.x + platform.width < 0) {
                    platform.element.remove();
                    platforms.splice(index, 1);
                }
            });
            
            // 更新障碍物
            obstacles.forEach((obstacle, index) => {
                // 如果障碍物关联的平台还存在，则跟随平台移动

                if (platforms[obstacle.platformIndex]) {
                    const platform = platforms[obstacle.platformIndex];
                    const relativeX = obstacle.x - platform.x;
                    obstacle.x = platform.x + relativeX;
                    obstacle.element.style.left = `${obstacle.x}px`;
                } else {
                    // 如果平台不存在，则移除障碍物
                    obstacle.element.remove();

                    obstacles.splice(index, 1);
                    return;
                }
                
                // 检查碰撞
                if (ballX + ballSize > obstacle.x && 
                    ballX < obstacle.x + obstacle.width && 
                    ballY + ballSize > obstacle.y && 
                    ballY < obstacle.y + obstacle.height) {
                    endGame();
                    return;
                }
                
                // 移除屏幕外的障碍物
                if (obstacle.x + obstacle.width < 0) {
                    obstacle.element.remove();
                    obstacles.splice(index, 1);
                }
            });
            
            // 更新星星
            stars.forEach((star, index) => {
                // 移动星星
                star.x -= moveSpeed * (1 + level * 0.1);
                star.element.style.left = `${star.x}px`;

                
                // 检查收集
                if (!star.collected && 
                    ballX + ballSize > star.x && 
                    ballX < star.x + star.size && 
                    ballY + ballSize > star.y && 
                    ballY < star.y + star.size) {
                    
                    star.collected = true;
                    star.element.style.display = 'none';
                    
                    // 增加分数
                    score += 10;
                    scoreElement.textContent = score;
                }
                
                // 移除屏幕外的星星
                if (star.x + star.size < 0) {
                    star.element.remove();
                    stars.splice(index, 1);
                }
            });
        }
        
        // 小球跳跃
        function jump() {
            if (canJump && gameRunning) {
                ballVelocityY = jumpStrength;
                canJump = false;
            }
        }
        
        // 结束游戏
        function endGame() {
            gameRunning = false;

            clearInterval(gameLoop);

            clearInterval(platformInterval);
            clearInterval(obstacleInterval);
            clearInterval(starInterval);
            clearInterval(levelInterval);
            
            // 显示游戏结束界面
            gameOver.style.display = 'flex';
            document.getElementById('final-score').textContent = score;
        }
        
        // 键盘控制
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' || e.key === ' ') {
                jump();
                e.preventDefault(); // 防止空格键滚动页面
            } else if (e.code === 'ArrowRight' || e.key === 'ArrowRight') {
                rightPressed = true;

            } else if (e.code === 'ArrowLeft' || e.key === 'ArrowLeft') {
                leftPressed = true;
            }
        });
        
        document.addEventListener('keyup', (e) => {

            if (e.code === 'ArrowRight' || e.key === 'ArrowRight') {
                rightPressed = false;
            } else if (e.code === 'ArrowLeft' || e.key === 'ArrowLeft') {
                leftPressed = false;
            }
        });
        
        // 触摸控制（移动设备）
        gameContainer.addEventListener('touchstart', () => {
            jump();
        });
        
        // 鼠标控制
        gameContainer.addEventListener('click', () => {
            jump();
        });
        
        // 事件监听
        restartButton.addEventListener('click', () => {
            gameOver.style.display = 'none';
            initGame();
        });
        
        startButton.addEventListener('click', () => {
            initGame();
        });
    </script>
</body>
</html>
相关推荐
牛奶8 小时前
2026年大模型怎么选？前端人实用对比
前端·人工智能·ai编程
牛奶8 小时前
前端人为什么要学AI？
前端·人工智能·ai编程
EdisonZhou13 小时前
MAF快速入门（18）Agent Skill 快速开始
llm·aigc·agent
KEEN的创享空间14 小时前
AI编程从0到1之10X提效（Vibe Coding 氛围式编码 ）09篇
openai·ai编程
AlienZHOU15 小时前
为 AI Agent 编写高质量 Skill：Claude 官方指南
agent·ai编程·claude
恋猫de小郭15 小时前
移动端开发稳了？AI 目前还无法取代客户端开发，小红书的论文告诉你数据
前端·flutter·ai编程
KaneLogger16 小时前
【翻译】打造 Agent Skills 的最佳实践
agent·ai编程·claude
王小酱17 小时前
Everything Claude Code 文档
openai·ai编程·aiops
雮尘18 小时前
如何在非 Claude IDE (TARE、 Cursor、Antigravity 等)下使用 Agent Skills
前端·agent·ai编程
会写代码的柯基犬18 小时前
DeepSeek vs Kimi vs Qwen —— AI 生成俄罗斯方块代码效果横评
人工智能·llm
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书（Feishu）环境搭建指南04【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆05OpenClaw优化飞书API 额度已耗尽问题06Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services07小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）08Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤09Window 10部署openclaw报错node.exe : npm error code 12810OpenClaw大龙虾机器人完整安装教程