提到 超级玛丽，大多数人第一反应就是：那个戴红帽的小胡子，一路跳、一路踩怪、一路收金币，最后去救公主的故事。要自己写这个游戏？听上去就头大：跑动和跳跃的物理效果、金币收集逻辑、怪物 AI、关卡设计、平台判定……全都得一点点敲出来。
但用 Trae IDE，一句话，整个“超级玛丽”就能活灵活现地跑起来。
💡 我想要的玩法
脑海里的画面其实很清晰：
- 玛丽能跑也能跳：按方向键移动，按空格起跳，能跳到平台或踩怪；金币要收集：空中和箱子里有金币，碰到就叮当加分；敌人要互动：踩头打败小怪，没踩好反被撞就掉命；平台和关卡丰富：要有不同高度的砖块、隐藏的奖励道具；视觉要经典：像素风，小清新背景，看着就让人怀念。
于是我直接告诉 Trae：
“生成一个超级玛丽游戏，玩家控制玛丽跳跃，收集金币并打败敌人。”
✨ Trae 几秒钟的魔法
没过多久，Trae 自动生成了一个能玩的 迷你版超级玛丽：
✅ 流畅的跑跳手感：跑起来很顺滑，跳跃也带了点重力感；✅ 金币收集机制：金币漂浮在空中，或者藏在砖块里，碰到就有声音和分数提示；✅ 敌人互动完善：踩上去能打败怪物，如果被怪撞到会损失一条命；✅ 砖块与道具：打破砖块能掉出金币，有些还藏了蘑菇和星星；✅ 像素画面和音效：熟悉的配色和叮当声，瞬间唤起童年记忆。
🧩 试玩体验
一上手就是“爷青回”的感动：
🎯 刚开始跳来跳去收金币，那种“叮”的声音太熟悉了；⚠ 遇到小怪时心里一紧，赶紧踩上去把它解决；💥 第一次掉进坑里，忍不住笑出声——“这操作怎么跟小时候一样蠢”；🌟 踩到隐藏砖块冒出蘑菇，那一刻简直像发现宝藏。
Trae 生成的版本，不仅能玩，还把情怀拿捏得死死的。
🛠 想怎么玩花的？一句话就行
Trae 的扩展能力，就是它最上头的地方：
- “加个关卡 BOSS” → 让库巴出场，真打起来更有目标感；“让金币收集到 100 个就加命” → 完美还原经典设定；“加入水下和冰雪关卡” → 场景切换更有变化；“加上双人模式” → 让路易基也能和玛丽并肩作战。
你只要说一句，Trae 就能自动补逻辑、调动画，完全不必手写繁琐代码。
🎮 过去 vs 现在
过去写超级玛丽：
- 搞 重力和跳跃算法；做 金币、砖块、敌人互动逻辑；设计 多关卡地图；调 像素画面和音效。
现在用 Trae：👉 一句话，所有核心功能到位；👉 想加什么，再开口说一句。
写游戏的门槛，从“熬夜写逻辑”变成了“随时聊创意”。
✅ 结语
如果你也想重现童年的 “跳跃 + 踩怪 + 收金币” 经典冒险，打开 Trae，只要输入：
“生成一个超级玛丽游戏，玩家控制玛丽跳跃，收集金币并打败敌人。”
几秒后，一个能让你 重温童年又能玩出新花样 的超级玛丽就会跑起来：金币叮当响，怪物踩得爽，连隐藏砖块都安排好了。
这就是 Trae 的魔力 —— 让经典冒险，只需一句话就能重生。
<!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: 500px; background: linear-gradient(to bottom, #5C94FC, #8BE0FF); 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; } .coin-container { position: absolute; top: 20px; right: 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; } .mario { position: absolute; width: 50px; height: 70px; background-color: #FF0000; border-radius: 5px; bottom: 50px; left: 100px; z-index: 5; transition: transform 0.1s; } .mario:before { content: ''; position: absolute; top: -15px; left: 5px; width: 40px; height: 15px; background-color: #FF0000; border-radius: 10px 10px 0 0; } .mario-running { animation: run 0.4s infinite alternate; } @keyframes run { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } } .mario-jumping { animation: none; } .ground { position: absolute; width: 100%; height: 50px; background: linear-gradient(to bottom, #8B4513, #654321); bottom: 0; z-index: 2; } .platform { position: absolute; background-color: #8B4513; z-index: 3; } .enemy { position: absolute; width: 40px; height: 40px; background-color: #8B008B; border-radius: 50%; z-index: 3; bottom: 50px; } .coin { position: absolute; width: 25px; height: 25px; background-color: #FFD700; border-radius: 50%; z-index: 3; animation: spin 1s infinite linear; } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .pipe { position: absolute; width: 60px; height: 80px; background-color: #00AA00; border-radius: 5px 5px 0 0; z-index: 3; bottom: 50px; } .cloud { position: absolute; background-color: rgba(255, 255, 255, 0.8); border-radius: 50px; 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: #FF0000; color: white; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s; } .restart-button:hover { background-color: #CC0000; 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: #FF0000; color: white; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s; } .start-button:hover { background-color: #CC0000; 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="coin-container"> 金币: <span id="coins">0</span> </div> <div class="mario" id="mario"></div> <div class="ground"></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> <div class="final-score">收集金币: <span id="final-coins">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 mario = document.getElementById('mario'); const scoreElement = document.getElementById('score'); const coinsElement = document.getElementById('coins'); const gameOver = document.getElementById('game-over'); const finalScore = document.getElementById('final-score'); const finalCoins = document.getElementById('final-coins'); 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 marioWidth = 50; const marioHeight = 70; const groundHeight = 50; const gravity = 1; const jumpStrength = -18; const moveSpeed = 5; const enemySpeed = 3; const obstacleGenerationInterval = 2000; // 毫秒 // 游戏状态 let marioY = containerHeight - groundHeight - marioHeight; let marioVelocityY = 0; let isJumping = false; let score = 0; let coins = 0; let enemies = []; let pipes = []; let platforms = []; let coinItems = []; let clouds = []; let gameRunning = false; let gameLoop; let obstacleInterval; let coinInterval; let scoreInterval; let difficultyInterval; let currentEnemySpeed = enemySpeed; let isMovingLeft = false; let isMovingRight = false; // 初始化游戏 function initGame() { // 隐藏开始屏幕 startScreen.style.display = 'none'; // 重置游戏状态 marioY = containerHeight - groundHeight - marioHeight; marioVelocityY = 0; isJumping = false; score = 0; coins = 0; enemies = []; pipes = []; platforms = []; coinItems = []; currentEnemySpeed = enemySpeed; // 清除所有元素 const existingElements = document.querySelectorAll('.enemy, .pipe, .platform, .coin'); existingElements.forEach(element => element.remove()); // 更新显示 scoreElement.textContent = score; coinsElement.textContent = coins; mario.style.bottom = `${groundHeight}px`; mario.classList.add('mario-running'); mario.classList.remove('mario-jumping'); // 创建云朵背景 createClouds(); // 创建初始平台 createInitialPlatforms(); // 开始游戏循环 gameRunning = true; gameLoop = setInterval(updateGame, 16); // 约60帧每秒 // 开始生成障碍物和敌人 obstacleInterval = setInterval(generateObstacle, obstacleGenerationInterval); // 开始生成金币 coinInterval = setInterval(generateCoin, 1500); // 开始计分 scoreInterval = setInterval(() => { if (gameRunning) { score++; scoreElement.textContent = score; } }, 100); // 随着时间增加难度 difficultyInterval = setInterval(() => { if (gameRunning && currentEnemySpeed < 8) { currentEnemySpeed += 0.5; } }, 10000); // 每10秒增加一次难度 } // 创建云朵背景 function createClouds() { // 清除现有云朵 const existingClouds = document.querySelectorAll('.cloud'); existingClouds.forEach(cloud => cloud.remove()); // 创建新云朵 for (let i = 0; i < 5; i++) { const cloud = document.createElement('div'); cloud.className = 'cloud'; const width = Math.random() * 100 + 50; const height = width / 2; const x = Math.random() * containerWidth; const y = Math.random() * (containerHeight / 2); cloud.style.width = `${width}px`; cloud.style.height = `${height}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.5 + 0.2 }); } } // 创建初始平台 function createInitialPlatforms() { // 创建几个初始平台 for (let i = 0; i < 3; i++) { const platform = document.createElement('div'); platform.className = 'platform'; const width = Math.random() * 100 + 100; const height = 20; const x = 300 + i * 250; const y = Math.random() * 150 + 100; platform.style.width = `${width}px`; platform.style.height = `${height}px`; platform.style.left = `${x}px`; platform.style.bottom = `${y}px`; gameContainer.appendChild(platform); platforms.push({ element: platform, x: x, y: y, width: width, height: height }); } } // 生成障碍物和敌人 function generateObstacle() { if (!gameRunning) return; const random = Math.random(); if (random < 0.5) { // 生成管道 const pipe = document.createElement('div'); pipe.className = 'pipe'; const pipeHeight = 80; const pipeWidth = 60; pipe.style.left = `${containerWidth}px`; gameContainer.appendChild(pipe); pipes.push({ element: pipe, x: containerWidth, width: pipeWidth, height: pipeHeight }); } else { // 生成敌人 const enemy = document.createElement('div'); enemy.className = 'enemy'; const enemyWidth = 40; const enemyHeight = 40; enemy.style.left = `${containerWidth}px`; gameContainer.appendChild(enemy); enemies.push({ element: enemy, x: containerWidth, width: enemyWidth, height: enemyHeight, defeated: false }); } // 随机生成平台 if (random > 0.7) { const platform = document.createElement('div'); platform.className = 'platform'; const width = Math.random() * 100 + 100; const height = 20; const x = containerWidth; const y = Math.random() * 150 + 100; platform.style.width = `${width}px`; platform.style.height = `${height}px`; platform.style.left = `${x}px`; platform.style.bottom = `${y}px`; gameContainer.appendChild(platform); platforms.push({ element: platform, x: x, y: y, width: width, height: height }); } } // 生成金币 function generateCoin() { if (!gameRunning) return; const coin = document.createElement('div'); coin.className = 'coin'; const coinSize = 25; const x = containerWidth; const y = Math.random() * 200 + 100; coin.style.width = `${coinSize}px`; coin.style.height = `${coinSize}px`; coin.style.left = `${x}px`; coin.style.bottom = `${y}px`; gameContainer.appendChild(coin); coinItems.push({ element: coin, x: x, y: y, width: coinSize, height: coinSize, collected: false }); } // 更新游戏状态 function updateGame() { if (!gameRunning) return; // 更新玛丽位置 if (isJumping) { marioVelocityY += gravity; marioY += marioVelocityY; // 检查是否落地或站在平台上 let onGround = false; // 检查是否在地面上 if (marioY >= containerHeight - groundHeight - marioHeight) { marioY = containerHeight - groundHeight - marioHeight; onGround = true; } // 检查是否在平台上 platforms.forEach(platform => { if (marioVelocityY > 0 && // 下落中 marioY + marioHeight >= containerHeight - platform.y - platform.height && marioY + marioHeight <= containerHeight - platform.y && 100 < platform.x + platform.width && 100 + marioWidth > platform.x) { marioY = containerHeight - platform.y - platform.height - marioHeight; onGround = true; } }); if (onGround) { isJumping = false; marioVelocityY = 0; mario.classList.add('mario-running'); mario.classList.remove('mario-jumping'); } mario.style.bottom = `${containerHeight - marioY - marioHeight}px`; } // 处理左右移动 if (isMovingLeft) { // 限制不要移出屏幕左侧 if (100 > moveSpeed) { // 不移动玛丽，而是移动所有其他元素 } else { // 移动玛丽 mario.style.left = `${parseInt(mario.style.left || 100) - moveSpeed}px`; } } if (isMovingRight) { // 限制不要移出屏幕右侧 if (parseInt(mario.style.left || 100) + marioWidth + moveSpeed > containerWidth) { // 不移动 } else { // 移动玛丽 mario.style.left = `${parseInt(mario.style.left || 100) + moveSpeed}px`; } } // 更新敌人位置 enemies.forEach((enemy, index) => { if (!enemy.defeated) { enemy.x -= currentEnemySpeed; enemy.element.style.left = `${enemy.x}px`; // 检查是否踩到敌人 if (isJumping && marioVelocityY > 0 && // 下落中 marioY + marioHeight >= containerHeight - groundHeight - enemy.height && marioY + marioHeight <= containerHeight - groundHeight && parseInt(mario.style.left || 100) < enemy.x + enemy.width && parseInt(mario.style.left || 100) + marioWidth > enemy.x) { // 踩到敌人 enemy.defeated = true; enemy.element.style.height = '20px'; enemy.element.style.borderRadius = '0'; enemy.element.style.backgroundColor = '#333'; // 反弹 marioVelocityY = jumpStrength / 1.5; // 加分 score += 100; scoreElement.textContent = score; } // 检查碰撞 else if (!enemy.defeated && parseInt(mario.style.left || 100) < enemy.x + enemy.width && parseInt(mario.style.left || 100) + marioWidth > enemy.x && marioY + marioHeight > containerHeight - groundHeight - enemy.height) { endGame(); return; } } else { // 被踩扁的敌人继续移动 enemy.x -= currentEnemySpeed; enemy.element.style.left = `${enemy.x}px`; } // 移除屏幕外的敌人 if (enemy.x + enemy.width < 0) { enemy.element.remove(); enemies.splice(index, 1); } }); // 更新管道位置 pipes.forEach((pipe, index) => { pipe.x -= currentEnemySpeed; pipe.element.style.left = `${pipe.x}px`; // 检查碰撞 if (parseInt(mario.style.left || 100) < pipe.x + pipe.width && parseInt(mario.style.left || 100) + marioWidth > pipe.x && marioY + marioHeight > containerHeight - groundHeight - pipe.height) { endGame(); return; } // 移除屏幕外的管道 if (pipe.x + pipe.width < 0) { pipe.element.remove(); pipes.splice(index, 1); } }); // 更新平台位置 platforms.forEach((platform, index) => { platform.x -= currentEnemySpeed; platform.element.style.left = `${platform.x}px`; // 移除屏幕外的平台 if (platform.x + platform.width < 0) { platform.element.remove(); platforms.splice(index, 1); } }); // 更新金币位置并检查收集 coinItems.forEach((coin, index) => { if (!coin.collected) { coin.x -= currentEnemySpeed; coin.element.style.left = `${coin.x}px`; // 检查是否收集金币 if (parseInt(mario.style.left || 100) < coin.x + coin.width && parseInt(mario.style.left || 100) + marioWidth > coin.x && marioY < containerHeight - coin.y + coin.height && marioY + marioHeight > containerHeight - coin.y) { // 收集金币 coin.collected = true; coin.element.style.display = 'none'; // 增加金币计数 coins++; coinsElement.textContent = coins; // 加分 score += 50; scoreElement.textContent = score; } } // 移除屏幕外或已收集的金币 if (coin.x + coin.width < 0 || coin.collected) { coin.element.remove(); coinItems.splice(index, 1); } }); // 移动云朵 clouds.forEach(cloud => { cloud.x -= cloud.speed; if (cloud.x + parseInt(cloud.element.style.width) < 0) { cloud.x = containerWidth; } cloud.element.style.left = `${cloud.x}px`; }); } // 玛丽跳跃 function jump() { if (!isJumping && gameRunning) { isJumping = true; marioVelocityY = jumpStrength; mario.classList.remove('mario-running'); mario.classList.add('mario-jumping'); } } // 结束游戏 function endGame() { gameRunning = false; clearInterval(gameLoop); clearInterval(obstacleInterval); clearInterval(coinInterval); clearInterval(scoreInterval); clearInterval(difficultyInterval); // 显示游戏结束界面 gameOver.style.display = 'flex'; document.getElementById('final-score').textContent = score; document.getElementById('final-coins').textContent = coins; } // 键盘控制 document.addEventListener('keydown', (e) => { if (e.code === 'Space' || e.key === ' ') { jump(); e.preventDefault(); // 防止空格键滚动页面 } else if (e.code === 'ArrowLeft' || e.key === 'ArrowLeft') { isMovingLeft = true; } else if (e.code === 'ArrowRight' || e.key === 'ArrowRight') { isMovingRight = true; } }); document.addEventListener('keyup', (e) => { if (e.code === 'ArrowLeft' || e.key === 'ArrowLeft') { isMovingLeft = false; } else if (e.code === 'ArrowRight' || e.key === 'ArrowRight') { isMovingRight = false; } }); // 触摸控制（移动设备） let touchStartX = 0; gameContainer.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; jump(); }); gameContainer.addEventListener('touchmove', (e) => { const touchX = e.touches[0].clientX; const diff = touchX - touchStartX; if (diff < -30) { // 向左滑动 isMovingLeft = true; isMovingRight = false; } else if (diff > 30) { // 向右滑动 isMovingRight = true; isMovingLeft = false; } }); gameContainer.addEventListener('touchend', () => { isMovingLeft = false; isMovingRight = false; }); // 鼠标控制 gameContainer.addEventListener('click', () => { jump(); }); // 事件监听 restartButton.addEventListener('click', () => { gameOver.style.display = 'none'; initGame(); }); startButton.addEventListener('click', () => { initGame(); }); </script></body></html>