Gobangゲームを実現するためのjsキャンバス

この記事では、Gobangゲームを実装するためのキャンバスの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果

アイデア

canvansはチェス盤を描き、描くときに端にチェスの駒のためのスペースを残します
クリックイベントをリッスンし、動きを描画して辞書に記録します
勝敗判定：4方向に十分な連続ピースがあるか確認

コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>ym</title>
  <スタイル>
    キャンバス {
      表示: ブロック;
      マージン: 0 自動;
      境界: 0
    }

    。結果 {
      テキスト配置: 中央;
    }
    ボタン{
      表示: ブロック;
      マージン: 0 自動;
      パディング: 4px 20px;
      境界線:0;
      色: #fff;
      アウトライン: なし;
      境界線の半径: 3px;
      背景: #43a6ff
    }
    ボタン:ホバー{
      フォントの太さ: 太字;
      カーソル: ポインタ;
    }
  </スタイル>
</head>
<本文>
<キャンバスid="cv" 幅="200px" 高さ="200px"></キャンバス>
<p class="result"></p>
<button onclick="loadPanel(400, 400,30,13)">更新</button>
<スクリプト>

  パネルをロードします(400, 400,30,13);

  /**
   * 1) クリックして駒を配置し、プレイヤーを切り替えます* 2) 駒の現在の位置に基づいて、「米」の形状を使用して、5つ以上の連続した駒を形成できるかどうかを判断します* @param w チェス盤の幅* @param h チェス盤の高さ* @param cs グリッドサイズ* @param ps チェス駒の半径*/
  関数loadPanel(w, h, cs, ps) {
    i、j、k とします。
    let chks = [[1, 0], [0, 1], [1, 1], [1, -1]]; // 水平、垂直、斜め下向き、斜め上向き let successNum = 5; // 勝利基準 let resultEl = document.querySelector('.result');

    //1) チェス盤を描画します。エッジはチェスの駒の半径で分離する必要があります。 cs = cs || 16; // デフォルトのグリッドの幅と高さ ps = ps || 4; // チェスの駒の半径 h = h || w; // デフォルトでは高さは幅と同じです。 let el = document.getElementById('cv');
    el.setAttribute('幅', w + 'px');
    el.setAttribute('height', h + 'px');
    コンテキストを el.getContext("2d");
    // チェス盤の分割を計算し、切り捨てます。let splitX = ~~((w - 2 * ps) / cs), splitY = ~~((h - 2 * ps) / cs);

    // 辞書ストレージを使用してピースの位置を初期化します。これは配列よりも単純で、メモリ使用量を削減します。let Pieces = {};
    // ループ線描画 context.translate(ps, ps);
    コンテキスト.beginPath();
    コンテキスト.strokeStyle = '#000';
    //垂直線 for (i = 0; i < splitX + 1; i++) {
      コンテキストを cs * i, 0 に移動します。
      コンテキストの行をcs*i、splitY*cs*iに分割します。
      コンテキスト.stroke();
    }
    //水平線 for (j = 0; j < splitY + 1; j++) {
      コンテキストを0に移動する。
      context.lineTo(cs* を分割し、cs* j);
      コンテキスト.stroke();
    }
    コンテキスト.closePath();

    ユーザー = 0、色 = ['#000'、'#fefefe'] とします。
    el.addEventListener('click', 関数(e) {
      x = e.offsetXとします。
        y = e.offsetY、
        //移動範囲を計算する rx = ~~((x - ps) / cs) + (((x - ps) % cs <= cs / 2) ? 0 : 1),
        ry = ~~((y - ps) / cs) + (((y - ps) % cs <= cs / 2) ? 0 : 1);
      //チェスの駒を描画しますcontext.beginPath();
      context.arc(cs * rx, cs * ry, ps, 2 * Math.PI, false);
      context.fillStyle = colors[ユーザー];
      コンテキスト.strokeStyle = '#000';
      user ? user = 0 : user = 1; // プレーヤーを切り替えます context.fill();
      コンテキスト.stroke();
      コンテキスト.closePath();

      //チェスの駒の位置を記録する let piece = Pieces[rx + '-' + ry] = user;

      //M 字型の計算結果。現在のチェスの位置を使用して、特定の方向に 5 つの連続した同一のチェスの駒があるかどうかを計算します。for (j = 0; j < chks.length; j++) {
        num = 1、chk = chks[j]とします。
        (i = 1; i <= 4; i++) の場合 {
          （ピース[（rx + chk[0] * i）+ '-' + （ry + chk[1] * i）] == ピース）の場合{
            数値++
          } それ以外 {
            (i = -1; i >= -4; i--) の場合 {
              （ピース[（rx + chk[0] * i）+ '-' + （ry + chk[1] * i）] == ピース）の場合{
                数値++
              }
            }
            壊す
          }
        }
        if (num == 成功数) {
          resultEl.innerHTML = ['white', 'black'][user] + 'Fangが勝ちます';
          壊す;
        }
      }
    })
  }
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: