この記事では、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 を占有するプロセスを見つけます。
効果: アイデア:入力タイプ属性を使用して、タイプ値がテキストの場合はパスワードを表示し、タイプ値が...
WeChatアプレットの簡単な計算機は参考用です。具体的な内容は次のとおりです。 1. はじめに1....
操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...
目次1. プロジェクトの構築2. Vue3 体験 + Vant 紹介2020年9月18日にvue.j...
目次範囲グローバルスコープ関数のスコープもし、スイッチ、のために、その間ブロックスコープスコープチェ...
目次1. Typescriptの紹介2. 設定ファイル webpack 設定3. プロジェクトに.t...
Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...
ミニプログラムはユーザーの個人情報を収集してアップロードしましたが、拒否されました。こんにちは、ミニ...
コマンドを実行docker run -d --name consul -p 8500:8500 co...
実施効果: 1. count(1) と count(*)テーブル内のデータ量が多い場合、テーブルを分...
最近、省、市、地区のカスケード選択効果を実装する必要があります。省、市、地区のデータはすべてローカル...
序文多くのサイトが、ポイントやゴールドコインなど、情報のダウンロードに料金を請求していることは誰もが...
Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...
オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...
最近、HTML を再度学習しており、これは HTML に対する新たな理解と言えます。これを過小評価し...