smshine/d1kt

Fork 0

Files

Shuming Liu 0e87d5546d Migrate project from typing_practiceweb

2026-05-14 16:04:14 +08:00

6.7 KiB

Raw Blame History

扫雷游戏优化更新

🎮 新增功能

1. 双键按下视觉反馈效果

功能描述: 在已揭开的数字格子上同时按下左右键时，周围未揭开且未插旗的格子会显示按下效果，完全模拟经典Windows扫雷的交互体验。

实现细节:

✅ 按下效果：格子变为浅灰色，边框呈凹陷状态
✅ 轻微缩放：格子缩小至95%，增强按下感
✅ 平滑过渡：0.05秒的CSS过渡动画
✅ 实时更新：鼠标移动到不同格子时，按下效果随之变化

视觉效果:

正常状态: 深灰色背景 (#bbb)
按下状态: 浅灰色背景 (#ddd) + 凹陷边框 + 轻微缩小

2. 空格键快捷操作

功能描述: 按下空格键相当于在鼠标当前位置同时按下左右键，执行弦操作（chord reveal）。

使用场景:

左手鼠标移动和插旗
右手按空格键快速揭开格子
双手配合，大幅提升游戏效率

实现特性:

✅ 实时追踪鼠标悬停位置
✅ 只在游戏进行中且非首次点击时生效
✅ 防止页面滚动（preventDefault）
✅ 与鼠标双键操作逻辑完全一致

🔧 技术实现

状态管理

// 新增状态
const [pressedCells, setPressedCells] = useState<Set<string>>(new Set());
const [hoverCell, setHoverCell] = useState<{ row: number; col: number } | null>(null);

核心函数

1. 更新按下效果

const updatePressedCells = (row: number, col: number) => {
  // 只有已揭开且有数字的格子才显示按下效果
  if (!cell.isRevealed || cell.neighborMines === 0) return;
  
  // 收集周围未揭开且未插旗的格子
  const pressed = new Set<string>();
  for (let dr = -1; dr <= 1; dr++) {
    for (let dc = -1; dc <= 1; dc++) {
      // 添加符合条件的格子到pressed集合
    }
  }
  setPressedCells(pressed);
};

2. 格子样式增强

const getCellStyle = (cell: Cell, row: number, col: number) => {
  const isPressed = pressedCells.has(`${row},${col}`);
  
  if (isPressed) {
    return {
      ...baseStyle,
      backgroundColor: '#ddd',
      borderStyle: 'inset',
      transform: 'scale(0.95)',
      transition: 'all 0.05s ease'
    };
  }
};

3. 空格键事件监听

useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.code === 'Space' && gameStatus === 'playing' && hoverCell) {
      e.preventDefault();
      chordReveal(hoverCell.row, hoverCell.col);
    }
  };
  
  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, [gameStatus, hoverCell, chordReveal]);

事件处理优化

鼠标事件增强

<Box
  onMouseDown={(e) => handleMouseDown(rowIndex, colIndex, e)}
  onMouseUp={(e) => handleMouseUp(rowIndex, colIndex, e)}
  onMouseEnter={() => {
    setHoverCell({ row: rowIndex, col: colIndex });
    // 双键按下时更新按下效果
    if (isMouseDown.left && isMouseDown.right) {
      updatePressedCells(rowIndex, colIndex);
    }
  }}
  onMouseLeave={() => {
    // 清除按下效果
    setPressedCells(new Set());
  }}
  onContextMenu={(e) => {
    e.preventDefault();
    toggleFlag(rowIndex, colIndex, e);
  }}
/>

📊 用户体验提升

操作效率对比

操作方式	传统方式	优化后	提升
揭开周围格子	逐个左键点击	双键/空格一键完成	⚡ 10倍+
双手配合	仅鼠标操作	左手鼠标 + 右手空格	🚀 更流畅
视觉反馈	无预览	实时按下效果	👁️ 更直观

游戏体验改进

更接近经典扫雷
- 完全模拟Windows扫雷的按下效果
- 相同的交互逻辑和视觉反馈
减少手指疲劳
- 空格键代替双键点击
- 大键位，更容易按压
支持多种操作风格
- 纯鼠标操作：传统双键
- 键鼠混合：空格键辅助
- 自由选择最舒适的方式

🎯 使用指南

基本操作

鼠标双键操作

在数字格子上 → 同时按下左右键 → 看到周围格子按下效果 → 释放 → 自动揭开

空格键快捷操作

鼠标移到数字格子 → 按空格键 → 自动揭开周围格子

组合使用建议

左手: 控制鼠标移动和插旗（右键）
右手: 按空格键快速揭开

高级技巧

快速扫描
- 鼠标快速移动到各个数字格
- 空格键连续按压
- 大幅提升游戏速度
精确控制
- 在不确定时使用双键
- 看到按下效果后决定是否继续
- 避免误操作
节奏控制
- 插旗用右键（左手）
- 揭开用空格（右手）
- 形成稳定的操作节奏

🐛 边界情况处理

1. 鼠标离开游戏区域

✅ 自动清除按下效果
✅ 重置鼠标状态
✅ 防止状态残留

2. 游戏状态变化

✅ 游戏结束时禁用空格键
✅ 首次点击时禁用弦操作
✅ 状态检查确保安全

3. 特殊格子处理

✅ 已揭开格子：不显示按下效果
✅ 已插旗格子：不显示按下效果
✅ 数字为0的格子：不触发弦操作

📝 更新的游戏说明

新增说明内容：

• 按下空格键相当于在鼠标位置同时按下双键，方便左右手配合操作

完整说明：

左键点击揭开格子，右键点击插旗
在已揭开的数字格上同时按下左右键，如果旗帜数量等于数字，自动揭开周围格子
按下空格键相当于在鼠标位置同时按下双键，方便左右手配合操作 ⭐ 新增
数字表示周围8个格子中地雷的数量
揭开所有非地雷格子即可获胜
登录后可保存游戏记录并查看排行榜

🔄 兼容性

✅ 所有现代浏览器
✅ 不影响原有功能
✅ 可选使用，传统操作仍然有效
✅ 响应式设计，各种屏幕尺寸

🚀 性能优化

事件处理优化
- 使用 useCallback 避免重复创建函数
- Set 数据结构快速查找
- 最小化状态更新
渲染优化
- 只更新必要的格子样式
- CSS过渡动画硬件加速
- 防抖和节流（如需要）
内存管理
- 及时清理事件监听器
- 组件卸载时释放资源

📈 未来可能的优化

触摸设备支持
- 长按触发弦操作
- 双指点击支持
可配置快捷键
- 允许用户自定义快捷键
- 支持多个快捷键方案
音效反馈
- 按下时的音效
- 揭开格子的音效
视觉效果增强
- 更丰富的动画效果
- 主题皮肤支持

更新日期: 2025-10-30
版本: v1.2
新增功能: 双键按下效果 + 空格键快捷操作

6.7 KiB Raw Blame History Unescape Escape