赛博方块消除AI · Claude 3.5

核心玩法循环与机制

Block Grid Classic 是一款轻松的益智游戏，玩家需要在 8×8 的网格上策略性地摆放方块，消除行列并最大化得分。

逐帧玩法

1. 玩家看到屏幕底部有三个固定形状的方块
2. 玩家拖动其中一个方块并将其放置到网格上（方块不能旋转）
3. 当某一整行或整列被填满时，会自动消除并伴随令人满足的动画
4. 玩家因消除而获得分数（同时消除多行/列可获得更多分数）
5. 放置完全部三个方块后，会出现三个新方块
6. 循环往复

进程与吸引力

• 得分系统：
  • 单行消除：100 分
  • 双消（一次消除 2 行）：300 分（每行 150 分）
  • 三消：600 分（每行 200 分）
  • 四消：1000 分（每行 250 分）
  • 连消倍率：在不放置无法消除的方块的前提下，连续消除会提升得分
• 最高分：玩家努力打破自己的个人最佳纪录
• 策略深度：提前规划连消机会并管理有限的空间

胜负条件

• 无胜利条件：无尽玩法
• 失败条件：当三个可用方块都无法放置到网格上任何位置时，游戏结束
• 游戏结束界面：显示最终得分和最高分，并提供重新开始按钮

吸引力所在

• 无时间压力：玩家可以随心所欲地思考
• 策略规划：在即时消除与铺垫未来连消之间取得平衡
• 令人满足的反馈：消除动画和得分弹窗奖励出色的操作
• "再来一局"效应：快速的对局配合清晰的提升路径

起步范围

第一个版本将实现一套完整、精致的核心体验：

必备（第一版）：

• 视觉设计简洁的 8×8 网格
• 具有 7 种经典方块形状的方块生成系统（1×1、2×1、3×1、2×2、L 形、T 形等）
• 底部始终提供三个方块
• 拖放式放置（触摸和鼠标）
• 带平滑动画的行列消除
• 带连消倍率的得分系统
• 最高分持久化保存（使用 window.gameConfig）
• 游戏结束判定与重新开始
• 带得分显示的简洁极简界面

未来增强（后续版本）：

• 更多方块形状
• 道具或特殊方块
• 每日挑战
• 配色主题
• 音效开关
• 撤销上一步
• 提示系统

游戏视角

固定屏幕视角，采用俯视 8×8 网格的视图。整个游戏在一屏内完成，无需滚动。

游戏世界与关卡设计

布局（720×1280 竖屏）

• 顶部区域（0-200px）：得分显示与游戏信息
  • 当前得分（大号、醒目）
  • 最高分（较小、次要）
  • 连消指示器（连消时出现）
• 中部区域（200-920px）：8×8 游戏网格（640×640px 居中）
  • 每个网格单元格为 80×80px
  • 单元格之间有清晰的边框
  • 已放置方块带有微妙的阴影/景深
  • 对有效/无效放置提供清晰的视觉反馈
• 底部区域（920-1280px）：方块预览区
  • 三个方块水平排列显示
  • 每个方块在各自的容器中（约 200×200px 区域）
  • 方块可从该区域拖出

网格设计

• 由等大单元格组成的 8×8 网格
• 中性背景色（浅灰或米白）
• 微妙的网格线以增强清晰度
• 已放置方块使用带轻微渐变/阴影的纯色
• 消除动画：淡出并伴随粒子效果

方块形状（7 种标准形状）

所有方块由 1-5 个单元格以固定排列组成：

1. 单格：1×1（1 个单元格）
2. 双连：2×1（水平 2 个单元格）
3. 三连：3×1（水平 3 个单元格）
4. 小方块：2×2（4 个单元格）
5. L 形：呈 L 形排列的 3 个单元格
6. T 形：呈 T 形排列的 3 个单元格
7. 长条：4×1 或 5×1（水平 4-5 个单元格）

每种方块形状采用一套简洁悦目的配色中的不同颜色。

编辑模式设计

编辑模式允许玩家在保持核心玩法完整性的同时自定义游戏体验。

可编辑属性

视觉自定义：

• 网格颜色：
  • 背景色（默认：浅灰 #F5F5F5）
  • 网格线颜色（默认：中灰 #CCCCCC）
  • 约束：必须保持足够的对比度
• 方块颜色：
  • 7 种方块类型的配色
  • 默认：简洁、区分度高的颜色（蓝、绿、红、黄、紫、橙、粉）
  • 约束：各颜色之间必须在视觉上有明显区分
• 界面主题：
  • 得分文字颜色
  • 背景色
  • 约束：文字必须清晰可读

