GobangゲームのWebバージョンを実装するためのJavaScript

GobangゲームのWebバージョンを実装するためのJavaScript

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

js を学習して 3 日目に、先生と一緒に Gobang ゲームを完了し、学習結果を記録しました。専門家が経験を共有し、批評してくれることを歓迎します。

このプログラムは主に 3 つの部分で実装されます。

1. チェス盤の描画
2. マウス操作
3. 勝敗判定

<!DOCTYPE html>
<html>
<ヘッド>
  <タイトル>
    キャンバステスト
    </タイトル>
</head>
<本文>
     <h1>キャンバス</h1>
     <キャンバスid="キャンバス"幅="400"高さ="400">
     </キャンバス>

     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

  <スクリプト>
   var canv = document.getElementById("キャンバス");
   var ctx = canv.getContext("2d");
   ctx.strokeStyle="黒";
   var 弓 = 0;

//チェス盤を描画します。
var マトリックス = [

  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                                              ];

ctx.beginPath();

(var i=0;i<19;i++){

       ctx.moveTo(10+20*i,10);
       ctx.lineTo(10+i*20,370);
       ctx.moveTo(10,20*i+10);
       ctx.lineTo(370,i*20+10);

}
 ctx.stroke();
 
 //マウス操作;
  $("#canvas").click(関数(イベント)
      {
      コンソールログ(イベント.オフセットX)


      console.log(弓);
      var 弧の位置X、弧の位置Y;
     var mtxPosX、mtxPosY;
      (var x = 0; x < 19; x ++) の場合
      {
      if((Math.abs(event.offsetX-(10+x*20)))<10)
        {
       弧の位置X = 10 + x * 20;
       mtxPosX = x;
        }
      if((Math.abs(event.offsetY-(10+x*20)))<10)
         {
        弧の位置Y=10+x*20;
        mtxPosY = x;
          }
      }

      行列[mtxPosX][mtxPosY] == 0の場合
      {
      弓=!弓;
      ctx.beginPath();
      if(弓){

      ctx.fillStyle="黒";
      ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false);
      行列[mtxPosX][mtxPosY]=1;
      }
      それ以外{
      ctx.fillStyle="白";
      ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false);
      ctx.stroke();
      行列[mtxPosX][mtxPosY]=2;
      }
      ctx.fill();
      }
      //勝敗判定を実現する var winFlag=0;
