GLM-5.1 在「2048 游戏」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：2048 游戏
  • 测试类型：网页生成
  • 评测维度：游戏开发

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名资深前端开发专家，擅长使用原生 HTML、CSS 和 JavaScript 构建完整的 Web 应用。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，可直接在浏览器中运行，无需任何外部依赖。 2. 严禁使用省略号、注释占位符或「此处省略」等方式截断代码，必须输出完整可运行的代码。 3. 优先保证核心游戏逻辑的正确性：矩阵移动、方块合并、随机生成、胜负判定均须无 Bug。 4. 界面需简洁美观，不同数值的方块使用不同背景色加以区分，数字居中显示。 5. 代码结构清晰，HTML/CSS/JS 各司其职，变量与函数命名具有可读性。

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

请生成一个完整的 2048 游戏，所有代码（HTML、CSS、JavaScript）必须写在同一个 HTML 文件中，可直接在浏览器中独立运行。 ## 核心游戏逻辑（必须正确实现） 1. **游戏网格**：4×4 的方块网格，初始时随机放置 2 个方块（值为 2 或 4）。 2. **方向键控制**：监听键盘方向键（↑↓←→），按下后所有方块向对应方向滑动到底。 3. **合并规则**：同一行/列中，相邻且数值相同的方块碰撞后合并为一个（值翻倍）；每个方块在一次移动中只能参与一次合并。 4. **新方块生成**：每次有效移动（网格状态发生变化）后，在随机空格处生成一个新方块（90% 概率为 2，10% 概率为 4）。 5. **分数计算**：每次合并时，将合并后的方块数值累加到当前分数并实时显示。 6. **游戏结束检测**：当网格填满且不存在任何可合并的相邻方块时，显示「Game Over」提示。 7. **重新开始**：提供「New Game」按钮，点击后重置网格、分数，重新开始游戏。 ## 视觉要求 - 不同数值的方块使用不同背景色，参考配色方案： - 2：#eee4da，4：#ede0c8，8：#f2b179，16：#f59563 - 32：#f67c5f，64：#f65e3b，128：#edcf72，256：#edcc61 - 512：#edc850，1024：#edc53f，2048：#edc22e（金色） - 超过 2048 的方块可统一使用金色或更深色调 - 方块内数字居中显示，数值较大时字号适当缩小以防溢出 - 整体界面简洁美观，网格有明显的背景色与间距 - 页面顶部显示游戏标题「2048」、当前分数标签与分数值、「New Game」按钮 请直接输出完整的 HTML 代码，不要附加任何解释文字。

任务要求

AI 模型需要满足以下要求：

  1. 游戏核心逻辑正确：方块移动方向准确，合并规则严格（同一次移动中每块只合并一次），有效移动后必定生成新方块，无效移动（网格无变化）不生成新方块。
  2. 分数与游戏结束检测正确：合并时分数实时累加，网格填满且无可合并相邻方块时正确触发 Game Over 提示，重新开始按钮可完整重置游戏状态。
  3. 方块颜色区分明显：至少为 2、4、8、16、32、64、128、256、512、1024、2048 这 11 个数值分别设置不同背景色，2048 使用金色系，视觉上有清晰的冷暖/深浅渐变。
  4. 界面布局合理美观：网格居中展示，方块间距均匀，数字在方块内水平垂直居中，大数值时字号自适应缩小，整体无明显错位或溢出。
  5. 代码完整可运行：单个 HTML 文件包含全部 HTML/CSS/JS，无外部依赖，在现代浏览器中直接打开即可正常游玩，无控制台报错。

评测结果

综合得分

该模型在此用例的得分为：95.5 分（满分 100 分），已通过

