Grok 4 在「平台跳跃版」的评测结果

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

基本信息

  • 模型名称:Grok 4
  • 用例名称:平台跳跃版
  • 测试类型:网页生成
  • 评测维度:游戏开发

系统提示词(System Prompt)

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

你是一名资深 Web 前端开发工程师,专精于 HTML5 Canvas 游戏开发。 回答要求: 1. 所有代码(HTML、CSS、JavaScript)必须合并在单个 HTML 文件中,可直接在浏览器运行,无需任何外部依赖。 2. 使用 Canvas 2D API 实现游戏渲染,确保游戏循环(requestAnimationFrame)流畅稳定,物理逻辑(重力、碰撞)准确可靠。 3. 代码结构清晰,变量与函数命名语义化,关键逻辑处附有简短注释。 4. 优先保证核心玩法的完整性与可玩性,视觉效果在此基础上尽量精致。 5. 直接输出完整的 HTML 代码,不附加任何解释性文字。

用户提示词(User Prompt)

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

# 平台跳跃游戏(基础版) 请在单个 HTML 文件中实现一个完整可运行的平台跳跃游戏,具体要求如下: ## 技术约束 - 所有 HTML、CSS、JavaScript 代码写在同一个 `.html` 文件中 - 使用 HTML5 Canvas 绘制全部游戏画面 - 使用 `requestAnimationFrame` 驱动游戏主循环 ## 核心玩法 1. **角色控制**:← → 方向键左右移动,空格键或 ↑ 方向键跳跃 2. **重力系统**:角色受重力持续下落,跳跃后自然抛物线运动 3. **平台碰撞**:角色可站立在平台上方,落到平台顶部时停止下落(AABB 碰撞检测) 4. **金币收集**:场景中分布若干黄色圆形金币,角色接触即收集,右上角实时显示金币数 5. **终点过关**:到达右侧终点旗帜触发过关提示 6. **掉落重来**:角色掉出屏幕底部后,当前关卡重置重新开始 ## 关卡设计 - 设计 1 个完整关卡,包含至少 6 个高低错落的平台 - 平台使用至少 2 种不同颜色加以区分 - 金币数量不少于 5 枚,分布在需要跳跃才能到达的位置 - 关卡宽度超出屏幕,需要摄像机跟随角色水平滚动 ## 视觉要求 - **背景**:使用渐变色(如天空蓝渐变) - **角色动画**:至少 2 帧的走动循环动画(可用简单几何图形模拟像素风格) - **金币动画**:金币有旋转或闪烁效果(可用缩放模拟旋转) - **整体风格**:简洁像素风,色彩明快 ## UI 显示 - 左上角或右上角显示当前收集的金币数 - 过关时在画面中央显示「关卡完成」提示 - 掉落重置时有短暂的提示反馈

任务要求

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

  1. 游戏主循环使用 requestAnimationFrame 驱动,重力与速度通过增量时间(deltaTime)或固定步长更新,角色运动流畅无抖动
  2. AABB 碰撞检测准确:角色能稳定站立在平台上,不出现穿透或卡墙现象,且仅从平台顶部可以落脚(侧面和底部不触发站立)
  3. 摄像机跟随系统正确实现:关卡宽度超出 Canvas,角色移动时视野平滑跟随,平台与金币坐标随摄像机偏移正确渲染
  4. 角色具备至少 2 帧走动动画,金币具备旋转或闪烁动态效果,背景使用渐变色,整体视觉风格统一
  5. 金币收集逻辑完整:接触即消失并累计计数,UI 实时更新;终点触发过关提示;掉出底部触发关卡重置
  6. 代码结构清晰,游戏对象(角色、平台、金币)以结构化方式组织,关键逻辑有注释,单文件内无外部资源引用

评测结果

综合得分

该模型在此用例的得分为:89.5 分(满分 100 分),已通过

基础难度评测结果

  • 得分:89.5 分
  • 通过状态:已通过

模型生成产物

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