勝利フラグ==0の場合{
行列[mtxPosX-1][mtxPosY] == 行列[mtxPosX][mtxPosY]の場合
              {
               行列[mtxPosX-2][mtxPosY] == 行列[mtxPosX][mtxPosY]の場合
               {
                行列[mtxPosX-3][mtxPosY] == 行列[mtxPosX][mtxPosY]の場合
                {
                 行列[mtxPosX-4][mtxPosY] == 行列[mtxPosX][mtxPosY]の場合
                 {
                  勝利フラグ = 1;
                 }
                 それ以外
                 {
                  行列[mtxPosX+1][mtxPosY] == 行列[mtxPosX][mtxPosY]の場合
                  {
                   勝利フラグ = 1;
                  }
                  それ以外
                  {
                   勝利フラグ = 0;
                  }
                 }
                }
                それ以外
                {
                 (var w = 0; w < 2; w ++) の場合
                 {
                  if(行列[mtxPosX+w+1][mtxPosY] != 行列[mtxPosX][mtxPosY])
                  {
                   勝利フラグ = 0;
                   壊す;
                  }
                  それ以外
                  {
                   勝利フラグ = 1;
                  }
                 }
                }
               }
               それ以外
               {
                (var w = 0; w < 3; w ++) の場合
                {
                 if(行列[mtxPosX+w+1][mtxPosY] != 行列[mtxPosX][mtxPosY])
                 {
                  勝利フラグ = 0;
                  壊す;
                 }
                 それ以外
                 {
                  勝利フラグ = 1;
                 }
                }
               }
              }
              それ以外
              {
               (var w = 0; w < 4; w ++) の場合
               {
                if(行列[mtxPosX+w+1][mtxPosY] != 行列[mtxPosX][mtxPosY])
                {
                 勝利フラグ = 0;
                 壊す;
                }
                それ以外
                {
                 勝利フラグ = 1;
                }
               }
              }

行列[mtxPosX][mtxPosY-1] == 行列[mtxPosX][mtxPosY]の場合
              {
               行列[mtxPosX][mtxPosY-2] == 行列[mtxPosX][mtxPosY]の場合
               {
                行列[mtxPosX][mtxPosY-3] == 行列[mtxPosX][mtxPosY]の場合
                {
                 行列[mtxPosX][mtxPosY-4] == 行列[mtxPosX][mtxPosY]の場合
                 {
                  勝利フラグ = 1;
                 }
                 それ以外
                 {
                  行列[mtxPosX][mtxPosY+1] == 行列[mtxPosX][mtxPosY]の場合
                  {
                   勝利フラグ = 1;
                  }
                  それ以外
                  {
                   勝利フラグ = 0;
                  }
                 }
                }
                それ以外
                {
                 (var w = 0; w < 2; w ++) の場合
                 {
                  if(行列[mtxPosX][mtxPosY+w+1] != 行列[mtxPosX][mtxPosY])
                  {
                   勝利フラグ = 0;
                   壊す;
                  }
                  それ以外
                  {
                   勝利フラグ = 1;
                  }
                 }
                }
               }
               それ以外
               {
                (var w = 0; w < 3; w ++) の場合
                {
                 if(行列[mtxPosX][mtxPosY+w+1] != 行列[mtxPosX][mtxPosY])
                 {
                  勝利フラグ = 0;
                  壊す;
                 }
                 それ以外
                 {
                  勝利フラグ = 1;
                 }
                }
               }
                         }
              それ以外
              {
               (var w = 0; w < 4; w ++) の場合
               {
                if(行列[mtxPosX][mtxPosY+w+1] != 行列[mtxPosX][mtxPosY])
                {
                 勝利フラグ = 0;
                 壊す;
                }
                それ以外
                {
                 勝利フラグ = 1;
                }
               }
              }

  行列[mtxPosX-1][mtxPosY-1] == 行列[mtxPosX][mtxPosY]の場合
                {
                 行列[mtxPosX-2][mtxPosY-2] == 行列[mtxPosX][mtxPosY])
                 {
                  行列[mtxPosX-3][mtxPosY-3] == 行列[mtxPosX][mtxPosY])
                  {
                   行列[mtxPosX-4][mtxPosY-4] == 行列[mtxPosX][mtxPosY]の場合
                   {
                    勝利フラグ = 1;
                   }
                   それ以外
                   {
                    行列[mtxPosX+1][mtxPosY+1] == 行列[mtxPosX][mtxPosY]の場合
                    {
                     勝利フラグ = 1;
                    }
                    それ以外
                    {
                     勝利フラグ = 0;
                    }
                   }
                  }
                  それ以外
                  {
                   (var w = 0; w < 2; w ++) の場合
                   {
                    if(行列[mtxPosX+w+1][mtxPosY+w+1] != 行列[mtxPosX][mtxPosY])
                    {
                     勝利フラグ = 0;
                     壊す;
                    }
                    それ以外
                    {
                     勝利フラグ = 1;
                    }
                   }
                  }
                 }
                 それ以外
                 {
                  (var w = 0; w < 3; w ++) の場合
                  {
                   if(行列[mtxPosX+w+1][mtxPosY+w+1] != 行列[mtxPosX][mtxPosY])
                   {
                    勝利フラグ = 0;
                    壊す;
                   }
                   それ以外
                   {
                    勝利フラグ = 1;
                   }
                  }
                 }
                }
                それ以外
                {
                 (var w = 0; w < 4; w ++) の場合
                 {
                  if(行列[mtxPosX+w+1][mtxPosY+w+1] != 行列[mtxPosX][mtxPosY])
                  {
                   勝利フラグ = 0;
                   壊す;
                  }
                  それ以外
                  {
                   勝利フラグ = 1;
                  }
                 }
              }

   行列[mtxPosX-1][mtxPosY+1] == 行列[mtxPosX][mtxPosY]の場合
              {
               行列[mtxPosX-2][mtxPosY+2] == 行列[mtxPosX][mtxPosY]の場合
               {
                行列[mtxPosX-3][mtxPosY+3] == 行列[mtxPosX][mtxPosY]の場合
                {
                 行列[mtxPosX-4][mtxPosY+4] == 行列[mtxPosX][mtxPosY]の場合
                 {
                  勝利フラグ = 1;
                 }
                 それ以外
                 {
                  行列[mtxPosX+1][mtxPosY-1] != 行列[mtxPosX][mtxPosY])
                  {
                   勝利フラグ = 0;
                  }
                  それ以外
                  {
                   勝利フラグ = 1;
                  }
                 }
                }
                それ以外
                {
                 (var w = 0; w < 2; w ++) の場合
                 {
                  if(行列[mtxPosX+w+1][mtxPosY-w-1] != 行列[mtxPosX][mtxPosY])
                  {
                   勝利フラグ = 0;
                   壊す;
                  }
                  それ以外
                  {
                   勝利フラグ = 1;
                  }
                 }
                }
               }
               それ以外
               {
                (var w = 0; w < 3; w ++) の場合
                {
                 if(行列[mtxPosX+w+1][mtxPosY-w-1] != 行列[mtxPosX][mtxPosY])
                 {
                  勝利フラグ = 0;
                  壊す;
                 }
                 それ以外
                 {
                  勝利フラグ = 1;
                 }
                }
               }
              }
              それ以外
              {
               (var w = 0; w < 4; w ++) の場合
               {
                if(行列[mtxPosX+w+1][mtxPosY-w-1] != 行列[mtxPosX][mtxPosY])
                {
                 勝利フラグ = 0;
                 壊す;
                }
                それ以外
                {
                 勝利フラグ = 1;
                }
               }
              }
    }
              勝利フラグ == 1 の場合
         もしも(弓)
         alert("黒が勝ちました!");
         それ以外
                         alert("白が勝ちました!");
              }
      });

  </スクリプト>