基础难度评测结果

  • 得分：95.5 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 2048 /* 重置与全局变量 */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #faf8ef; --grid-bg: #bbada0; --cell-bg: rgba(238, 228, 218, 0.35); --text-dark: #776e65; --text-light: #f9f6f2; --accent: #8f7a66; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--text-dark); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; user-select: none; -webkit-user-select: none; } /* 背景装饰光晕 */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 20% 10%, rgba(237, 194, 46, 0.13) 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(246, 124, 95, 0.09) 0%, transparent 50%), radial-gradient(ellipse at 60% 40%, rgba(242, 177, 121, 0.07) 0%, transparent 40%); pointer-events: none; z-index: -1; animation: bg-pulse 8s ease-in-out infinite alternate; } @keyframes bg-pulse { 0% { opacity: 0.7; } 100% { opacity: 1; } } /* 游戏容器 */ .game-container { width: 90vw; max-width: 480px; } /* 头部区域 */ .header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; } .title { font-size: 72px; font-weight: 900; color: var(--text-dark); line-height: 1; letter-spacing: -2px; } .scores { display: flex; gap: 6px; } .score-box { position: relative; background: var(--grid-bg); border-radius: 6px; padding: 8px 16px; text-align: center; min-width: 80px; } .score-label { display: block; font-size: 11px; font-weight: 700; color: rgba(238, 228, 218, 0.7); text-transform: uppercase; letter-spacing: 1px; } .score-value { display: block; font-size: 22px; font-weight: 700; color: white; } .score-bump { animation: score-bump 0.2s ease-out; } @keyframes score-bump { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } } /* 分数浮动提示 */ .score-popup { position: absolute; top: -5px; left: 50%; transform:...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个高质量的 2048 游戏实现。核心游戏逻辑严谨正确，完整实现了方块移动、合并规则、新方块生成、分数计算和游戏结束检测等所有必需功能。视觉设计精美，配色方案完全符合需求，并额外提供了丰富的动画效果和交互反馈。代码结构清晰，可读性强，支持多种输入方式（键盘、触摸），具备响应式适配和无障碍特性。唯一可改进之处是可以添加 2048 胜利提示，以及使用现代 JavaScript 语法（let/const）。整体而言，这是一个功能完备、体验优秀、代码质量高的作品。 【GEMINI】这是一个近乎完美的 2048 游戏实现。它不仅完全满足了所有功能性要求和视觉要求，还在交互细节（如动画效果、触摸支持、最高分存储）上做了显著增强。代码质量极高，可读性强，是一个优秀的单文件 Web 应用示例。 【KIMI】这是一个高质量的2048游戏实现，核心逻辑严谨无误，合并规则、移动判定、分数计算和游戏结束检测均正确实现。视觉表现超出基本要求，动画效果和交互反馈丰富，响应式设计和无障碍考虑周到。代码结构清晰完整，可直接运行。主要改进空间在于添加2048胜利判定提示，以及优化代码的现代性（使用ES6+语法）。整体属于优秀水平的实现。

