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 を占有するプロセスを見つけます。
推薦する
Nginxドメイン名転送の実装
Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...
Linux でコマンドまたはプロセスの実行時間を調べる方法
Unix ライクなシステムでは、コマンドまたはプロセスの実行がいつ開始されたか、またプロセスがどのく...
MYSQL メタデータ ロック (MDL ロック) MDL ロックの問題分析
1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...
vueはel-tableの列幅の適応を完璧に実現します
目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...
Docker での Redis の永続ストレージの詳細な説明
この章では、dockerの下にあるSpring BootプロジェクトでRedisを操作し始めます。準...
Tomcat サーバーの応答が遅い場合の解決策
1. 分析的思考1. 機械自身の理由を排除する2. サーバーパフォーマンス分析3. プロジェクト自体...
CSS で overflow-y: visible; が機能しない理由の分析と解決
シナリオ最近の要件は、モバイル デバイス用の h5 ページです。これには、選択可能なカードの行が必要...
HTML 要素 (タグ) とその使用法
a : ハイパーリンクの開始位置または宛先位置を示します。頭字語: 単語の最初の文字からなる略語を示...
Nginxがオンになっていると、ポートが占有され、「アドレスは既に使用されています」というメッセージが表示されます。
図に示すように: ポートの使用状況を確認します: sudo netstat -apn | grep ...
JavaScriptのループの違いについての詳細な説明
目次序文列挙可能なプロパティ反復可能なオブジェクトforEachメソッドとmapメソッドチェーン呼び...
NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。
目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...
CSS3+JavaScript を使用したクールな呼吸効果のサンプル コード
CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...
Vueはページを更新するために3つの方法を使用する
プロジェクトを作成しているときに、ユーザーがアクションを実行し、特定の状態を変更し、ページを更新して...
クラウドサーバーはBaotaを使用してPython環境を構築し、Djangoプログラムを実行します。
目次PagodaをインストールするPythonランタイム環境を構成するPythonをインストールする...
WMLタグの概要
構造関連タグ--------------------------------------------...