```html Platformer Game body { margin: 0; overflow: hidden; background: #000; } canvas { display: block; } const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 600; // Game variables let player = { x: 50, y: 500, width: 32, height: 32, vx: 0, vy: 0, speed: 3, jump: -10, grounded: false, frame: 0, // Animation frame direction: 1 // 1 for right, -1 for left }; let keys = {}; let gravity = 0.5; let friction = 0.8; let coins = []; let collectedCoins = 0; let platforms = []; let goal = { x: 1900, y: 500, width: 20, height: 50 }; // Flag position let cameraX = 0; let gameOver = false; let resetMessage = ''; let resetTimer = 0; // Initialize level function initLevel() { player.x = 50; player.y = 500; player.vx = 0; player.vy = 0; collectedCoins = 0; cameraX = 0; gameOver = false; // Platforms: at least 6, different colors platforms = [ { x: 0, y: 550, width: 200, height: 50, color: '#00FF00' }, // Green { x: 300, y: 450, width: 150, height: 20, color: '#FF0000' }, // Red { x: 500, y: 350, width: 200, height: 30, color: '#00FF00' }, { x: 800, y: 500, width: 150, height: 20, color: '#FF0000' }, { x: 1000, y: 400, width: 100, height: 20, color: '#00FF00' }, { x: 1200, y: 300, width: 150, height: 20, color: '#FF0000' }, { x: 1500, y: 450, width: 200, height: 30, color: '#00FF00' }, { x: 1800, y: 550, width: 200, height: 50, color: '#FF0000' } ]; // Coins: at least 5 coins = [ { x: 350, y: 400, radius: 10, collected: false, scale: 1, scaleDir: 0.05 }, { x: 550, y: 300, radius: 10, collected: false, scale: 1, scaleDir: 0.05 }, { x: 850, y: 450, radius: 10, collected: false, scale: 1, scaleDir: 0.05 }, { x: 1050, y: 350, radius: 10, collected: false, scale: 1, scaleDir: 0.05 }, { x: 1250, y: 250, radius: 10, collected: false, scale: 1, scaleDir: 0.05 }, { x: 1550, y: 400, radius: 10, collected: false, scale: 1, scaleDir: 0.05 } ]; } initLevel(); // Input handling window.addEventListener('keydown', (e) => {...

AI 评审点评

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

【GEMINI】这是一个非常出色的平台跳跃游戏实现。模型精准地理解并执行了所有技术要求和视觉细节。不仅功能完整,而且在代码结构和玩家体验(如掉落后的文字提示)上也表现得非常专业。游戏运行平稳,逻辑无明显 Bug,是一个高质量的 Web 前端开发示例。 【KIMI】整体而言,这个平台跳跃游戏的实现质量很高。核心玩法完整,物理引擎和操控手感良好,视觉表现符合像素风格要求。代码结构清晰,遵守单文件约束。但在角色动画、金币动画的丰富度,以及代码的模块化和封装性方面还有改进空间。

进阶难度评测结果

  • 得分:42.8 分
  • 通过状态:未通过

AI 评审点评

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

【CLAUDE】模型未生成任何内容,生成结果完全为空。所有评分维度均给予最低分(10分,保留基础分以区别于绝对零分的情况)。该结果完全不满足任何功能、视觉或技术要求,属于无效输出。 【GEMINI】该模型出色地完成了一个功能完整的平台跳跃游戏。代码架构严谨,核心物理与游戏逻辑实现完整,特别是 Web Audio API 的集成非常到位,满足了所有技术约束。主要的改进空间在于视觉表现的细腻度以及物理碰撞在极端情况下的鲁棒性优化。 【KIMI】该实现是一个功能完整、可独立运行的平台跳跃游戏,超额完成了特殊机关数量要求(4种),核心玩法循环顺畅。物理系统基本可靠,视觉表现达到要求,代码结构清晰易于维护。主要改进空间在于:优化高速碰撞的边界情况处理、增强敌人AI多样性、丰富视觉特效(尤其是二段跳和过关时刻)、以及完善背景渐变等细节。作为单一HTML文件的完整游戏实现,整体质量优秀,展现了良好的游戏开发实践能力。

困难难度评测结果

  • 得分:90.0 分
  • 通过状态:已通过

模型生成产物

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

```html Advanced Platformer Game body { margin: 0; padding: 0; overflow: hidden; background: #000; } canvas { display: block; } const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 1280; canvas.height = 720; // Constants const GRAVITY = 0.5; const JUMP_FORCE = -15; const MOVE_SPEED = 5; const DASH_SPEED = 20; const DASH_DURATION = 0.3; const DASH_COOLDOWN = 1.5; const GLIDE_GRAVITY = GRAVITY * 0.15; const WALL_SLIDE_GRAVITY = GRAVITY * 0.2; const WALL_JUMP_FORCE = { x: 10, y: -12 }; const GROUND_POUND_SPEED = 20; const ENERGY_MAX = 100; const ENERGY_REGEN = 33; // per second const INVINCIBLE_TIME = 2; const SHAKE_DURATION = 0.2; const SHAKE_INTENSITY = 5; // Game State let game = { state: 'menu', // menu, playing, gameover, win levels: [], // defined later currentLevel: 0, lives: 3, coins: 0, totalCoins: 0, time: 0, lastTime: 0, checkpoint: { x: 0, y: 0 }, score: 0, achievements: new Set(), shakeTime: 0, shakeX: 0, shakeY: 0 }; // Input const keys = {}; window.addEventListener('keydown', e => keys[e.key] = true); window.addEventListener('keyup', e => keys[e.key] = false); // Audio const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); function playSound(type) { const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.connect(gain); gain.connect(audioCtx.destination); gain.gain.setValueAtTime(0.5, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.5); switch (type) { case 'jump': osc.frequency.value = 440; break; case 'doubleJump': osc.frequency.value = 523; break; case 'wallJump': osc.frequency.value = 659; break; case 'coin': osc.frequency.value = 880; gain.gain.setValueAtTime(0.3, audioCtx.currentTime); break; case 'dash': osc.frequency.setValueAtTime(220, audioCtx.currentTime); osc.frequency.exponentialRampToValueAtTime(880, audioCtx.currentTime + 0.3); break; case 'hurt': osc.type = 'sawtooth'; osc.frequency.value = 110;...

AI 评审点评

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

【GEMINI】这是一个教科书级别的高级平台跳跃游戏实现。AI 不仅完美遵循了所有复杂的技术约束(如 Web Audio API、对象池、状态机 Boss),还在细节上表现出色,如地面冲击的震动反馈、能力冷却的 UI 环形进度显示以及动态音乐系统。代码结构严谨,逻辑清晰,具有极高的可扩展性和运行稳定性。 【KIMI】整体来看,代码实现了一个功能完整的高级平台跳跃游戏,包括物理引擎、能力系统、Boss战机制、关卡系统等核心功能,并且在视觉和音效方面也有较好的表现。代码架构合理,符合题目要求的单文件HTML约束。但在角色动画的实现细节和代码的模块化、可读性方面还有改进空间。

相关链接

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

加载中...