/Gomoku

五子棋游戏Canvas&DOM实现

Primary LanguageJavaScript

Gomoku

设计要求

  1. 用 Web 技术实现一个五子棋（不用考虑人机对战）
  2. 如果是用 DOM 实现的，换成 Canvas 实现。（需要 Dom 和 Canvas 两个版本）
  3. 实现一个悔棋的功能
  4. 实现一个撤销悔棋的功能

大致思路-模块划分

一、User Interface Element 用户界面元素

  • 棋盘
    • 黑子
    • 白子
    • 预览（黑、白）
    • 辅助文案（当前游戏赢家状态&棋权、悔棋、撤销悔棋）

二、User Interface Provide Method 接口方法

  • 根据 **Gomoku.board **更新棋盘所有棋子
  • 更新棋权文案

三、User Infterface Event 用户界面事件（用户输入）

  • 下子
  • 预览
  • 悔棋
  • 撤销悔棋

四、Core Logic 核心逻辑

  • 游戏对象 Gomoku
    • 基本数据
      • 是否游戏中状态 inGame
      • 下棋序列 setInOrder
      • 悔棋序列 undoOrder（用于支持撤销悔棋）
      • 下棋序列 setInOrder
      • 棋盘界面映射 board（用于支持视图可以直接根据 15*15 尺寸的 board 进行更新）
    • 方法
      • 落子 setIn()
      • 更新视图（棋盘落子、棋权）UI.updateBoard()
      • 重新开始游戏（更新基本数据、视图） restart()
      • 悔棋 undo()
      • 撤销悔棋 cancelUndo()
      • 获取当前棋权 getCurrentRightName() （根据基本数据 Gomoku.setInOrder，若最后一个是白的，现在肯定是黑的）
    • 通用方法
      • 判定是否允许落子 checkAllowSetIn
      • 判定落子之后是否赢了 checkIsWin

判断是否赢棋思路

  • 因为：落子到某个点之后，这个点的 - | / \ ，这4个方向联合起来有5个子就赢了
  • 尝试判定在水平方向 - 是否赢了
  • 所以：假定判断 当前落子的左侧 所有直接连接的同色 + 右侧所有直接连接的同色 >=4 即赢了。
    • 例如刚刚下到 0,2即 ： [ 0,0 ,'white' ] , [ 0,1 ,'white' ], [ 0,2 ,'white' ], [ 0,3 ,'white' ], [ 0,4 ,'white' ]
    • 那么 white 赢
  • 判定在垂直方向同理，判定在 / 和 \ 方向，同理
  • 不同方向的计算方法
    • 垂直向上：[ x-- , y]
    • 垂直向下：[x++, y ]
    • 水平向左：[ x, y--]
    • 水平向右：[ x, y++]
    • 左上方向：[x--,y--]
    • 左下方向：[x++,y++]
    • 右上方向：[x++,y--]
    • 右下方向：[x--,y++]