大家应该都玩过2048吧，那个让人又爱又恨的数字游戏。玩家通过滑动方块，将相同的数字合并，直到合成2048。这个游戏看起来简单，但要写出完美的逻辑和设计，难度还是有点高的。尤其是在处理合并和动画时，代码量和调试的复杂性让不少开发者头疼。
不过，自从我开始使用 Trae IDE，我再也不需要担心这些问题了。通过 Trae，我只需要简单输入指令，游戏的核心逻辑就能自动生成，不仅如此，UI 设计和响应式布局也自动匹配到我的需求。接下来，我就来分享一下如何通过 Trae 快速实现2048游戏，看看它是如何让我从想法到代码的转换如此轻松的。
💡 我的需求其实很简单
我的需求非常直接，想要一个简单的2048游戏，具备以下几个核心功能：
- 箭头键控制：玩家使用键盘的上下左右箭头键来滑动方块。
- 合并方块：相同数字的方块会相遇并合并，合并后的数字翻倍。
- 游戏结束：当方块无可合并的空位时，游戏结束。
听起来并不复杂，但要做到流畅的游戏体验和合适的UI设计，通常需要花费不少时间和精力。
✨ Trae 如何理解我的需求并生成代码？
我只需要在 Trae 中输入一条简单的指令：
"生成2048游戏，玩家通过箭头键滑动方块，合并相同的数字。"
然后，Trae 就会自动分析我的需求，并生成一个完整的游戏代码，包括：
- 滑动方块的逻辑：玩家通过箭头键来控制方块滑动，碰到相同数字的方块会合并。
- 合并规则：相同的数字会合并成一个新的数字，合并时还会播放动画效果，提升游戏的互动性。
- 响应式布局：游戏界面能够自适应不同屏幕尺寸，保证在手机、平板和桌面上都能流畅运行。
最棒的是，生成的代码不止包括游戏的核心功能，还包含了一个简单、直观的UI设计，让游戏看起来既清新又好用。
🧩 游戏直接可用，UI也不掉链子
Trae 不仅生成了2048游戏的核心逻辑，还自动提供了响应式的UI设计。这个UI设计非常简洁明了，不仅清晰显示了方块，还确保了游戏在不同设备上都能完美适配。
我将自动生成的代码粘贴到我的项目中，打开游戏页面，立马就能开始玩2048了。可以说，Trae 让我的开发过程变得简单到不可思议：我不再需要为布局、动画和交互设计费时费力，Trae 完美地帮我做了这一切。
🛠 高度可拓展，游戏功能随心添加
在游戏完成后，我还想增加一些新功能，比如：
- 得分和排行榜：记录玩家得分并展示到排行榜上。
- 音效和动画：加入方块合并时的音效和动画，让游戏更加生动。
- 难度设置：增加多个难度等级，逐渐提高游戏的挑战性。
这些新功能在 Trae 中都能轻松实现。我只需要简单描述需求，Trae 就会为我生成相关的代码，并且自动集成到现有的游戏中。无论是增加功能还是修改现有逻辑，Trae 都能快速响应并生成完美的结果。
这就是游戏开发的未来
通过这次开发2048游戏，我深刻感受到 Trae 给我带来的便捷。以前我可能需要花费几个小时或者更多时间来编写、调试和优化这些逻辑，现在，只需要简单输入需求，Trae 就能自动生成完整的代码并提供美观的UI设计。
不管你是独立开发者，还是小团队的成员，Trae 都能让你从繁琐的代码和复杂的设计中解放出来，专注于创意和功能开发。
结语
如果你也想做一个类似的2048游戏，试试 Trae IDE，输入简单的指令：
"生成2048游戏，玩家通过箭头键滑动方块，合并相同的数字。"
几秒钟内，你就能看到完整的游戏实现，带有流畅的UI设计和响应式布局。而且，随着需求的增加，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>2048游戏</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #faf8ef;
color: #776e65;
margin: 0;
padding: 20px;
}
h1 {
font-size: 80px;
margin: 0;
color: #776e65;
}
.subtitle {
margin: 5px 0 20px;
}
.container {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.game-header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.scores-container {
display: flex;
gap: 10px;
}
.score-box {
position: relative;
background: #bbada0;
padding: 15px 25px;
border-radius: 6px;
color: white;
min-width: 80px;
}
.score-title {
font-size: 13px;
text-transform: uppercase;
}
.score {
font-size: 25px;
font-weight: bold;
}
.new-game-button {
background: #8f7a66;
color: white;
border: none;
border-radius: 6px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
}
.new-game-button:hover {
background: #9f8b77;
}
.game-container {
position: relative;
background: #bbada0;
border-radius: 6px;
padding: 15px;
margin-bottom: 30px;
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 15px;
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
}
.grid-cell {
width: 100%;
height: 0;
padding-bottom: 100%;
background: rgba(238, 228, 218, 0.35);
border-radius: 3px;
box-sizing: border-box;
}
.tile {
position: absolute;
border-radius: 3px;
font-weight: bold;
text-align: center;
transition: all 0.1s ease-in-out;
z-index: 2;
box-sizing: border-box;
}
.tile-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
line-height: 1;
font-size: inherit;
}
.tile-2 {
background: #eee4da;
color: #776e65;
}
.tile-4 {
background: #ede0c8;
color: #776e65;
}
.tile-8 {
background: #f2b179;
color: white;
}
.tile-16 {
background: #f59563;
color: white;
}
.tile-32 {
background: #f67c5f;
color: white;
}
.tile-64 {
background: #f65e3b;
color: white;
}
.tile-128 {
background: #edcf72;
color: white;
}
.tile-256 {
background: #edcc61;
color: white;
}
.tile-512 {
background: #edc850;
color: white;
}
.tile-1024 {
background: #edc53f;
color: white;
}
.tile-2048 {
background: #edc22e;
color: white;
}
/* 根据数字位数调整字体大小 */
.tile-2 .tile-inner, .tile-4 .tile-inner, .tile-8 .tile-inner {
font-size: 55px;
}
.tile-16 .tile-inner, .tile-32 .tile-inner, .tile-64 .tile-inner {
font-size: 50px;
}
.tile-128 .tile-inner, .tile-256 .tile-inner, .tile-512 .tile-inner {
font-size: 45px;
}
.tile-1024 .tile-inner, .tile-2048 .tile-inner {
font-size: 35px;
}
.game-message {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(238, 228, 218, 0.73);
z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 6px;
display: none;
}
.game-message.game-won {
background: rgba(237, 194, 46, 0.5);
color: white;
}
.game-message p {
font-size: 60px;
font-weight: bold;
margin: 0 0 20px;
}
.game-message .lower {
display: flex;
gap: 10px;
margin-top: 30px;
}
.game-message .lower button {
background: #8f7a66;
color: white;
border: none;
border-radius: 6px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
}
.game-message .lower button:hover {
background: #9f8b77;
}
.game-explanation {
margin-top: 30px;
}
@media screen and (max-width: 520px) {
h1 {
font-size: 50px;
}
.tile {
font-size: 35px;
}
.tile-128, .tile-256, .tile-512 {
font-size: 25px;
}
.tile-1024, .tile-2048 {
font-size: 15px;
}
.game-message p {
font-size: 30px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="heading">
<h1>2048</h1>
<div class="subtitle">合并相同的数字，获得2048!</div>
</div>
<div class="game-header">
<div class="scores-container">
<div class="score-box">
<div class="score-title">分数</div>
<div class="score" id="score">0</div>
</div>
<div class="score-box">
<div class="score-title">最高分</div>
<div class="score" id="best-score">0</div>
</div>
</div>
<button class="new-game-button" id="new-game-button">新游戏</button>
</div>
<div class="game-container">
<div class="game-message" id="game-message">
<p></p>
<div class="lower">
<button class="retry-button">再试一次</button>
<button class="keep-playing-button">继续游戏</button>
</div>
</div>
<div class="grid-container" id="grid-container">
<!-- 4x4 网格单元格 -->
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
</div>
<div class="game-explanation">
<p><strong>游戏规则:</strong> 使用 <strong>箭头键</strong> 移动方块。当两个相同数字的方块碰到一起时，它们会 <strong>合并成一个!</strong></p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 游戏状态
let grid = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
];
let score = 0;
let bestScore = localStorage.getItem('bestScore') || 0;
let gameOver = false;
let gameWon = false;
let keepPlaying = false;
// DOM 元素
const gridContainer = document.getElementById('grid-container');
const scoreDisplay = document.getElementById('score');
const bestScoreDisplay = document.getElementById('best-score');
const newGameButton = document.getElementById('new-game-button');
const gameMessageContainer = document.getElementById('game-message');
const retryButton = document.querySelector('.retry-button');
const keepPlayingButton = document.querySelector('.keep-playing-button');
// 更新最高分显示
bestScoreDisplay.textContent = bestScore;
// 初始化游戏
function initGame() {
// 清空网格
grid = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
];
score = 0;
gameOver = false;
gameWon = false;
keepPlaying = false;
// 更新分数显示
scoreDisplay.textContent = score;
// 清除所有方块
const tiles = document.querySelectorAll('.tile');
tiles.forEach(tile => tile.remove());
// 隐藏游戏消息
gameMessageContainer.style.display = 'none';
gameMessageContainer.classList.remove('game-won');
// 添加两个初始方块
addRandomTile();
addRandomTile();
}
// 添加随机方块
function addRandomTile() {
if (!hasEmptyCell()) return;
let emptyCells = [];
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
if (grid[i][j] === 0) {
emptyCells.push({row: i, col: j});
}
}
}
if (emptyCells.length > 0) {
const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
const value = Math.random() < 0.9 ? 2 : 4; // 90%概率生成2，10%概率生成4
grid[randomCell.row][randomCell.col] = value;
// 创建新方块元素
createTileElement(randomCell.row, randomCell.col, value);
}
}
// 创建方块DOM元素
function createTileElement(row, col, value) {
const tile = document.createElement('div');
tile.className = `tile tile-${value}`;
tile.setAttribute('data-row', row);
tile.setAttribute('data-col', col);
tile.setAttribute('data-value', value);
// 计算位置 - 考虑网格间隙15px
// 计算每个单元格的宽度（包括间隙）
const containerWidth = gridContainer.offsetWidth;
const cellWidth = (containerWidth - 15 * 3) / 4; // 减去3个间隙的宽度
const gapSize = 15; // 间隙大小(px)
// 计算左侧位置（像素）
const left = col * (cellWidth + gapSize);
// 计算顶部位置（像素）
const top = row * (cellWidth + gapSize);
tile.style.left = `${left}px`;
tile.style.top = `${top}px`;
tile.style.width = `${cellWidth}px`;
tile.style.height = `${cellWidth}px`;
const inner = document.createElement('div');
inner.className = 'tile-inner';
inner.textContent = value;
tile.appendChild(inner);
gridContainer.appendChild(tile);
}
// 更新方块位置和值
function updateTiles() {
// 移除所有方块
const tiles = document.querySelectorAll('.tile');
tiles.forEach(tile => tile.remove());
// 重新创建方块
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
if (grid[i][j] !== 0) {
createTileElement(i, j, grid[i][j]);
}
}
}
}
// 检查是否有空单元格
function hasEmptyCell() {
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
if (grid[i][j] === 0) {
return true;
}
}
}
return false;
}
// 检查是否可以移动
function canMove() {
// 检查是否有空单元格
if (hasEmptyCell()) return true;
// 检查水平相邻的方块
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 3; j++) {
if (grid[i][j] === grid[i][j + 1]) {
return true;
}
}
}
// 检查垂直相邻的方块
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 4; j++) {
if (grid[i][j] === grid[i + 1][j]) {
return true;
}
}
}
return false;
}
// 移动方块
function move(direction) {
if (gameOver && !keepPlaying) return;
let moved = false;
let addScore = 0;
// 保存移动前的网格状态，用于检测是否有变化
const previousGrid = JSON.parse(JSON.stringify(grid));
switch (direction) {
case 'up':
// 向上移动
for (let j = 0; j < 4; j++) {
for (let i = 1; i < 4; i++) {
if (grid[i][j] !== 0) {
let row = i;
while (row > 0 && grid[row - 1][j] === 0) {
grid[row - 1][j] = grid[row][j];
grid[row][j] = 0;
row--;
moved = true;
}
if (row > 0 && grid[row - 1][j] === grid[row][j]) {
grid[row - 1][j] *= 2;
addScore += grid[row - 1][j];
grid[row][j] = 0;
moved = true;
}
}
}
}
break;
case 'down':
// 向下移动
for (let j = 0; j < 4; j++) {
for (let i = 2; i >= 0; i--) {
if (grid[i][j] !== 0) {
let row = i;
while (row < 3 && grid[row + 1][j] === 0) {
grid[row + 1][j] = grid[row][j];
grid[row][j] = 0;
row++;
moved = true;
}
if (row < 3 && grid[row + 1][j] === grid[row][j]) {
grid[row + 1][j] *= 2;
addScore += grid[row + 1][j];
grid[row][j] = 0;
moved = true;
}
}
}
}
break;
case 'left':
// 向左移动
for (let i = 0; i < 4; i++) {
for (let j = 1; j < 4; j++) {
if (grid[i][j] !== 0) {
let col = j;
while (col > 0 && grid[i][col - 1] === 0) {
grid[i][col - 1] = grid[i][col];
grid[i][col] = 0;
col--;
moved = true;
}
if (col > 0 && grid[i][col - 1] === grid[i][col]) {
grid[i][col - 1] *= 2;
addScore += grid[i][col - 1];
grid[i][col] = 0;
moved = true;
}
}
}
}
break;
case 'right':
// 向右移动
for (let i = 0; i < 4; i++) {
for (let j = 2; j >= 0; j--) {
if (grid[i][j] !== 0) {
let col = j;
while (col < 3 && grid[i][col + 1] === 0) {
grid[i][col + 1] = grid[i][col];
grid[i][col] = 0;
col++;
moved = true;
}
if (col < 3 && grid[i][col + 1] === grid[i][col]) {
grid[i][col + 1] *= 2;
addScore += grid[i][col + 1];
grid[i][col] = 0;
moved = true;
}
}
}
}
break;
}
// 如果有移动，更新分数和方块
if (moved) {
// 更新分数
score += addScore;
scoreDisplay.textContent = score;
// 更新最高分
if (score > bestScore) {
bestScore = score;
bestScoreDisplay.textContent = bestScore;
localStorage.setItem('bestScore', bestScore);
}
// 更新方块
updateTiles();
// 检查是否达到2048
if (!gameWon && !keepPlaying) {
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
if (grid[i][j] === 2048) {
gameWon = true;
showMessage('你赢了!', true);
return;
}
}
}
}
// 添加新方块
addRandomTile();
// 检查游戏是否结束
if (!canMove()) {
gameOver = true;
showMessage('游戏结束!', false);
}
}
}
// 显示游戏消息
function showMessage(message, won) {
const messageElement = gameMessageContainer.querySelector('p');
messageElement.textContent = message;
if (won) {
gameMessageContainer.classList.add('game-won');
} else {
gameMessageContainer.classList.remove('game-won');
}
gameMessageContainer.style.display = 'flex';
}
// 键盘事件监听
document.addEventListener('keydown', function(event) {
switch (event.key) {
case 'ArrowUp':
event.preventDefault();
move('up');
break;
case 'ArrowDown':
event.preventDefault();
move('down');
break;
case 'ArrowLeft':
event.preventDefault();
move('left');
break;
case 'ArrowRight':
event.preventDefault();
move('right');
break;
}
});
// 触摸事件支持
let touchStartX = 0;
let touchStartY = 0;
let touchEndX = 0;
let touchEndY = 0;
document.addEventListener('touchstart', function(event) {
touchStartX = event.touches[0].clientX;
touchStartY = event.touches[0].clientY;
}, false);
document.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
document.addEventListener('touchend', function(event) {
touchEndX = event.changedTouches[0].clientX;
touchEndY = event.changedTouches[0].clientY;
handleSwipe();
}, false);
function handleSwipe() {
const dx = touchEndX - touchStartX;
const dy = touchEndY - touchStartY;
const absDx = Math.abs(dx);
const absDy = Math.abs(dy);
if (Math.max(absDx, absDy) > 10) {
// 水平滑动距离大于垂直滑动距离
if (absDx > absDy) {
if (dx > 0) {
move('right');
} else {
move('left');
}
} else {
if (dy > 0) {
move('down');
} else {
move('up');
}
}
}
}
// 按钮事件监听
newGameButton.addEventListener('click', initGame);
retryButton.addEventListener('click', initGame);
keepPlayingButton.addEventListener('click', function() {
keepPlaying = true;
gameMessageContainer.style.display = 'none';
});
// 初始化游戏
initGame();
});
</script>
</body>
</html>