进阶难度评测结果

  • 得分：92.2 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 2048 :root { --bg: #1c1917; --fg: #fafaf9; --muted: #a8a29e; --accent: #f59e0b; --card: #292524; --border: #44403c; --board-size: min(460px, calc(100vw - 32px)); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Space Grotesk', sans-serif; background: var(--bg); background-image: radial-gradient(ellipse at 25% 0%, rgba(245,158,11,0.07) 0%, transparent 50%), radial-gradient(ellipse at 75% 100%, rgba(220,38,38,0.04) 0%, transparent 50%); color: var(--fg); min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none; overflow: hidden; } /* ===== 容器 ===== */ .container { width: var(--board-size); max-width: 100%; padding: 0 16px; } /* ===== 头部 ===== */ .header { margin-bottom: 16px; } .title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .title-row h1 { font-size: clamp(40px, 10vw, 56px); font-weight: 700; letter-spacing: -2px; color: var(--accent); line-height: 1; } .scores { display: flex; gap: 8px; } .score-box { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 16px; text-align: center; min-width: 72px; position: relative; } .score-label { display: block; font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; } .score-value { display: block; font-size: 22px; font-weight: 700; color: var(--fg); line-height: 1.3; } .score-gain { position: absolute; top: -4px; right: 8px; color: var(--accent); font-weight: 700; font-size: 16px; pointer-events: none; animation: score-float 700ms ease-out forwards; } @keyframes score-float { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-28px); } } /* ===== 按钮 ===== */ .btn-row { display: flex; gap: 8px; } .btn { flex: 1; padding: 10px 0; border: 1px solid var(--border); border-radius: 8px;...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个功能完整、实现质量较高的 2048 游戏。核心游戏逻辑严谨准确，动画流畅自然，多端交互支持完善，音效通过 Web Audio API 完整实现，代码结构清晰模块化。主要扣分点在于引用了外部字体资源（Google Fonts），这直接违反了题目「严禁引用任何外部资源（CDN、图片、音频文件等）」的明确要求，虽然不影响游戏核心功能但属于规范性重大缺陷。其他方面表现优秀：合并算法正确避免重复合并，撤销功能完整，响应式布局适配良好，胜利/失败交互流程完整。若移除外部字体依赖并使用系统字体栈，该实现可达到优秀水平。 【GEMINI】这是一个高质量的 2048 游戏实现。不仅完美达成了所有基础和进阶功能要求，还在音效合成和动画细节上展现了专业水准。代码逻辑严密，处理了移动端适配、本地存储和复杂的撤销逻辑，界面视觉设计也非常现代美观。除了极细微的外部字体引用外，基本无可挑剔。 【KIMI】该实现是一个高质量的2048游戏，核心逻辑严谨，动画系统精巧，音效设计用心。主要扣分点在于违反了'严禁外部资源'的硬性要求（引入了Google Fonts），以及撤销状态管理中的细节瑕疵（hasWon未重置）。整体而言，若去除外部字体依赖，该代码几乎可直接作为生产级2048游戏使用。

困难难度评测结果

  • 得分：82.7 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 高级 2048 - AI 自动求解版 :root { --bg: #1a1a2e; --fg: #e94560; --card: #16213e; --border: #0f3460; --text: #eaeaea; --muted: #8a8a9a; --accent: #e94560; --grid-bg: #0f3460; --cell-bg: #1a1a40; } * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); color: var(--text); display: flex; flex-direction: column; align-items: center; min-height: 100vh; overflow-x: hidden; } h1 { margin: 20px 0 10px; font-size: 2.5rem; color: var(--fg); text-shadow: 0 0 10px rgba(233,69,96,0.5); } .dashboard { display: flex; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; justify-content: center; } .score-box { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 20px; text-align: center; min-width: 100px; } .score-box label { display: block; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; } .score-box span { font-size: 1.5rem; font-weight: bold; color: var(--fg); } .controls { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; justify-content: center; } .btn { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; } .btn:hover { background: var(--border); } .btn.active { background: var(--fg); color: #fff; border-color: var(--fg); } .game-area { position: relative; margin-bottom: 20px; } .grid-container { position: relative; background: var(--grid-bg); border-radius: 8px; box-shadow: 0 0 20px rgba(233,69,96,0.2); } .grid-bg { display: grid; gap: 8px; padding: 8px; } .cell-bg { background: var(--cell-bg); border-radius: 4px; } .tile-container { position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; } .tile { position: absolute; display: flex; justify-content: center; align-items: center; font-weight: bold; border-radius: 4px; transition: top 150ms ease, left 150ms ease;...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现高质量完成了高级 2048 游戏的所有核心要求。游戏逻辑严谨，AI Expectimax 算法通过 Web Worker 实现异步计算，有效避免 UI 卡顿。粒子特效系统、CSS 3D 动画、音频合成均完整实现且无外部依赖。代码结构清晰，模块职责分离良好，可独立运行。主要不足：屏幕震动触发条件与需求描述不符，背景音乐缺少音量调节滑块，tile 管理逻辑略显复杂。整体而言，这是一个功能完整、体验流畅、技术实现扎实的作品，达到了高级 Web 游戏开发的标准。 【GEMINI】这是一个高质量的 2048 游戏实现。它不仅满足了所有进阶功能要求，还在技术实现上展现了极高的素养，特别是通过 Web Worker 优化 AI 性能和 Web Audio API 合成背景音乐，体现了深厚的前端功底。游戏体验流畅，视觉特效丰富，回放和撤销功能逻辑严密，是一个非常优秀的 AI 生成案例。 【KIMI】该实现作为一个2048游戏的基础框架存在，但核心游戏逻辑的正确性严重不足，移动合并算法、tile状态管理、方向映射等关键部分均有缺陷，导致实际运行中会出现方块位置错乱、合并异常等问题。AI虽然使用了Web Worker避免UI卡顿，但Expectimax算法实现不完整（采样简化、评估函数维度缺失），且与主线程的异步交互存在状态同步风险。视觉特效和音频系统有基本覆盖但细节粗糙，回放功能逻辑错误。代码架构上缺乏严谨的状态管理，多处存在运行时错误隐患。整体处于勉强可运行但体验较差的水平，需要大幅修复核心逻辑才能满足生产要求。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%