JS Gomoku

Gomoku by JavaScript.

by Tinytsunami

HTML

<div id="demo">
  <canvas></canvas>
</div>

CSS

body {
  color: #ffffff;
  background: #20262e;
  font-family: monospace, sans-serif;
}
canvas {
  background: #AA9966;
  border: solid 1px #000;
}

JavaScript

(function(){
  /* HTML DOM */
  const demo = document.getElementById("demo");                              							// 取得根元素
  const canvas = demo.getElementsByTagName("canvas")[0];                              		// 取得畫布元素
  const context = canvas.getContext("2d");                                                // 取得繪畫物件

  /* 常數 */
  const CONNECT = 5;                                                                      // 取勝的連珠數量
  const N = 19;                                                                           // 棋盤大小
  const EMPTY = 0;                                                                        // 定義棋盤的空值
  const WHITE = 1;                                                                        // 定義棋盤白子的值
  const BLACK = 2;                                                                        // 定義棋盤黑子的值
  const BLOCK = 24;                                                                       // 每格的大小
  const MARGIN = 15;                                                                      // 棋盤外邊框的大小
  const TEXT = 12;                                                                        // 棋盤下方顯示文字區域的大小
  const WIDTH = (N - 1) * BLOCK + MARGIN * 2;                                             // 畫布寬度
  const HEIGHT = (N - 1) * BLOCK + MARGIN * 2 + TEXT;                                     // 畫布高度

  /* 變數 */
  let board = null;                                                                       // 二維棋盤
  let player = null;                                                                      // 玩家棋的顏色
  let computer = null;                                                                    // 電腦棋的顏色
  let now = null;                                                                         // 目前是哪方落子
  let end = null;                                                                         // 遊戲結束的旗標

  /* 畫布初始化 */
  canvas.width = WIDTH;
  canvas.height = HEIGHT;

  /* 根據棋子回傳顏色 */
  let color = function(c) {
    if(c == WHITE)               ...