“蹦床弹跳”听上去就很轻松：一个小球在蹦床上不断反弹，玩家需要控制弹跳的时机，让小球

，比如星星、金币或者神秘道具。

 但如果真要从零写这样一款游戏，背后的逻辑可不少——

……每个模块都要自己写，还要调试平滑的动画。

“生成一个蹦床弹跳游戏，玩家控制小球在蹦床上反弹，收集空中的道具。”

✨ CodeBuddy 怎么“秒懂”并实现

短短几秒钟，CodeBuddy 就自动生成了一个

：小球落到蹦床上会自然反弹，有重力、有缓冲，看起来特别真实。

：金币、星星会在不同高度随机刷出，增加玩家的挑战性。

：小球触碰到道具时，会自动“吸入”，分数加上去，还有提示动画。

：蓝天背景、蹦床在底部、小球在中间跳，清新又舒服。

第一次试玩时，我完全没想到会这么上头：

🎮 小球每次落到蹦床上，都会发出“啪”的声效，

 ⭐ 收集到金币时，屏幕会闪一下加分提示，

 ⚠ 有时道具飞得太高，要精准掌握弹跳时机，不然就错过，

 整个体验就像真的在控制一个弹跳球——

CodeBuddy 的好处是，扩展功能完全可以“说出来”，比如：

CodeBuddy 会直接把这些新功能补上，不需要手动改动一大堆代码。 

如果你也想做一个能让人“停不下来”的小游戏，打开 CodeBuddy ，输入：

几秒后，你就能玩上一个完整的蹦床游戏：小球弹跳自然，道具收集爽快，还能随时扩展玩法。

游戏开发，终于能像玩游戏一样轻松又好玩

<!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: #87CEEB;
            display: flex;
            justify-content: center;
            align-items: center;

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

            width: 800px;

            height: 600px;
            background: linear-gradient(to bottom, #87CEEB, #1E90FF);

            border-radius: 10px;

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

        }
        
        .trampoline {

            position: absolute;
            width: 150px;
            height: 20px;
            background: linear-gradient(to bottom, #4CAF50, #2E7D32);
            border-radius: 10px;

            bottom: 50px;
            left: 50%;

            transform: translateX(-50%);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
            z-index: 5;
        }
        
        .item {

            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            z-index: 4;
            animation: float 2s infinite alternate ease-in-out;
        }
        
        .star {

            background-color: gold;

            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        }

        

        .coin {
            background-color: gold;
            border: 2px solid #FFC107;
        }
        
        .power {
            background-color: #9C27B0;
            border: 2px solid #7B1FA2;
        }
        
        @keyframes float {
            from { transform: translateY(0); }
            to { transform: translateY(-10px); }
        }

        

        .cloud {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            z-index: 1;
        }
        
        .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);
        }

    </style>
