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 を占有するプロセスを見つけます。
推薦する
Dockerを使用してNextCloudネットワークディスクを展開する方法
NextCloud コンピュータ上の任意のファイルやフォルダを共有し、NextCloud サーバーと...
CentOS7 で yum を使用して PostgreSQL と PostGIS をインストールする方法
1. yumソースを更新するCentOS7 のデフォルトの yum リポジトリの PostgreSQ...
ウィンドウの中央にブロック要素の位置を設定する方法
ウィンドウの中央にブロック要素の位置を設定する方法ブロック要素をウィンドウの中央に配置する上記の方法...
3次元画像配置効果を実現する純粋なCSSのサンプルコード
1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...
vue+element カスタムクエリコンポーネント
この記事では主に Vue プロジェクトを紹介します。要素の導入を前提として、コンポーネントを 2 回...
Nginx の場所に関する一般的なルールの優先順位の問題
目次1. 場所/マッチング2. 場所 = / 一致Locaitonには、完全一致（=）、プレフィック...
Linuxでmysqlの定期的なコールドバックアップを実装するためにmysqldump+expect+crontabを使用するアイデアの詳細な説明
目次1. 遭遇した問題2. アイデア3. コード1. 遭遇した問題私たちは皆、mysqldump を...
Docker を使用した JMeter+Grafana+Influxdb 監視プラットフォームの構築に関する詳細なチュートリアル
Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...
Linux の GRUB ブート プログラムの暗号化の概要
目次1. GRUB暗号化とは何か2. grub暗号化手順3. grub暗号化のロック属性1. GRU...
2時間のDocker入門チュートリアル
目次1.0 はじめに2.0 Dockerのインストール3.0基本的なDockerコマンド4.0 Do...
Dockerでデータディレクトリを移行する方法
目次ディスク使用量の表示ディスク クリーンアップ (軽々しく使用しないでください)データの移行ディス...
yum の基本的な使い方と例（推奨）
yumコマンドYum (フルネームは Yellow dog Updater, Modified) ...
Windows での MySQL 8.0.12 のインストール手順と基本的な使用方法のチュートリアル
この記事では、WindowsでのMySQL 8.0.12のインストール手順と使用方法のチュートリアル...
HTMLタグの説明
HTMLタグの説明1. HTMLタグタグ: !DOCTYPE説明: HTML ドキュメントが準拠する...
MySQLデータベースエンジンをInnoDBに変更する
PS: ここではPHPStudy2016を使用しています1. 変更中にMySQLを停止する2. my...