この記事では、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 を占有するプロセスを見つけます。
Electronのインストール cnpm 電子をインストール -g electron-package...
lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...
MySQL は比較的使いやすいリレーショナル データベースです。今日は、win10 システムを再イ...
Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...
Windows 10 に Docker をインストールする場合、コンテナタイプを Linux コンテ...
以前はaタグのname属性を使ってジャンプする方法しか知らなかったのですが、idも使えることを今日知...
序文MySQL のスリープ システム機能は、実用的な適用シナリオが少なく、通常は実験的なテストに使用...
キャンバスを使用して、参照用の影付きのグラフィックとテキストを作成します。具体的な内容は次のとおりで...
目次1. はじめに2. 関数型プログラミングとは何ですか? 3. 純粋関数(関数型プログラミングの基...
1. 説明前回は、MySQL のインストールと構成、MySQL ステートメントの使用、MySQL デ...
目次1. グローバルレベル2. データベースレベル3. 表面レベル4. 列レベルの権限5. サブルー...
最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ! ...
今日、jsp ページを書きました。<div style="margin:0 auto...
1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...
tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...