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 を占有するプロセスを見つけます。
推薦する
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 が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...