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 を占有するプロセスを見つけます。

推薦する

Vueでパスワードの表示と非表示機能を実装するアイデアを詳しく解説

効果: アイデア:入力タイプ属性を使用して、タイプ値がテキストの場合はパスワードを表示し、タイプ値が...

WeChatアプレットはシンプルな計算機を実装する

WeChatアプレットの簡単な計算機は参考用です。具体的な内容は次のとおりです。 1. はじめに1....

Docker で Rancher をデプロイする方法 (落とし穴なし)

操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...

vue3.0+vant3.0の迅速なプロジェクト構築の実装

目次1. プロジェクトの構築2. Vue3 体験 + Vant 紹介2020年9月18日にvue.j...

JavaScript の基礎: スコープ

目次範囲グローバルスコープ関数のスコープもし、スイッチ、のために、その間ブロックスコープスコープチェ...

Vue プロジェクトで TS (TypeScript) を使用するための入門チュートリアル

目次1. Typescriptの紹介2. 設定ファイル webpack 設定3. プロジェクトに.t...

Dockerfile における ENTRYPOINT と CMD の違い

Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...

WeChatミニプログラム公式顔認証の詳しい説明

ミニプログラムはユーザーの個人情報を収集してアップロードしましたが、拒否されました。こんにちは、ミニ...

Docker デプロイメント Consul 構成プロセスの分析

コマンドを実行docker run -d --name consul -p 8500:8500 co...

count(1)、count(*)、count(列名)の実行の違いの詳細な説明

実施効果: 1. count(1) と count(*)テーブル内のデータ量が多い場合、テーブルを分...

Vueは州、都市、地区のカスケード選択を実現します

最近、省、市、地区のカスケード選択効果を実装する必要があります。省、市、地区のデータはすべてローカル...

Nginx でファイル ホットリンク保護サービスを構築する方法を学ぶ例

序文多くのサイトが、ポイントやゴールドコインなど、情報のダウンロードに料金を請求していることは誰もが...

Adobe Brackets の簡単な使い方のグラフィックチュートリアル

Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...

Linux システムの busybox に mkfs.vfat コマンドを移植する

オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...

初心者向けのHTMLタグネストルールの詳細なまとめ

最近、HTML を再度学習しており、これは HTML に対する新たな理解と言えます。これを過小評価し...