この記事の例では、古典的なマインスイーパゲームを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 プロジェクト構造成果を達成する思考プロセス1. 基本的なレイアウトを書き出す HTMLソースコード<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <link rel="スタイルシート" href="./css/style.css" rel="外部nofollow" > </head> <本文> <div class="footer">残りの地雷の数: <span class="mineNum"></span></div> <div class="gameBox"> </div> <div class="header"> <button class="active">プライマリ</button> <button>中級</button> <button>詳細設定</button> <button>再起動</button> </div> <script src="./js/main.js"></script> </本文> </html> CSS スタイルシート* { パディング: 0; マージン: 0; } .ヘッダー{ マージン: 10px 自動 自動 自動; テキスト配置: 中央; } .ヘッダーボタン{ パディング: 5px 15px; 背景色: #02a4ad; 色: #fff; テキスト配置: 中央; 境界線: なし; 境界線の半径: 8px; アウトライン: なし; カーソル: ポインタ; } .headerボタン.active{ 背景色: #00abff; } .フッター{ マージン: 100px 自動 自動 自動; テキスト配置: 中央; } テーブル { マージン: 10px 自動 自動 自動; 境界線の間隔: 1px; 背景: #929196; } td { パディング: 0; 幅: 20px; 高さ: 20px; 境界線: 2px 実線; 背景: #ccc; 境界線の色: #fff #a1a1a1 #a1a1a1 #fff; テキスト配置: 中央; 行の高さ: 20px; フォントの太さ: 700; } 。私の { 背景: #d9d9d9 url(../images/mine01.jpg) 繰り返しなし 中央; 背景サイズ: カバー; } 。フラグ { 背景: #fff url(../images/flag.jpeg) 繰り返しなし 中央; 背景サイズ: カバー; } .redMine { 背景: #fff url(../images/mine02.jpg) 繰り返しなし 中央; 背景サイズ: カバー; } td.ゼロ{ 境界線の色: #d9d9d9; 背景: #d9d9d9; } td.one{ 境界線の色: #d9d9d9; 背景: #d9d9d9; 色: #0332fe; } td.2{ 境界線の色: #d9d9d9; 背景: #d9d9d9; 色: #019f02; } td.3{ 境界線の色: #d9d9d9; 背景: #d9d9d9; 色: #ff2600; } td.4{ 境界線の色: #d9d9d9; 背景: #d9d9d9; 色: #93208f; } td.5{ 境界線の色: #d9d9d9; 背景: #d9d9d9; 色: #ff7f29; } td.6{ 境界線の色: #d9d9d9; 背景: #d9d9d9; 色: #ff3fff; } td.seven{ 境界線の色: #d9d9d9; 背景: #d9d9d9; 色: #3fffbf; } td.8{ 境界線の色: #d9d9d9; 背景: #d9d9d9; 色: #22ee0f; } js ソースコード関数Mine(tr, td, mineNum) { this.tr = tr; // 行 this.td = td; // 列 this.mineNum = mineNum; // 地雷の数 this.squares = []; // 正方形のオブジェクト配列 this.tds = []; // 正方形の DOM this.surplusMine = mineNum; // 残りの地雷の数 this.mainBox = document.querySelector('.gameBox'); // ゲーム ボックス要素を取得します //this.createDom(); } /*乱数を生成する*/ Mine.prototype.randomNum = 関数(){ var positionArray = 新しい配列(this.tr * this.td); for (var i = 0; i < positionArray.length; i++) { // インデックスを使用して地雷の位置を決定します positionArray[i] = i } // 配列シャッフル positionArray.sort(function () { 0.5 を返す - Math.random() }); return positionArray.splice(0, this.mineNum); // ランダムな mineNum 番号を地雷の位置として取得します} // 初期化 Mine.prototype.init = function () { var positionMine = this.randomNum(); // 地雷の位置を取得します。var n = 0; (var i = 0; i < this.tr; i++) の場合 { this.squares[i] = []; (var j = 0; j < this.td; j++) の場合 { if (positionMine.indexOf(n++) != -1) { // indexOf を使用して地雷を正方形の配列に配置します this.squares[i][j] = { type: 'mine', x: j, y: i }; } それ以外 { this.squares[i][j] = { 型: 'number'、x: j、y: i、値: 0 }; } } } this.mainBox.oncontextmenu = 関数 () { false を返します。 } this.updateNum(); このメソッドは、Dom を作成します。 //コンソールログ(this.squares); // 残りの鉱山番号を処理します this.mineNumDom = document.querySelector('.mineNum'); this.surplusMine = this.mineNum; this.mineNumDom.innerHTML = this.surplusMine; // ゲームプロンプトを処理する //document.querySelector(''); }; /*大きなテーブルを生成する*/ Mine.prototype.createDom = 関数(){ var This = this; // この関数はインスタンスオブジェクトを指します var table = document.createElement('table'); // テーブルを作成します (var i = 0; i < this.tr; i++) の場合 { var domTr = document.createElement('tr'); // 行 tr を作成 this.tds[i] = []; // [[],[],[]...[]] 行を格納 for (var j = 0; j < this.td; j++) { var domTd = document.createElement('td'); // 列 td を作成 domTd.pos = [i, j]; domTd.onmousedown = 関数(){ this.play(イベント、this); }; this.tds[i][j] = domTd; // ストレージ列 [ [,],[,], [,] .....] domTr.appendChild(domTd); // 行に列を追加します} table.appendChild(domTr) // テーブルにグリッドを追加します} // 以前の状態をクリアします this.mainBox.innerHTML = ''; this.mainBox.appendChild(table); // 大きな正方形を形成する tr*td } // グリッドを見つける Mine.prototype.getAround = function (positionArray) { var x = positionArray.x; var y = positionArray.y; var result = []; // 2D、見つかった各子が返されます/* ここでの座標情報は次のとおりです x-1,y-1 x,y-1 x+1,y-1 x-1,yx,y x+1,y x-1、y+1 x、y+1 x+1、y+1 */ (var i = x - 1; i <= x + 1; i++) の場合 { (var j = y - 1; j <= y + 1; j++) の場合 { もし ( i < 0 || // テーブルの左側を超える j < 0 || // 上部を超える i > this.td - 1 || // テーブルの右側を超える j > this.tr - 1 || // テーブルの下部を超える (i == x && j == y || // ポイント自体をクリック this.squares[j][i].type == 'mine') // 地雷の場合は値を変更する必要はありません) { 続く; } result.push([j, i]); // 結果配列に周囲のグリッド情報を追加します(j行目とi列目に数字があるなど)} } return result; // グリッド情報配列を返す} // 更新番号 Mine.prototype.updateNum = function () { (var i = 0; i < this.tr; i++) の場合 { (var j = 0; j < this.td; j++) の場合 { // Leiの周りの数字を更新するだけです if (this.squares[i][j].type == 'number') { 続く; } var num = this.getAround(this.squares[i][j]); (var k = 0; k < num.length; k++) の場合 { // 数字の周りに地雷がある場合は1を加算する this.squares[num[k][0]][num[k][1]].value += 1; } } } } Mine.prototype.play = 関数 (ev, obj) { var This = this; // インスタンス オブジェクトを取得します // 左ボタンがクリックされます which=1 は左ボタン、2 は中央のスクロール ホイール、3 は右ボタンです if (ev.which == 1 && obj.className != 'flag') { var curSquare = this.squares[obj.pos[0]][obj.pos[1]]; // 各数字のスタイル var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']; // クリックされた数字 if (curSquare.type == 'number') { obj.innerHTML = curSquare.value; obj.className = cl[curSquare.value]; // クリックした数字は0と非0の2種類に分けられます // 1. 数字0をクリックする (curSquare.value == 0)の場合{ obj.innerHTML = ''; // 0のデジタルスタイルを表示しない 関数 getAllZero(positionArray) { // 周囲のグリッド情報を取得します。var around = This.getAround(positionArray); // 再帰的な考え方を使って、周囲のグリッド 0 を表示しないようにし、0 でなくなったら停止します for (var i = 0; i < around.length; i++) { // [i]=[0,0]付近 var x = around[i][0]; var y = around[i][1]; This.tds[x][y].className = cl[This.squares[x][y].value]; // まだ0の場合 (This.squares[x][y].value == 0)の場合{ // 再帰 if (!This.tds[x][y].check) { this.tds[x][y].check = true; getAllZero(This.squares[x][y]); } } それ以外 { // 0でない場合は数値を表示し続けます。This.tds[x][y].innerHTML = This.squares[x][y].value; } } } getAllZero(curSquare); } } それ以外 { // 地雷をクリックすると、ゲームオーバーであると直接判断されます this.gameOver(obj); } } // which=3、マウスが右ボタンをクリックした if (ev.which == 3) { obj.className が 'flag' の場合 戻る; } obj.className = obj.className == 'flag' ? '' : 'flag'; // 残りの地雷を処理する // if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') { // this.allRight = true; // } それ以外 { // this.allRight = false; // } obj.className == 'フラグ'の場合{ this.mineNumDom.innerHTML = --this.surplusMine; } それ以外 { this.mineNumDom.innerHTML = ++this.surplusMine; } if (this.surplusMine == 0) { (var i = 0; i < this.tr; i++) の場合 { (var j = 0; j < this.td; j++) の場合 { if (this.tds[i][j].className == 'フラグ') { if (this.squares[i][j].type != 'mine') { ゲームオーバー(); 戻る; } } } } alert("機雷掃海成功おめでとうございます!"); これを初期化します。 } } }; // ゲームオーバーメソッド gameover Mine.prototype.gameOver = 関数(clickTd) { // 1. すべての地雷を表示する // 2. すべてのグリッドのクリックイベントをキャンセルする // 3. クリックされた地雷を赤でマークする for (var i = 0; i < this.tr; i++) { (var j = 0; j < this.td; j++) の場合 { if (this.squares[i][j].type == 'mine') { this.tds[i][j].className = '私のもの'; } this.tds[i][j].onmousedown = null; } } if (クリックTd) { clickTd.className = 'redMine'; } }; //ボタンの機能 var btns = document.querySelectorAll('.header button'); var 鉱山 = null; var btnKey = 0; // レベルインデックス // 初級、中級、上級の難易度設定 var headerArr = [ [9、9、10]、[16、16、40]、[28、28、99] ]; (i = 0 とします; i < btns.length - 1; i++) { btns[i].onclick = 関数(){ // 以前クリックしたスタイルをクリアします btns[btnKey].className = ''; this.className = 'アクティブ'; mine = 新しい Mine(...headerArr[i]); mine.init(); // ステータスを更新 btnKey = i; } } // ページはプライマリマインスイーパから始まります btns[0].onclick(); btns[3].onclick = 関数(){ mine.init(); } ソースコード 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7 の一時テーブルスペースを使用して落とし穴を回避する方法
>>: nginx でディレクトリ ホワイトリストと IP ホワイトリストを設定する方法
jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。スタックメ...
ビジネスシナリオ: 訪問者の訪問状況を記録する必要があるが、繰り返し記録することはできない挿入する前...
成果を達成する実装のアイデアフィルターのコントラストとぼかしを利用して溶ける効果を実現します。親要素...
目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...
SQL 左結合、右結合、内部結合、自然結合 さまざまな結合の概要SQL には、左結合、右結合、内部結...
目次1. データベースとは何ですか? 2. データベースの分類は? 3. データベースとデータ構造の...
HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは、実際...
これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...
3回の暗記により、大量の資材の正確な場所と目的を記憶でき、その使いやすさが向上します。 これは単なる...
html-webpack-pluginプラグインを使用してページを開始すると、htmlページをメモリ...
目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...
序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...
Dockerでnginxをデプロイするのはとても簡単ですたった 1 行のコマンド: docker 実...
目次1. プロジェクトの説明2. Nginxイメージの作成3. MySQLイメージの作成4. PHP...
目次序文1. gzip圧縮を設定する2. 詳細設定3. nginxサービスを再起動する要約する序文ウ...