GobangゲームのWebバージョンを実装するためのJavaScript
|
この記事では、GobangゲームのWebバージョンを実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 js を学習して 3 日目に、先生と一緒に Gobang ゲームを完了し、学習結果を記録しました。専門家が経験を共有し、批評してくれることを歓迎します。 このプログラムは主に 3 つの部分で実装されます。 1. チェス盤の描画 <!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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: UbuntuにMySQLデータベースをインストールする方法
>>: Linux でディスク IO を表示し、読み取りと書き込みで高い IO を占有するプロセスを見つけます。
![開発者とオペレーターが注目すべき Linux デバッグ ツール [推奨]](/upload/images/67cae8271564d.webp)
推薦する
MySQL データをエクスポートおよびインポートするための HeidiSQL ツール
場合によっては、SQL へのデータのエクスポートとインポートを容易にするために、特定のツールを使用し...
mysql5.7.24 バージョンのインストール手順と解凍時に発生した問題の概要
1. ダウンロード参考: 2. D:\MySQL\mysql-5.7.24 などの固定の場所に解凍し...
IframeとFRAMEの違いの分析
1. Iframe タグの使用<br />Iframe については、「忘れられた隅」に放...
Linuxルートの初期値を設定する方法の簡単な分析
Ubuntu ではデフォルトで root ログインが許可されていないため、初期の root アカウン...
HTML で複数のクラス属性を定義する場合の無効な解決策
HTML を記述する過程で、クラス属性に複数の値を定義することがよくありますが、定義した値が無効であ...
Linux システムの /etc/fstab ファイルの詳細な解釈
序文 [root@localhost ~]# cat /etc/fstab # ＃/etc/fsta...
Vue はモバイル端末にマルチグリッド入力ボックスを実装
最近、同社は、下図に示すように、h5 ページ操作を完了するという要件を提示しました。 ネットで入手で...
CSS マージンの折りたたみの詳細な説明
前のこれは古くからある古典的な質問です。以前読者から質問があったので、ここでお答えします。簡単な例か...
Ubuntu 上で WebRTC ベースの複数人ビデオチャット サービスを構築するための詳細なコード
WebRTC は、Web Real-Time Communication の略で、Web リアルタイ...
CSS3 における構造擬似クラスセレクターと擬似要素セレクターの使い方の詳細な説明
構造擬似クラスセレクタの紹介構造擬似クラスセレクターは、いくつかの特殊効果を処理するために使用されま...
登録フォームのデザインルール
随分前に「Patterns for Sign Up & Ramp Up」を読み終えました。今...
MySQL テーブル名の大文字と小文字の選択
目次1. 大文字と小文字の区別を決定するパラメータ2. パラメータ変更に関する注意事項要約: 1. ...
MySQL マルチテーブル結合クエリの詳細な説明
目次複数テーブル結合クエリ内部結合左結合右結合サブクエリ要約する複数テーブル結合クエリテーブル間の接...
組み込み Linux で QT アプリケーションを再起動する簡単な方法 (QT4.8 qws ベース)
アプリケーション ソフトウェアには通常、次のようなビジネス要件があります。新しいバージョンの APP...
MySQL データベース内の同じテーブルを同時にクエリして更新する方法
通常のプロジェクトでは、1 回の入札で同時にデータを更新および照会する必要があるという問題によく遭遇...