"跳一跳"游戏，以其简单的玩法和极富挑战性的游戏机制，成为了广受欢迎的休闲游戏。玩家控制角色在平台上跳跃，避免掉落并尽量收集金币。随着关卡的推进，平台不断变化，游戏难度逐步提升。这种游戏不仅考验玩家的反应速度，还极具娱乐性。
开发一个类似的跳跃游戏，看似简单，但涉及到角色的跳跃、平台的生成、碰撞检测、金币收集等多个逻辑和动画效果。过去，要实现这些功能，可能需要手动编写大量代码和调试动画。幸运的是，Trae IDE 让这一切变得轻松无比。只需要简单的指令，Trae 就能自动帮我完成整个游戏的开发。
💡 我的需求其实很简单
我的需求非常明确：制作一个跳一跳游戏，功能要求如下：
- 角色跳跃：玩家控制角色在平台上跳跃，避免掉落。
- 平台生成：平台会随机生成，玩家需要跳跃到不同的地方。
- 金币收集：玩家可以收集平台上随机生成的金币，增加分数。
- 流畅的动画：角色的跳跃动画要自然流畅，背景效果也要配合得当。
虽然这些功能看似简单，但要做到平滑的跳跃效果、平台生成逻辑和金币收集等功能，手动实现这些部分确实需要不少时间和精力。
✨ Trae 如何理解需求并生成代码？
我只需要在 Trae 中输入一句话：
"生成一个跳一跳游戏，角色在平台上跳跃，避免掉落，收集金币。"
Trae 会自动解析我的需求并生成完整的游戏代码，包括：
- 角色跳跃：玩家控制角色通过点击屏幕或按键来进行跳跃，角色跳跃的动画流畅自然。
- 平台生成：平台会随机生成，玩家需要跳跃到新生成的地方。平台的位置、大小和间距是动态变化的，增加了游戏的难度和趣味性。
- 金币收集：在平台上会随机生成金币，玩家可以通过跳跃碰到金币，增加分数。
- 流畅的动画效果：角色跳跃的动画、平台的运动和背景的变化都非常流畅，给玩家带来了非常好的游戏体验。
只需要输入简单的指令，Trae 就能为我自动生成一个完整的跳一跳游戏，并且将所有的动画和逻辑处理得非常流畅。
🧩 游戏操作直观，挑战十足
Trae 生成的跳一跳游戏非常简单易上手，玩家只需要通过点击屏幕或按键来控制角色跳跃。角色跳跃的动作非常自然，背景的变化和平台的生成也增加了游戏的趣味性。
平台会随机生成，并且不断变化，玩家需要调整跳跃的时机和角度，避免掉落并尽量跳到下一个平台。而每次跳跃时，角色的动作和背景都会配合得非常流畅，给玩家带来了极好的游戏体验。
同时，平台上还会随机生成金币，玩家在跳跃过程中收集金币，增加自己的得分。这种额外的收集任务为游戏增添了更多的挑战和乐趣。
🛠 游戏拓展，功能轻松加
虽然生成的跳一跳游戏已经非常完备，但它也支持轻松添加更多功能：
- 难度调整：可以增加游戏的难度，例如平台跳跃的间距逐渐增大，或者平台的速度逐渐加快。
- 排行榜系统：记录玩家的得分，并显示到排行榜上，增加游戏的竞争性。
- 背景切换：为游戏添加不同的背景主题，比如白天、夜晚、城市等，增加视觉体验。
- 特殊道具：可以加入道具，比如加速、平台扩大等，让游戏更富有趣味性。
这些新功能都可以通过简单的描述，Trae 会自动生成相应的代码，并把它无缝集成到现有的游戏中。
这就是跳一跳游戏开发的新体验
通过这次跳一跳游戏的开发，我深刻感受到 Trae 带来的便利。以前可能需要花费大量时间设计跳跃的逻辑、平台生成算法以及动画效果，现在只需要通过简单的指令，就能轻松实现这些功能。
对于独立开发者或小团队来说，Trae 不仅能大大节省开发时间，还能提供流畅且富有创意的用户体验，让开发者专注于游戏设计，而非复杂的代码实现。
结语
如果你也想制作一个经典的跳一跳游戏，试试 Trae IDE，输入类似的需求：
"生成一个跳一跳游戏，角色在平台上跳跃，避免掉落，收集金币。"
几秒钟内，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>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom, #87CEEB, #1E90FF);
font-family: 'Arial', sans-serif;
overflow: hidden;
}
#game-container {
position: relative;
width: 400px;
height: 600px;
}
#game-canvas {
background-color: transparent;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
#game-ui {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
z-index: 10;
}
.ui-item {
background-color: rgba(255, 255, 255, 0.7);
padding: 5px 10px;
border-radius: 20px;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#score-display {
color: #333;
}
#coins-display {
color: #DAA520;
}
#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 h2 {
color: white;
font-size: 36px;
margin-bottom: 20px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
#final-score {
color: white;
font-size: 24px;
margin-bottom: 30px;
}
#restart-btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
#restart-btn:hover {
background-color: #45a049;
}
#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: 30;
}
#start-screen h1 {
color: white;
font-size: 40px;
margin-bottom: 20px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
#start-screen p {
color: white;
font-size: 18px;
margin-bottom: 30px;
text-align: center;
max-width: 80%;
line-height: 1.5;
}
#start-btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 15px 30px;
font-size: 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
#start-btn:hover {
background-color: #45a049;
}
#controls-info {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
text-align: center;
color: white;
font-size: 14px;
}
@media (max-width: 500px) {
#game-container {
width: 100%;
height: 100vh;
}
#game-canvas {
border-radius: 0;
}
}
</style>
</head>
<body>
<div id="game-container">
<canvas id="game-canvas" width="400" height="600"></canvas>
<div id="game-ui">
<div id="score-display" class="ui-item">分数: 0</div>
<div id="coins-display" class="ui-item">金币: 0</div>
</div>
<div id="game-over">
<h2>游戏结束</h2>
<div id="final-score">最终分数: 0</div>
<button id="restart-btn">重新开始</button>
</div>
<div id="start-screen">
<h1>跳一跳</h1>
<p>控制角色在平台上跳跃，避免掉落，收集金币获得更高分数！</p>
<p>按住屏幕或鼠标左键蓄力，松开跳跃。跳跃距离取决于按住的时间。</p>
<button id="start-btn">开始游戏</button>
<div id="controls-info">电脑: 按住鼠标左键蓄力，松开跳跃<br>手机: 按住屏幕蓄力，松开跳跃</div>
</div>
</div>
<script>
// 获取游戏元素
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score-display');
const coinsDisplay = document.getElementById('coins-display');
const gameOverScreen = document.getElementById('game-over');
const finalScoreDisplay = document.getElementById('final-score');
const restartBtn = document.getElementById('restart-btn');
const startScreen = document.getElementById('start-screen');
const startBtn = document.getElementById('start-btn');
// 游戏常量
const GRAVITY = 0.5;
const MAX_POWER = 15;
const PLATFORM_WIDTH_MIN = 60;
const PLATFORM_WIDTH_MAX = 120;
const PLATFORM_HEIGHT = 20;
const PLATFORM_GAP_MIN = 60;
const PLATFORM_GAP_MAX = 200;
const PLATFORM_COLORS = [
'#4CAF50', '#2196F3', '#FFC107', '#9C27B0', '#FF5722',
'#3F51B5', '#009688', '#FF9800', '#E91E63', '#673AB7'
];
const COIN_RADIUS = 10;
const COIN_COLOR = '#FFD700';
const COIN_VALUE = 10;
const COIN_SPAWN_CHANCE = 0.7; // 70% 几率生成金币
// 游戏变量
let player = {
x: 0,
y: 0,
width: 30,
height: 30,
velocityX: 0,
velocityY: 0,
isJumping: false,
color: '#FF5252',
onPlatform: true,
currentPlatform: null
};
let platforms = [];
let coins = [];
let score = 0;
let coinsCollected = 0;
let gameRunning = false;
let powerLevel = 0;
let powerCharging = false;
let powerBarHeight = 0;
let cameraOffset = 0;
let highestPlatformY = 0;
// 初始化游戏
function initGame() {
// 重置游戏变量
platforms = [];
coins = [];
score = 0;
coinsCollected = 0;
cameraOffset = 0;
highestPlatformY = canvas.height - 50;
// 创建初始平台
const initialPlatform = {
x: canvas.width / 2 - 75,
y: canvas.height - 50,
width: 150,
height: PLATFORM_HEIGHT,
color: PLATFORM_COLORS[0]
};
platforms.push(initialPlatform);
// 生成更多平台
generatePlatforms();
// 设置玩家初始位置
player.x = initialPlatform.x + initialPlatform.width / 2 - player.width / 2;
player.y = initialPlatform.y - player.height;
player.velocityX = 0;
player.velocityY = 0;
player.isJumping = false;
player.onPlatform = true;
player.currentPlatform = initialPlatform;
// 更新分数显示
updateScoreDisplay();
updateCoinsDisplay();
}
// 生成平台
function generatePlatforms() {
let lastPlatformY = platforms[platforms.length - 1].y;
// 生成新平台，直到达到一定高度
while (lastPlatformY > 0) {
const platformWidth = PLATFORM_WIDTH_MIN + Math.random() * (PLATFORM_WIDTH_MAX - PLATFORM_WIDTH_MIN);
const platformGap = PLATFORM_GAP_MIN + Math.random() * (PLATFORM_GAP_MAX - PLATFORM_GAP_MIN);
const platformX = Math.random() * (canvas.width - platformWidth);
const platformY = lastPlatformY - 100 - Math.random() * 50; // 垂直间距
const platform = {
x: platformX,
y: platformY,
width: platformWidth,
height: PLATFORM_HEIGHT,
color: PLATFORM_COLORS[Math.floor(Math.random() * PLATFORM_COLORS.length)]
};
platforms.push(platform);
// 可能在平台上生成金币
if (Math.random() < COIN_SPAWN_CHANCE) {
const coinX = platform.x + platform.width / 2;
const coinY = platform.y - COIN_RADIUS * 3;
coins.push({
x: coinX,
y: coinY,
radius: COIN_RADIUS,
collected: false
});
}
lastPlatformY = platformY;
highestPlatformY = Math.min(highestPlatformY, platformY);
}
}
// 更新游戏状态
function update() {
if (!gameRunning) return;
// 更新玩家位置
player.x += player.velocityX;
player.y += player.velocityY;
player.velocityY += GRAVITY;
// 检查是否需要生成更多平台
if (highestPlatformY > -200) {
generatePlatforms();
}
// 检查玩家是否落在平台上
if (player.velocityY > 0) {
for (let i = 0; i < platforms.length; i++) {
const platform = platforms[i];
if (player.y + player.height > platform.y &&
player.y + player.height < platform.y + platform.height + 10 &&
player.x + player.width > platform.x &&
player.x < platform.x + platform.width) {
player.y = platform.y - player.height;
player.velocityY = 0;
player.isJumping = false;
player.onPlatform = true;
player.currentPlatform = platform;
// 增加分数
const platformScore = Math.floor((canvas.height - platform.y) / 10);
score += platformScore;
updateScoreDisplay();
break;
}
}
}
// 检查金币收集
for (let i = 0; i < coins.length; i++) {
const coin = coins[i];
if (!coin.collected) {
const dx = (player.x + player.width / 2) - coin.x;
const dy = (player.y + player.height / 2) - coin.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < player.width / 2 + coin.radius) {
coin.collected = true;
coinsCollected++;
score += COIN_VALUE;
updateScoreDisplay();
updateCoinsDisplay();
}
}
}
// 相机跟随（向上滚动）
if (player.y < canvas.height / 2) {
const targetOffset = canvas.height / 2 - player.y;
cameraOffset = targetOffset;
}
// 检查游戏结束条件（玩家掉出屏幕）
if (player.y > canvas.height + cameraOffset) {
gameOver();
}
// 边界检查
if (player.x < 0) {
player.x = 0;
player.velocityX = 0;
} else if (player.x + player.width > canvas.width) {
player.x = canvas.width - player.width;
player.velocityX = 0;
}
// 清理屏幕外的平台和金币
cleanupObjects();
}
// 清理屏幕外的对象
function cleanupObjects() {
// 清理屏幕下方的平台
platforms = platforms.filter(platform => platform.y < canvas.height + cameraOffset + 100);
// 清理屏幕下方或已收集的金币
coins = coins.filter(coin => !coin.collected && coin.y < canvas.height + cameraOffset + 100);
}
// 绘制游戏
function draw() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制背景
drawBackground();
// 保存当前状态
ctx.save();
// 应用相机偏移
ctx.translate(0, cameraOffset);
// 绘制平台
for (let i = 0; i < platforms.length; i++) {
const platform = platforms[i];
ctx.fillStyle = platform.color;
ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
// 添加平台阴影
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
ctx.fillRect(platform.x, platform.y + platform.height, platform.width, 5);
}
// 绘制金币
for (let i = 0; i < coins.length; i++) {
const coin = coins[i];
if (!coin.collected) {
drawCoin(coin);
}
}
// 绘制玩家
drawPlayer();
// 恢复状态
ctx.restore();
// 绘制蓄力条（如果正在蓄力）
if (powerCharging) {
drawPowerBar();
}
}
// 绘制背景
function drawBackground() {
// 绘制云朵
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
// 云朵位置根据相机偏移变化
const cloudOffset = cameraOffset * 0.2;
// 绘制几朵云
drawCloud(50, 100 + cloudOffset % 200, 60, 30);
drawCloud(200, 150 + cloudOffset % 300, 80, 40);
drawCloud(300, 80 + cloudOffset % 250, 70, 35);
drawCloud(100, 250 + cloudOffset % 350, 90, 45);
drawCloud(250, 300 + cloudOffset % 400, 65, 32);
}
// 绘制云朵
function drawCloud(x, y, width, height) {
ctx.beginPath();
ctx.arc(x, y, height, 0, Math.PI * 2);
ctx.arc(x + width * 0.4, y - height * 0.2, height * 0.8, 0, Math.PI * 2);
ctx.arc(x + width * 0.8, y, height, 0, Math.PI * 2);
ctx.fill();
}
// 绘制玩家
function drawPlayer() {
// 绘制玩家身体
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
// 绘制玩家眼睛
ctx.fillStyle = 'white';
ctx.fillRect(player.x + player.width * 0.2, player.y + player.height * 0.2, player.width * 0.2, player.height * 0.2);
ctx.fillRect(player.x + player.width * 0.6, player.y + player.height * 0.2, player.width * 0.2, player.height * 0.2);
ctx.fillStyle = 'black';
ctx.fillRect(player.x + player.width * 0.25, player.y + player.height * 0.25, player.width * 0.1, player.height * 0.1);
ctx.fillRect(player.x + player.width * 0.65, player.y + player.height * 0.25, player.width * 0.1, player.height * 0.1);
// 绘制玩家嘴巴
ctx.fillStyle = player.isJumping ? '#FF0000' : '#000000';
ctx.fillRect(player.x + player.width * 0.3, player.y + player.height * 0.6, player.width * 0.4, player.height * 0.1);
}
// 绘制金币
function drawCoin(coin) {
// 外圈
ctx.fillStyle = COIN_COLOR;
ctx.beginPath();
ctx.arc(coin.x, coin.y, coin.radius, 0, Math.PI * 2);
ctx.fill();
// 内圈
ctx.fillStyle = '#FFA500';
ctx.beginPath();
ctx.arc(coin.x, coin.y, coin.radius * 0.7, 0, Math.PI * 2);
ctx.fill();
// 金币符号
ctx.fillStyle = COIN_COLOR;
ctx.font = `${coin.radius}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('¥', coin.x, coin.y);
}
// 绘制蓄力条
function drawPowerBar() {
const barWidth = 20;
const barMaxHeight = 100;
const barX = 20;
const barY = canvas.height - barMaxHeight - 20;
// 背景
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(barX, barY, barWidth, barMaxHeight);
// 蓄力进度
const powerPercentage = powerLevel / MAX_POWER;
powerBarHeight = powerPercentage * barMaxHeight;
// 根据蓄力程度变色
let barColor;
if (powerPercentage < 0.3) {
barColor = '#4CAF50'; // 绿色
} else if (powerPercentage < 0.6) {
barColor = '#FFC107'; // 黄色
} else {
barColor = '#F44336'; // 红色
}
ctx.fillStyle = barColor;
ctx.fillRect(barX, barY + barMaxHeight - powerBarHeight, barWidth, powerBarHeight);
// 边框
ctx.strokeStyle = 'white';
ctx.lineWidth = 2;
ctx.strokeRect(barX, barY, barWidth, barMaxHeight);
}
// 更新分数显示
function updateScoreDisplay() {
scoreDisplay.textContent = `分数: ${score}`;
}
// 更新金币显示
function updateCoinsDisplay() {
coinsDisplay.textContent = `金币: ${coinsCollected}`;
}
// 开始蓄力
function startPowerCharge() {
if (!player.onPlatform || !gameRunning) return;
powerCharging = true;
powerLevel = 0;
}
// 结束蓄力并跳跃
function endPowerChargeAndJump() {
if (!powerCharging || !gameRunning) return;
// 根据蓄力程度设置跳跃速度
const jumpPowerX = Math.min(powerLevel, MAX_POWER);
const jumpPowerY = Math.min(powerLevel * 1.2, MAX_POWER * 1.2);
// 设置玩家速度
player.velocityY = -jumpPowerY;
player.velocityX = jumpPowerX * 0.5;
// 更新状态
player.isJumping = true;
player.onPlatform = false;
player.currentPlatform = null;
// 重置蓄力
powerCharging = false;
powerLevel = 0;
}
// 游戏循环
function gameLoop() {
// 更新蓄力
if (powerCharging && powerLevel < MAX_POWER) {
powerLevel += 0.3;
}
update();
draw();
requestAnimationFrame(gameLoop);
}
// 游戏结束
function gameOver() {
gameRunning = false;
finalScoreDisplay.textContent = `最终分数: ${score}`;
gameOverScreen.style.display = 'flex';
}
// 重新开始游戏
function restartGame() {
gameOverScreen.style.display = 'none';
initGame();
gameRunning = true;
}
// 开始游戏
function startGame() {
startScreen.style.display = 'none';
initGame();
gameRunning = true;
}
// 事件监听
canvas.addEventListener('mousedown', startPowerCharge);
canvas.addEventListener('mouseup', endPowerChargeAndJump);
canvas.addEventListener('touchstart', function(e) {
e.preventDefault();
startPowerCharge();
}, { passive: false });
canvas.addEventListener('touchend', function(e) {
e.preventDefault();
endPowerChargeAndJump();
}, { passive: false });
restartBtn.addEventListener('click', restartGame);
startBtn.addEventListener('click', startGame);
// 调整画布大小
function resizeCanvas() {
const container = document.getElementById('game-container');
if (window.innerWidth < 500) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
container.style.width = '100%';
container.style.height = '100vh';
} else {
canvas.width = 400;
canvas.height = 600;
container.style.width = '400px';
container.style.height = '600px';
}
// 如果游戏正在运行，重新初始化
if (gameRunning) {
initGame();
}
}
// 监听窗口大小变化
window.addEventListener('resize', resizeCanvas);
// 初始化画布大小
resizeCanvas();
// 开始游戏循环
gameLoop();
</script>
</body>
</html>