玩法参数：

• 得分倍率：
  • 每行基础分（默认：100）
  • 连消倍率增幅（默认：每级连消 1.5 倍）
  • 最大连消等级（默认：5）
  • 约束：基础分取值 50-500，倍率取值 1.0-3.0
• 方块分布：
  • 每种方块形状的概率权重
  • 默认：所有形状等概率
  • 约束：所有权重必须为正数

难度调整：

• 网格尺寸：
  • 选项：6×6、7×7、8×8、9×9、10×10
  • 默认：8×8
  • 约束：必须介于 6 到 10 之间
• 每回合方块数：
  • 提供的方块数量（默认：3）
  • 约束：2-4 个方块

配置结构

window.gameConfig = {
  gridSize: 8,
  blocksPerTurn: 3,
  colors: {
    gridBackground: "#F5F5F5",
    gridLines: "#CCCCCC",
    blocks: ["#4A90E2", "#50C878", "#E74C3C", "#F39C12", "#9B59B6", "#FF6B6B", "#FF69B4"]
  },
  scoring: {
    baseScore: 100,
    comboMultiplier: 1.5,
    maxComboLevel: 5
  },
  blockWeights: {
    single: 1,
    domino: 1,
    trio: 1,
    smallSquare: 1,
    lShape: 1,
    tShape: 1,
    longBar: 1
  },
  highScore: 0
}

操作设计

移动端（触摸）操作

• 拖放：
  • 触摸预览区中的一个方块以拾取它
  • 视觉反馈：方块跟随手指，略微放大并抬起（阴影效果）
  • 拖动到网格上方以查看放置预览（虚影轮廓）
  • 预览在有效放置时显示绿色，无效放置时显示红色
  • 松手放置（若有效）或返回预览区（若无效）
• 触摸处理：
  • 跟踪触摸 ID 以防止多点触摸之间相互干扰
  • 一次只能拖动一个方块
  • 拖动时阻止页面滚动

桌面端（鼠标/键盘）操作

• 鼠标拖放：
  • 在方块上按住以拾取它
  • 与触摸相同的视觉反馈（放大、阴影、虚影预览）
  • 松开鼠标以放置或取消
  • 光标变化以指示可拖动元素
• 无键盘操作：桌面端游戏为求简洁纯用鼠标操控

实现细节

• 拖动状态管理：
  • 跟踪：isDragging、draggedBlock、dragStartPos、currentDragPos
  • 根据拖动位置计算网格位置
  • 在吸附到的网格位置显示虚影预览
• 放置校验：
  • 检查方块形状的所有单元格是否都在网格边界内
  • 检查所有单元格是否为空
  • 提供即时的视觉反馈（绿色/红色预览）
• 平滑动画：
  • 方块拾取：以平滑过渡放大到 1.1 倍
  • 方块放置：以缓出动画吸附到网格
  • 无效放置：抖动动画并返回预览区

美术风格与视觉主题

整体风格

简洁、极简、老少咸宜的设计，适用于所有文化和年龄群体。参考现代休闲手游那种历久弥新的质感。

配色

• 背景：柔和的中性色调（米白、浅灰）
• 网格：微妙的边框，不过于突出
• 方块：明亮但不刺眼的颜色，配以轻微渐变以增强景深
  • 蓝（#4A90E2）
  • 绿（#50C878）
  • 红（#E74C3C）
  • 黄（#F39C12）
  • 紫（#9B59B6）
  • 珊瑚（#FF6B6B）
  • 粉（#FF69B4）
• 界面元素：浅色背景上的深灰文字以保证可读性
• 点缀色：金/黄色用于得分高亮和连消

视觉元素

• 方块：
  • 带微妙渐变的纯色（顶部更亮）
  • 柔和的圆角（4-6px 圆角半径）
  • 轻微的投影以增强景深
  • 简洁的几何形状
• 网格：
  • 浅色背景
  • 细而微妙的网格线
  • 轻微的内阴影以增强景深
• 特效：
  • 消除动画：柔和淡出并伴随小型粒子迸发
  • 得分弹窗：数字向上漂浮并淡出
  • 连消指示器：脉动的辉光效果
  • 无效放置：快速抖动动画

字体排印

• 得分：大号、加粗、无衬线字体（60-80px）
• 最高分：中号、常规字重（24-30px）
• 界面文字：简洁易读的无衬线字体（18-24px）

素材策略

• 代码渲染：网格、方块、界面元素（使用 CSS/Canvas）
• 生成素材：
  • 背景纹理（可选，微妙）
  • 消除时的粒子效果
  • 游戏结束界面装饰
  • 音效