如何使用JavaScript实现格斗游戏出招notation转换器？

核心实现思路 #

不推荐用大量if判断实现，改用映射表存储规则，后续拓展新出招时只需要新增键值对，不需要修改逻辑代码，维护成本更低。

完整示例代码 #

1. 定义规则映射表 #

// 单方向数字映射（对应格斗游戏小键盘方向标准）
const directionMap = {
  '1': 'Down Back',
  '2': 'Down',
  '3': 'Down Forward',
  '4': 'Back',
  '6': 'Forward',
  '7': 'Up Back',
  '8': 'Up',
  '9': 'Up Forward'
};

// 组合摇招映射
const motionMap = {
  '236': 'Quarter Circle Forward',
  '214': 'Quarter Circle Back',
  '623': 'Dragon Punch Forward',
  '421': 'Dragon Punch Back',
  '41236': 'Half Circle Forward',
  '63214': 'Half Circle Back'
};

// 按键对应映射
const buttonMap = {
  'H': 'B',
  'S': 'A',
  'P': 'X',
  'K': 'Y'
  // 可自行新增其他按键对应规则
};

2. 转换逻辑函数 #

function convertNotation(inputStr) {
  // 按空格拆分多个出招，兼容多输入场景
  const inputList = inputStr.trim().split(/\s+/);
  const resultList = [];

  inputList.forEach(input => {
    // 正则拆分数字部分和按键部分
    const matchResult = input.match(/^(\d+)([A-Za-z]+)$/);
    if (!matchResult) {
      resultList.push(`${input}：格式不识别`);
      return;
    }
    const [, numPart, buttonPart] = matchResult;
    
    // 优先匹配组合摇招，匹配失败再匹配单方向
    const motion = motionMap[numPart] || directionMap[numPart] || '未知方向';
    // 匹配按键，不区分大小写
    const button = buttonMap[buttonPart.toUpperCase()] || '未知按键';

    resultList.push(`${motion} ${button}`);
  });

  // 逐行返回结果
  return resultList.join('\n');
}

3. 页面交互绑定 #

<!-- 页面结构 -->
<textarea id="inputArea" rows="5" placeholder="输入出招记号，例如：2H 6H 236S"></textarea>
<div id="outputArea" style="margin-top: 16px; white-space: pre-line;"></div>

<script>
// 此处放入前面定义的映射表和转换函数
const inputEl = document.getElementById('inputArea');
const outputEl = document.getElementById('outputArea');

// 实时监听输入转换
inputEl.addEventListener('input', () => {
  outputEl.textContent = convertNotation(inputEl.value);
});
</script>

拓展建议 #

• 需要支持更多出招规则时，直接往三个映射表中新增对应键值对即可
• 如果要支持带加号的连招格式比如2H+6H，修改正则匹配规则，拆分多个指令后拼接输出即可
• 可新增配置面板，让用户自行修改按键对应关系

内容的提问来源于stack exchange，提问作者Chybo