提到 超级玛丽 ，大多数人第一反应就是：那个戴红帽的小胡子，一路跳、一路踩怪、一路收金币 ，最后去救公主的故事。 要自己写这个游戏？听上去就头大：跑动和跳跃的物理效果、金币收集逻辑、怪物 AI、关卡设计、平台判定......全都得一点点敲出来。
但用 Trae IDE，一句话，整个"超级玛丽"就能活灵活现地跑起来。
💡 我想要的玩法
脑海里的画面其实很清晰：
- 玛丽能跑也能跳：按方向键移动，按空格起跳，能跳到平台或踩怪；
- 金币要收集：空中和箱子里有金币，碰到就叮当加分；
- 敌人要互动：踩头打败小怪，没踩好反被撞就掉命；
- 平台和关卡丰富：要有不同高度的砖块、隐藏的奖励道具；
- 视觉要经典：像素风，小清新背景，看着就让人怀念。
于是我直接告诉 Trae：
"生成一个超级玛丽游戏，玩家控制玛丽跳跃，收集金币并打败敌人。"
✨ Trae 几秒钟的魔法
没过多久，Trae 自动生成了一个能玩的 迷你版超级玛丽：
✅ 流畅的跑跳手感 ：跑起来很顺滑，跳跃也带了点重力感； ✅ 金币收集机制 ：金币漂浮在空中，或者藏在砖块里，碰到就有声音和分数提示； ✅ 敌人互动完善 ：踩上去能打败怪物，如果被怪撞到会损失一条命； ✅ 砖块与道具 ：打破砖块能掉出金币，有些还藏了蘑菇和星星； ✅ 像素画面和音效：熟悉的配色和叮当声，瞬间唤起童年记忆。
🧩 试玩体验
一上手就是"爷青回"的感动：
🎯 刚开始跳来跳去收金币 ，那种"叮"的声音太熟悉了； ⚠ 遇到小怪时心里一紧 ，赶紧踩上去把它解决； 💥 第一次掉进坑里 ，忍不住笑出声------"这操作怎么跟小时候一样蠢"； 🌟 踩到隐藏砖块冒出蘑菇，那一刻简直像发现宝藏。
Trae 生成的版本，不仅能玩，还把情怀拿捏得死死的。
🛠 想怎么玩花的？一句话就行
Trae 的扩展能力，就是它最上头的地方：
- "加个关卡 BOSS" → 让库巴出场，真打起来更有目标感；
- "让金币收集到 100 个就加命" → 完美还原经典设定；
- "加入水下和冰雪关卡" → 场景切换更有变化；
- "加上双人模式" → 让路易基也能和玛丽并肩作战。
你只要说一句，Trae 就能自动补逻辑、调动画，完全不必手写繁琐代码。
🎮 过去 vs 现在
过去写超级玛丽：
- 搞 重力和跳跃算法；
- 做 金币、砖块、敌人互动逻辑；
- 设计 多关卡地图；
- 调 像素画面和音效。
现在用 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: #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>