</head>

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

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

        <div class="trampoline" id="trampoline"></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 trampoline = document.getElementById('trampoline');
        const scoreElement = document.getElementById('score');
        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 trampolineWidth = 150;
        const trampolineHeight = 20;
        const ballSize = 30;
        const gravity = 0.25;
        const bounceStrength = -10;
        const trampolineSpeed = 10;
        const itemTypes = ['star', 'coin', 'power'];
        const itemValues = {'star': 10, 'coin': 20, 'power': 30};
        
        // 游戏状态
        let ballX = containerWidth / 2;
        let ballY = containerHeight / 3;
        let ballVelocityX = 2;
        let ballVelocityY = 0;

        let trampolineX = containerWidth / 2 - trampolineWidth / 2;
        let score = 0;
        let items = [];
        let clouds = [];
        let gameRunning = false;
        let leftPressed = false;
        let rightPressed = false;
        let gameLoop;
        let itemGenerationInterval;
        

        // 初始化游戏
        function initGame() {
            // 隐藏开始屏幕
            startScreen.style.display = 'none';
            
            // 重置游戏状态
            ballX = containerWidth / 2;
            ballY = containerHeight / 3;
            ballVelocityX = 2;
            ballVelocityY = 0;
            trampolineX = containerWidth / 2 - trampolineWidth / 2;
            score = 0;
            items = [];
            
            // 清除所有道具
            const existingItems = document.querySelectorAll('.item');
            existingItems.forEach(item => item.remove());
            
            // 更新显示
            scoreElement.textContent = score;
            
            // 创建云朵背景
            createClouds();
            
            // 开始游戏循环
            gameRunning = true;
            gameLoop = setInterval(updateGame, 16); // 约60帧每秒
            
            // 开始生成道具
            itemGenerationInterval = setInterval(generateItem, 2000);
        }
        
        // 创建云朵背景
        function createClouds() {
            // 清除现有云朵
            const existingClouds = document.querySelectorAll('.cloud');
            existingClouds.forEach(cloud => cloud.remove());
            
            // 创建新云朵
            for (let i = 0; i < 10; i++) {
                const cloud = document.createElement('div');
                cloud.className = 'cloud';
                
                const size = Math.random() * 100 + 50;
                const x = Math.random() * containerWidth;
                const y = Math.random() * containerHeight / 2;
                
                cloud.style.width = `${size}px`;
                cloud.style.height = `${size / 2}px`;
                cloud.style.left = `${x}px`;

                cloud.style.top = `${y}px`;
                cloud.style.opacity = Math.random() * 0.5 + 0.3;
                
                gameContainer.appendChild(cloud);
                clouds.push({

                    element: cloud,
                    x: x,
                    speed: Math.random() * 0.2 + 0.1

                });

            }
        }
        
        // 生成道具
        function generateItem() {
            const itemType = itemTypes[Math.floor(Math.random() * itemTypes.length)];
            const item = document.createElement('div');
            item.className = `item ${itemType}`;
            
            const x = Math.random() * (containerWidth - 25);
            const y = Math.random() * (containerHeight / 2) + 50;
            
            item.style.left = `${x}px`;
            item.style.top = `${y}px`;

            
            gameContainer.appendChild(item);
            
            items.push({
                element: item,
                x: x,
                y: y,
                width: 25,
                height: 25,
                type: itemType,
                collected: false
            });
        }
        
        // 更新游戏状态
        function updateGame() {
            if (!gameRunning) return;
            
            // 更新小球位置
            ballVelocityY += gravity;
            ballX += ballVelocityX;
            ballY += ballVelocityY;
            
            // 边界检查 - 左右墙壁
            if (ballX < 0 || ballX > containerWidth - ballSize) {
                ballVelocityX = -ballVelocityX * 0.8;
                ballX = ballX < 0 ? 0 : containerWidth - ballSize;
            }
            
            // 检查小球是否掉出屏幕底部
            if (ballY > containerHeight) {
                endGame();
                return;
            }
            

            // 检查小球是否碰到蹦床
            if (ballVelocityY > 0 && 
                ballY + ballSize > trampoline.offsetTop && 
                ballY < trampoline.offsetTop + trampolineHeight &&
                ballX + ballSize > trampolineX && 
                ballX < trampolineX + trampolineWidth) {
                
                // 计算弹跳力度（根据击中蹦床的位置）
                const hitPosition = (ballX + ballSize / 2) - trampolineX;
                const normalizedHit = (hitPosition / trampolineWidth) * 2 - 1; // -1到1
                
                ballVelocityY = bounceStrength - Math.abs(normalizedHit) * 2; // 中间弹得更高
                ballVelocityX += normalizedHit * 3; // 根据击中位置改变水平速度
                
                // 限制水平速度
                ballVelocityX = Math.max(-8, Math.min(8, ballVelocityX));
            }
            
            // 更新蹦床位置
            if (leftPressed && trampolineX > 0) {
                trampolineX -= trampolineSpeed;
            }
            
            if (rightPressed && trampolineX < containerWidth - trampolineWidth) {
                trampolineX += trampolineSpeed;
            }

            
            // 检查道具碰撞
            items.forEach(item => {
                if (!item.collected && 
                    ballX < item.x + item.width &&
                    ballX + ballSize > item.x &&
                    ballY < item.y + item.height &&
                    ballY + ballSize > item.y) {
                    
                    // 收集道具
                    item.collected = true;
                    item.element.style.display = 'none';
                    
                    // 增加分数
                    score += itemValues[item.type];
                    scoreElement.textContent = score;
                    
                    // 特殊效果
                    if (item.type === 'power') {
                        // 力量道具：增加弹跳力
                        ballVelocityY = bounceStrength * 1.5;
                    }
                }
            });
            
            // 移动云朵
            clouds.forEach(cloud => {

                cloud.x += cloud.speed;
                if (cloud.x > containerWidth) {
                    cloud.x = -parseInt(cloud.element.style.width);
                }
                cloud.element.style.left = `${cloud.x}px`;
            });
            
            // 更新元素位置
            ball.style.left = `${ballX}px`;
            ball.style.top = `${ballY}px`;
            trampoline.style.left = `${trampolineX}px`;
        }
        
        // 结束游戏

        function endGame() {
            gameRunning = false;
            clearInterval(gameLoop);
            clearInterval(itemGenerationInterval);
            

            // 显示游戏结束界面

            gameOver.style.display = 'flex';
            finalScore.textContent = score;
        }
        
        // 键盘控制
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft') {
                leftPressed = true;
            } else if (e.key === 'ArrowRight') {
                rightPressed = true;
            }
        });
        
        document.addEventListener('keyup', (e) => {
            if (e.key === 'ArrowLeft') {
                leftPressed = false;
            } else if (e.key === 'ArrowRight') {
                rightPressed = false;
            }

        });
        
        // 触摸控制（移动设备）
        let touchStartX = 0;
        gameContainer.addEventListener('touchstart', (e) => {
            touchStartX = e.touches[0].clientX;
        });
        
        gameContainer.addEventListener('touchmove', (e) => {
            if (!gameRunning) return;
            
            const touchX = e.touches[0].clientX;

            const diffX = touchX - touchStartX;
            
            trampolineX += diffX / 5;

            
            // 限制蹦床在容器内
            trampolineX = Math.max(0, Math.min(containerWidth - trampolineWidth, trampolineX));
            
            touchStartX = touchX;
            
            // 防止滚动页面
            e.preventDefault();
        });
        
        // 事件监听
        restartButton.addEventListener('click', () => {
            gameOver.style.display = 'none';
            initGame();
        });
        
        startButton.addEventListener('click', () => {
            initGame();
        });
    </script>
</body>
</html>

蹦床弹跳：CodeBuddy 一句话生成的“弹跳乐园”

产品KOL

编程语言

游戏开发

容器

AI驱动 智领未来

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

蹦床弹跳：CodeBuddy 一句话生成的“弹跳乐园”

蹦床弹跳：CodeBuddy 一句话生成的“弹跳乐园”

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