</本文>
</html> 

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

以下もご興味があるかもしれません:
  • すべてのブラウザと互換性のある Gobang ゲームの Pure JS 実装 (ソース コード付き)
  • JavaScript ベースの Gobang ゲームの実装
  • JavascriptとHTML5はキャンバスを使用してWeb Gobangゲームを構築し、アルゴリズムを実装します
  • JS キャンバスが Gobang チェス盤を描画します
  • H5+C3+JS で Gobang ゲームを実装する (AI バージョン)
  • Gobang ゲームの例を実装するためのネイティブ JS+Canvas
  • H5+C3+JS で二人用 Gobang ゲームを実現 (UI 編)
  • jsでシンプルなGobangゲームを実現する
  • JS+canvasで実装したGobangゲーム[人間対機械版]
  • JavaScript 初心者向けチュートリアルと Gobang アプレットの簡単な実装

<<:  UbuntuにMySQLデータベースをインストールする方法

>>:  Linux でディスク IO を表示し、読み取りと書き込みで高い IO を占有するプロセスを見つけます。

推薦する

uniapp プロジェクトをデスクトップ アプリケーションとしてパッケージ化する方法

Electronのインストール cnpm 電子をインストール -g electron-package...

MySQL データベース監視ソフトウェア lepus の使用上の問題と解決策

lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...

MySQL 5.7.10 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

MySQL は比較的使いやすいリレーショナル データベースです。今日は、win10 システムを再イ...

Linux で同じバージョンの R を使用して Seurat2 と Seurat3 を同時にインストールするチュートリアル

Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...

Docker の Windows ストレージ パス設定操作

Windows 10 に Docker をインストールする場合、コンテナタイプを Linux コンテ...

aタグのname属性とid属性を使用してページ内を移動する方法

以前はaタグのname属性を使ってジャンプする方法しか知らなかったのですが、idも使えることを今日知...

MySQLのスリープ関数の特殊現象例の詳しい説明

序文MySQL のスリープ システム機能は、実用的な適用シナリオが少なく、通常は実験的なテストに使用...

JavaScript キャンバスは影付きのグラフィックとテキストを実装します

キャンバスを使用して、参照用の影付きのグラフィックとテキストを作成します。具体的な内容は次のとおりで...

JavaScript 関数型プログラミングの基礎

目次1. はじめに2. 関数型プログラミングとは何ですか? 3. 純粋関数(関数型プログラミングの基...

MySQL マスタースレーブレプリケーション 読み書き分離の設定方法の詳細説明

1. 説明前回は、MySQL のインストールと構成、MySQL ステートメントの使用、MySQL デ...

MySQL 権限制御の詳細分析

目次1. グローバルレベル2. データベースレベル3. 表面レベル4. 列レベルの権限5. サブルー...

Linux サーバーに Python3 をインストールする 2 つの方法

最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ! ...

HTML で margin:0 auto を使用するとページ全体が中央に配置されない問題の解決方法

今日、jsp ページを書きました。<div style="margin:0 auto...

WindowsシステムでMySQLデータベースを完全にアンインストールして、MySQLを再インストールします

1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...

tomcat ログ ディレクトリ内のログ ファイルの分析 (概要)

tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...