この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 HTML ページ 注釈は非常に明確なので、注意深く研究してください。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、height=デバイス高さ、initial-scale=1.0、user-scalable=no"> <title>ゴバン</title> <スタイル> * { マージン: 0px; パディング: 0px; } 。箱 { 境界線の間隔: 0px; 境界線: 1px 実線 #3c3c3c; 背景色: #e1e1e2; マージン: 自動; } 。ピース { 境界線の間隔: 0px; 境界線: 1px 実線; } </スタイル> </head> <本文> <script type="text/javascript" src="./Gobang.js"></script> </本文> </html> ジャバスクリプト var スクリーン幅 = { ドキュメント幅: 500, containerWidth: 400, // コンテナのデフォルトの幅 cellWidth: 20 // セルの幅} document.documentElement.clientWidth < 500 の場合 { ScreenWidth.documentWidth = document.documentElement.clientWidth; スクリーン幅.コンテナ幅 = スクリーン幅.ドキュメント幅 * 0.8; スクリーン幅.セル幅 = スクリーン幅.コンテナ幅 * 0.05; } //定数 var reg = /\d{1,2}/g; var white = []; // 白の駒を配置var black = []; // 黒の駒を配置var tempKey = false; // 黒と白のどちらの駒を動かすか決定var notOver = true; // ゲームが終了しているかどうか決定var tips = "White moves"; // 駒を動かす際のヒントvar count = 0;// 連結した駒の数var bv = false; // 黒が勝つvar wv = false; // 白が勝つvar yCanWin = [];// 同じ垂直要素を持つ配列var xCanWin = [];// 同じ水平要素を持つ配列var xyCanWin = [];// 同じ正負の対角線を持つ配列var yxCanWin = [];// 同じ負正の対角線を持つ配列// タイマーを使用して勝利を監視するvar time = setInterval(function () { もし(bv){ tips = "黒が勝ちます"; document.getElementsByTagName("span")[0].innerText = ヒント; (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) { document.getElementsByClassName("pieceBox")[i].onclick = null; } クリア間隔(時間); } もし(wv){ tips = "白が勝ちます"; document.getElementsByTagName("span")[0].innerText = ヒント; (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) { document.getElementsByClassName("pieceBox")[i].onclick = null; } クリア間隔(時間); } }, 100); newGame(); // ゲームを開始する function newGame() { document.getElementsByTagName("table").length の場合 { (var i = 0; i < document.getElementsByTagName("table").length; i++) { document.getElementsByTagName("テーブル")[i].remove(); } } // 次のコンテンツを初期化します bgInit(); ピースを初期化します。 spanFn(); 白 = []; 黒 = []; tempKey = false; オーバーではありません = true; tips = "白の動き"; カウント = 0; bv = 偽; 戻り値: yCanWin = []; 戻り値 yxCanWin = []; } 関数spanFn() { var span = document.createElement("span"); document.body.insertBefore(span, document.getElementsByTagName("script")[0]); span.innerText = ヒント; } // ボード初期化関数 bgInit() { var テーブル = document.createElement("テーブル"); table.className = "ボックス" (var y = 0; y < 20; y++) の場合 { var tr = document.createElement("tr"); (var x = 0; x < 20; x++) の場合 { var td = "<td class='box-" + y + "-" + x + "' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid #9c9c9c'></td>"; tr.innerHTML += td; } テーブルに子要素を追加します。 } document.body.insertBefore(テーブル、document.getElementsByTagName("script")[0]); } // チェスの駒の初期化関数 pieceInit() { var テーブル = document.createElement("テーブル"); table.className = "ピース" table.style = "位置: absolute; 上: 0; 左: 50%; 左マージン: -" + (ScreenWidth.containerWidth + 42) / 2 + "px"; (var y = 0; y < 20; y++) の場合 { var tr = document.createElement("tr"); (var x = 0; x < 20; x++) の場合 { var td = "<td class='piece-" + y + "-" + x + " pieceBox' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid transparent;border-radius: 50%;'></td>"; tr.innerHTML += td; } テーブルに子要素を追加します。 } document.body.insertBefore(テーブル、document.getElementsByTagName("script")[0]); } // チェスの駒を動かす for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) { document.getElementsByClassName("pieceBox")[i].onclick = function () { if (tempKey) { this.style.backgroundColor = "#000"; // 黒い点 tempKey = false; black.push(this.className.match(reg)); victory(black, 0); //黒が勝ったかどうかを判定 if (notOver) { ヒント = tipsGo(tempKey); document.getElementsByTagName("span")[0].innerText = ヒント; } } それ以外 { this.style.backgroundColor = "#fff"; // Baizi tempKey = true; white.push(this.className.match(reg)); victory(white, 1); //白が勝ったかどうかを判定 if (notOver) { ヒント = tipsGo(tempKey); document.getElementsByTagName("span")[0].innerText = ヒント; } } this.onclick = null; // クリック後にクリックイベントをキャンセルします} } // 黒にするか白にするかのヒント function tipsGo(tempKey) { if (tempKey) { 「黒が動く」を返します。 } それ以外 { 「白の動き」を返します。 } } /** * さまざまな勝ちを判断する方法 * x は垂直座標を表し、y は垂直座標を表します * 1. 垂直勝ち、つまり x 値が同じで、y 値を取得して並べ替えて比較します * 2. 水平勝ち、つまり y 値が同じで、x 値を取得して並べ替えて比較します * 3. 前方対角勝ち、x + y が同じ値で、x または y を取得して並べ替えて比較します * 4. 逆対角勝ち、xy が同じ値で、x または y を取得して並べ替えて比較します */ 関数の勝利(ターゲット、c) { ターゲットの長さが5以上の場合 // 1. 垂直方向の勝利 yCanWin (var i = 0; i < target.length; i++) の場合 { (var j = 0; j < target.length; j++) の場合 { (ターゲット[j][1] == ターゲット[i][1])の場合{ yCanWin.push(target[j]); // 配列yCanWinにxと同じ値を入れる } } yCanWin関数は、yCanWinが0のときに実行されます。 yCanWin = []; } // 2. 勝つ xCanWin (var m = 0; m < target.length; m++) の場合 { (var n = 0; n < target.length; n++) の場合 { (ターゲット[n][0] == ターゲット[m][0])の場合{ xCanWin.push(target[n]); // yと同じ値を配列xCanWinに格納する } } xWin(xCanWin, c); 戻り値: } // 3. 正の斜め勝ち xyCanWin (左下から右上) (var a = 0; a < target.length; a++) の場合 { (var b = 0; b < target.length; b++) の場合 { parseInt(target[b][0]) + parseInt(target[b][1]) == parseInt(target[a][0]) + parseInt(target[a][1]) の場合 { xyCanWin.push(ターゲット[b]) } } yWin(xyCanWin, c); 戻り値 } // 4. バックスラッシュ win yxCanWin (左上から右下へ) (var v = 0; v < target.length; v++) の場合 { (var w = 0; w < target.length; w++) の場合 { parseInt(target[w][0]) - parseInt(target[w][1]) == parseInt(target[v][0]) - parseInt(target[v][1]) の場合 yxCanWin.push(ターゲット[w]) } } xWin(yxCanWin, c); yxCanWin = []; } } } // チェスの垂直勝利条件 (チェスの垂直勝利条件) function yWin(yCanWin, c) { // c = 0 は黒の駒を表す c = 1 は白の駒を表す var sortArray = []; // 配列をソートする for (var i = 0; i < yCanWin.length; i++) { sortArray.push(yCanWin[i][0]); } sortArray.sort(関数(x, y) { x - y を返します。 }); // 配列をソートした後、最初の数値と最後の数値に 1 を加えた数値を比較します (数値型の変換に注意してください) (var j = 0; j < sortArray.length; j++) { ソート配列[j + 1]の場合 parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1]) の場合 { count++; // 連続する数字ごとに1を加算し、不連続がある場合はクリアします。if (count == 4 && c == 0) { bv = 真; notOver = false; // ゲームオーバー return; } そうでない場合 (count == 4 && c == 1) { 真 notOver = false; 戻る; } } それ以外 { カウント = 0; } } } カウント = 0; } // チェスの水平方向の勝利条件(チェスの逆対角方向の勝利条件) 関数xWin(xCanWin, c) { var ソート配列 = []; (var i = 0; i < xCanWin.length; i++) の場合 { sortArray.push(xCanWin[i][1]); } sortArray.sort(関数(x, y) { x - y を返します。 }); (var j = 0; j < sortArray.length; j++) { ソート配列[j + 1]の場合 parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1]) の場合 { カウント++; カウントが4でcが0の場合 bv = 真; notOver = false; 戻る; } そうでない場合 (count == 4 && c == 1) { 真 notOver = false; 戻る; } } それ以外 { カウント = 0; } } } カウント = 0; } 古典的な JavaScript ゲームに関するすべての記事については、学習用の特別トピックを参照してください。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux ファイル操作でよく使われるコマンドのまとめ
ポート80も設定されています。まずファイアウォール設定ファイルを入力しますシェル># vim ...
具体的なコードは次のとおりです。 <a href="#"> <...
参考までにWeChatアプレットで書かれた簡単な計算機です。具体的な内容は次のとおりです。 jisa...
Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...
必要:近い将来、大容量ファイルのアップロード機能を実装します。フロントエンドフレームワークのアップロ...
<!--[if IE 6]> IE6 のみが認識可能 <![endif]-->...
目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...
今日は、サンダーファイタータイピングゲームを実装します。ゲームプレイは非常に簡単です。それぞれの「敵...
CSS は Web ページの印刷スタイルを制御します。 CSS を使用して印刷スタイルを制御します。...
この記事では、テーブル内のデータを追加、削除、変更するためのvue要素の具体的なコードを参考までに共...
目次1. Dockerをインストールする2. カスタムネットワークアドレスを作成する3. Docke...
MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...
Centos や Ubuntu など、Docker が pull する Base イメージは最もシン...
Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...
CSS の背景: background:#00ffee; //背景色を設定するbackground-...