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 を占有するプロセスを見つけます。
推薦する
コネクタコンポーネントから Tomcat のスレッドモデルを見る - BIO モード (推奨)
Tomcat の上位バージョンでは、デフォルト モードは NIO モードを使用することになります。...
Windows/Mac で Docker を使用して MySQL (utf8 を含む) をインストールする
目次1. MacへのDockerのインストール2. Win 10 システムでの Docker のイン...
MySQL で中国語の文字をピンインでソートする簡単な例
名前を格納するフィールドが GBK 文字セットを使用している場合、GBK 内部コード自体がエンコード...
Nginx 設定場所のマッチング優先順位の簡単な分析
序文Nginx 構成のサーバー ブロック内の場所は、リクエスト URI を一致させるために使用され、...
Mysql Workbench クエリ mysql データベース メソッド
Mysql Workbench はオープンソースのデータベース クライアントです。このオープンソース...
js は丸で囲まれた数字のリストのサンプルコードを動的に追加します
1. まず本文にulタグを追加します <!-- 順序なしリスト --> <ul i...
Linux カーネル デバイス ドライバー キャラクタ デバイス ドライバー ノート
/******************** * キャラクターデバイスドライバー**********...
MySQL における引用符とバックティックの違いと使い方の詳細な説明
序文そこでこのブログを書きました。このブログでは大物の記事からいくつかの知識も推奨しています。侵害が...
Dockerfile の一般的なコマンドの概要
構文の構成: 1 注釈情報2 コマンド --- パラメータ [通常は大文字 | 実際には大文字と小文...
Dockerでボリュームを管理する2つの方法
前回の記事では、Dockerの基礎知識であるローカルディレクトリのマウント方法を紹介しました。今日は...
Vue ユニットテストに関する予備調査
目次序文なぜユニットテストを導入するのですか?ユニットテストの概要テスト開発パターン1. テスト駆動...
resizeを使用して画像切り替えプレビュー機能を実装する方法
要点CSS resize プロパティを使用すると、要素のサイズ変更可能性を制御できます。サイズ変更を...
MySQLアカウントのIP制限条件を変更する方法
序文最近、仕事で、MySQL ユーザーの権限を変更するには、特定の IP アドレスへのアクセスを制限...
MySQL サーバー コミュニティ バージョン MySQL 5.7.22 winx64 を win10 にインストールする方法
ダウンロード: http://dev.mysql.com/downloads/mysql/ Cドライ...
MySQLシリーズ15 MySQL共通設定とパフォーマンスストレステスト
1. 一般的なMySQLの設定以下のすべての構成パラメータは、32G のメモリを搭載したサーバーに基...