一、引言
在如今的数字化时代，小游戏以其简单易上手、趣味性强的特点深受大家喜爱。2048 游戏作为一款经典的数字合并游戏，拥有庞大的玩家群体。本文将详细介绍一个用单文件 HTML 实现的可爱风格 2048 游戏项目，它不仅具备传统 2048 游戏的基本功能，还在界面设计和视觉效果上进行了优化，让玩家在游戏过程中感受到可爱与乐趣。
二、项目概述
这个 2048 游戏项目采用单文件 HTML 编写，融合了 HTML、CSS 和 JavaScript 三种技术。界面设计采用响应式布局，确保在不同设备上都能完美展示。游戏中使用了一系列可爱的图片替代传统的数字，为游戏增添了更多的趣味性。主要模块包括标题、最高分 / 得分显示、游戏卡片区域以及游戏规则说明。
三、功能实现
3.1 界面设计
3.1.1 整体布局
使用 HTML 和 CSS 构建了游戏的整体布局。通过 flexbox 和 grid 布局实现了响应式设计，使得游戏界面在不同尺寸的屏幕上都能自适应。页面背景颜色设置为 #faf8ef，营造出温馨可爱的氛围。
html
<body>
<div id="header">
<h1>可爱 2048 游戏</h1>
<div id="score-board">
<div id="score">得分: 0</div>
<div id="high-score">最高分: 0</div>
</div>
</div>
<div id="game-board"></div>
<div id="game-rules">
<p>游戏规则：使用键盘方向键（上、下、左、右）控制卡片移动，相同的卡片会合并成一个数值更大的卡片，目标是合并出数值为 2048 的卡片。</p>
</div>
<div id="win-modal">
<div id="win-modal-content">
<p>恭喜你已经合并了一只宇宙无敌最可爱的猫咪</p>
<button onclick="closeWinModal()">确认</button>
</div>
</div>
</body>
3.1.2 样式设计
标题文字颜色和游戏规则的颜色都设置为 #776e65，游戏规则的字号为 14px，使界面看起来更加协调。标题与最高分、得分排在一行，标题左对齐，高分、得分右对齐，增强了界面的美观性。
css
body {
background-color: #faf8ef;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 500px;
color: #776e65;
}
h1 {
margin: 0;
}
#score-board {
display: flex;
gap: 10px;
}
#score,
#high-score {
background-color: #bbada0;
color: white;
padding: 5px 10px;
border-radius: 5px;
}
#game-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 10px;
background-color: #bbada0;
padding: 10px;
border-radius: 5px;
width: 90%;
max-width: 500px;
margin: 20px 0;
}
.cell {
background-color: rgba(238, 228, 218, 0.35);
border-radius: 5px;
aspect-ratio: 1/1;
}
.tile {
width: 100%;
height: 100%;
background-size: cover;
border-radius: 5px;
}
#game-rules {
text-align: left;
color: #776e65;
width: 90%;
max-width: 500px;
font-size: 14px;
}
#win-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
}
#win-modal-content {
background-color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
}
3.2 游戏逻辑
3.2.1 图片映射
使用 JavaScript 定义了图片与数字的映射关系，将图片链接存储在 images 对象中，以便在游戏中根据数字显示相应的图片。
javascript
const images = {
2: 'https://p9-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_generation/df099f209335f8b25e1d4ab9ce2867ff_1741677321668230149.png~tplv-a9rns2rl98-image.png?rk3s=25bff839&x-expires=1773213321&x-signature=reNM%2F907NNX7Rc%2BE4FflYbWaRKo%3D',
4: 'https://p9-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_generation/322b9826909d14458d22e0931fd06aac_1741677330491084517.png~tplv-a9rns2rl98-image.png?rk3s=25bff839&x-expires=1773213330&x-signature=a1ptVuhTOwjrpRZSdnL%2FUKYV9MY%3D',
8: 'https://p3-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_generation/1a563d103b7496a5b9eb365ff9ea58bd_1741677409407029394.png~tplv-a9rns2rl98-image.png?rk3s=25bff839&x-expires=1773213409&x-signature=L0drmZ0N1Z2%2BjUD9g9gcP0Nn7TM%3D',
// 其他数字对应的图片链接...
};
3.2.2 棋盘初始化
初始化棋盘数组 board，并调用 addRandomTile() 函数在棋盘上随机生成两个初始卡片。
javascript
let board = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
];
addRandomTile();
addRandomTile();
createBoard();
3.2.3 卡片移动和合并
实现了 moveLeft()、moveRight()、moveUp() 和 moveDown() 四个函数，用于处理键盘方向键事件，控制卡片的移动和合并。在移动过程中，调用 mergeTiles() 函数合并相邻且数值相同的卡片。
javascript
function moveLeft() {
let moved = false;
for (let i = 0; i < 4; i++) {
const oldRow = [...board[i]];
board[i] = mergeTiles(board[i]);
if (oldRow.join(',')!== board[i].join(',')) {
moved = true;
}
}
if (moved) {
addRandomTile();
}
updateScore();
createBoard();
}
function mergeTiles(row) {
let newRow = row.filter(tile => tile!== 0);
for (let i = 0; i < newRow.length - 1; i++) {
if (newRow[i] === newRow[i + 1]) {
newRow[i] *= 2;
score += newRow[i];
if (newRow[i] === 2048) {
showWinModal();
}
newRow[i + 1] = 0;
}
}
newRow = newRow.filter(tile => tile!== 0);
while (newRow.length < 4) {
newRow.push(0);
}
return newRow;
}
3.2.4 得分和胜利提示
使用 score 变量记录当前得分，highScore 变量记录最高分，并将最高分存储在浏览器的本地存储中。当合并出 2048 时，调用 showWinModal() 函数显示胜利提示模态框。
javascript
function showWinModal() {
winModal.style.display = 'flex';
}
function closeWinModal() {
winModal.style.display = 'none';
}
function updateScore() {
if (score > highScore) {
highScore = score;
highScoreElement.textContent = `最高分: ${highScore}`;
localStorage.setItem('highScore', highScore);
}
scoreElement.textContent = `得分: ${score}`;
}
四、项目运行
将上述代码保存为一个 HTML 文件，然后在浏览器中打开该文件，即可开始玩这个可爱风格的 2048 游戏。使用键盘方向键（上、下、左、右）控制卡片移动，尝试合并出 2048，挑战自己的最高分。
五、总结
通过这个项目，我们学习了如何使用 HTML、CSS 和 JavaScript 实现一个简单而有趣的 2048 游戏。从界面设计到游戏逻辑的实现，每个步骤都展示了前端开发的基本技巧和方法。同时，项目中使用的响应式布局和图片替代数字的设计，也为游戏增添了更多的趣味性和吸引力。希望这个项目能为你带来启发，让你在前端开发的道路上不断探索和进步。
以上就是关于这个可爱风格 2048 游戏项目的详细介绍，你可以根据自己的需求对代码进行修改和扩展，开发出更加个性化的游戏。
