2048小游戏
代码模式怎么用？在通义官网点击代码模式，在对话框用大白话描述你的需求，通义会自动生成代码及应用预览。
请你创建一个经典的2048游戏实现，使用HTML、CSS和JavaScript编写，集成在一个html文件中。该游戏通过一个4x4的网格来组织数字块，玩家的目标是通过合并相同的数字块，最终达到2048的数字。游戏具有基本的交互逻辑，支持通过按钮控制四个方向（上、下、左、右）移动块。
1. HTML 结构
<!DOCTYPE html>: 定义文档类型为HTML5。
<html lang="en">: 定义文档语言为英语。
<head>: 包含网页的元信息，如字符集、视口设置和标题。
meta charset="UTF-8": 使用UTF-8字符编码。
meta name="viewport" content="width=device-width, initial-scale=1.0": 适配移动设备。
<title>: 网页标题，显示为“2048 Game”。
<body>: 网页主体内容，包括一个游戏界面。
.container：包含标题、网格和控制按钮。
<h1>：游戏标题，字体颜色为#333，大小1.5em。
.grid：游戏的主网格，包含16个格子（4x4），使用CSS Grid布局。
.button-container：包含四个按钮用于控制游戏的移动方向。
2. CSS 样式
字体与布局：
使用 avenir 字体，若不可用则使用 sans-serif。
使用Flexbox将游戏居中显示，justify-content: center 和 align-items: center 使游戏垂直水平居中，height: 100vh 确保高度占满整个视口，margin: 0 移除默认边距。
背景颜色为白色（#ffffff）。
网格样式：
.grid 使用CSS Grid布局，定义为4行4列的网格，每个格子的宽高为60px，格子之间有6px的间隙（gap: 6px），背景色为浅米色（#FFE2B5），并有12px的内边距和10px的圆角。
单元格样式：
每个 .cell 单元格的宽高为60px，使用Flexbox使内容居中显示，背景颜色默认是浅灰色（#eee），字体颜色为深灰色（#333）。
数字块根据其值改变背景色，例如：
2 的背景色为浅米色（#eee4da）。
4 的背景色为米色（#ede0c8）。
8、16、32、64 等的背景色逐渐变深，文字颜色为白色（#f9f6f2）。
最大的块 2048 背景为深黄色（#edc22e）。
按钮样式：
按钮使用橙色背景（#f57c00），鼠标悬停时背景色变浅（#fb8c00），并具有轻微放大的效果（transform: scale(1.05)）。
按钮文本颜色为白色，字体大小为10px，字体使用 avenir 字体，按钮之间有3px的间隔。
3. JavaScript 逻辑
初始化游戏：
游戏初始化时，首先在网格中随机生成两个数字块（值为2或4），然后渲染网格并展示。
添加随机方块：
addRandomTile 函数会在空白格子中随机选择一个位置生成数字块，90%的概率生成2，10%的概率生成4。
渲染网格：
render 函数遍历 grid 数组中的每个值，将其渲染为相应的单元格。若值为0，则显示为空格（.empty），否则显示相应的数字和背景色。
移动和合并逻辑：
move 函数接收一个方向参数（up, down, left, right），根据按钮的点击方向，调用合并和移动的处理逻辑。
移动时，数字块会移动并合并相同的数字，合并后数字加倍，空出的格子会被填充为0。
处理完一轮移动后，会添加一个新的随机数字块，并检查游戏是否结束。
合并数字：
mergeCells 函数接收一个数组，首先过滤掉值为0的元素，然后尝试合并相邻的相同数字，合并后数字加倍，空出的格子会被填充为0。
最后返回合并后的数组，确保数组长度为4。
检查游戏是否结束：
checkGameOver 函数检查是否有空格子或相邻的相同数字，如果没有，则返回游戏结束。
4. 交互逻辑
玩家可以点击上下左右四个按钮来控制数字块的移动。
每次移动后，新的随机块会被加入网格，更新视图。
游戏结束时，会弹出“Game Over”提示。
5. 画布和响应式设计
游戏界面使用Flexbox居中，适应不同设备屏幕的宽度和高度。
网格大小固定，4x4的格子适应不同屏幕，但每个格子的大小（60px）是固定的。