minesweeper

マインスイーパ

マインスイーパー... そう、昔古き良き Windows '95 でプレイしたことを覚えているあの古い古典的なゲームです (実際、Windows 8 までは Microsoft のソフトウェア アップデートで実装されていました)。マインスイーパの起源は、1960 年代と 1970 年代の初期のメインフレーム ゲームにあります。マインスイーパーの最も古い祖先はジェリマック・ラトリフのキューブでした。基本的なゲームプレイ スタイルは、1980 年代にパズル ゲーム ジャンルの人気のある部分になりました。

マインスイーパーの歴史をここでブラッシュアップしてください。

実際の掃海艇が何なのか知っていますか？私もこれを読むまでは知りませんでした。

90 年代に初めてコンピューターを使用したのは、このゲームをよくプレイしたことを覚えています。そのため、一周回ってこれ以上に優れたゲームがあるだろうかと考えました。

私のバージョン

はじめる

ここでゲームをプレイしましょう！

基本的なゲームプレイ

1. 難易度を選択してください。

• イージー = 9x9、地雷 10 個
• 中 = 16x16、地雷 40 個
• ハード = 30x30、160 個の地雷

2. ボード上の任意の場所をクリックしてタイマーを開始します。 *数字は、特定のセルに隣接する地雷の数を表します。
3. 地雷だと思われる場合は、 「Shift + クリック」を使用してセルにフラグを追加します。

勝敗

• 地雷に当たったら...ゲームオーバーです、相棒。
• 地雷のないすべてのマスを発見すると勝利です!

(わかった...私の...スイーパー...?)

使用されている技術

古き良きスリーアミーゴ:

• HTML
• CSS
• JavaScript

HTML

ソース コードからわかるように、ほとんどのアクションは JavaScript で行われるため、HTML は非常に簡潔です。言うまでもなく、ゲームボード自体は単なるテーブルです。

CSS

これを Windows '95 デスクトップ ビューの古い外観に合わせてスタイリングするのはとても楽しかったです。完璧にするために少しいじってみたいと思います（MSが使用している正確なフォントが見つかりませんでした）。

CSS に関する私の最大の課題は、テーブルのスタイル (境界線、TD サイズなど) を理解することでした。

JavaScript

私にとって JavaScript を使用して機能する Web アプリを作成するのはこれが初めてだったので、このセクションが私にとってこのプロジェクトの最大の課題であったことは大きな驚きではありません。

以下にいくつかのハイライトを示します。

1. 難易度をクリックしたときにテーブルのサイズを動的に変更する

• 私はテーブル上の ID から数値を解析し、基本的に取得した数値に基づいて行/列を追加する ${size} 変数に変換する関数を作成しました (もちろんジムの助けを借りて)。このコンセプトは私の心を驚かせました。

2. 次に、視覚的なテーブルに一致する配列の配列を動的に作成します。
3. 個々の「セル オブジェクト」を作成するために使用する「Cell」クラスを作成し、行番号、列番号、爆弾 t/f、隣接する爆弾の数などの大量のプロパティを割り当てました（それ自体が別の課題です、ところで） 、t/f を明らかにし、t/f にフラグを立てました。

• このアプローチにより、より簡潔なコードを書くことがはるかに簡単になり、同じことを何度も繰り返す必要がなく、すべてのセル オブジェクトに対して実行されるクラスのメソッドを作成することができました。

4. 経過秒数を表示する機能タイマーを作成します。
5. アレイ上の爆弾の配置をランダム化します。
6. DOM 内のすべてをレンダリングします。
7. クリック ハンドラーをさまざまなイベントに割り当てます。
8. 勝敗ロジックの作成
9. すべての関数が同期的にチェーンされる方法の制御フローを理解する。
10. 再帰についてと、そのような効果を生み出す関数を適切に記述する方法を学びます。

私のデザインの選択

私は、OG Windows '95 の外観を採用することにしました。私は「模倣、同化、革新」を強く信じています。私の最初のプロジェクトでは、学習プロセスの模倣フェーズを実行して開始する前に歩く必要があると考えたので、学習のモデルを作成しました。

元のゲームのスタイルに合わせようとするだけで多くのことを学べたので、この道を選んで本当によかったと思います。

そうは言っても、私は間違いなく、近いうちにこれの最新版を作成するつもりです。

次のステップへ！

このプロジェクトは私にとって本当に楽しかったです。私は今後もこの内容を改良し、学んだ多くの教訓を今後何年にもわたって参考にしていくつもりです。

• 前に述べたように、CSS を最新のクリーンでフラットなミニマリスト UI に切り替える「表示切り替え」を作成したいと考えています。
• ボードが完全に露出したときにセルの幅/高さが数ピクセルずつ微調整されるなど、愚かな小さな美的バグがいくつかあり、髪の毛を引っ張ってしまいます。それを修正する必要があります。
• また、Windows '95 の機能をさらに具体化して、[スタート] ボタンに何かを実行させたり、右下隅に時計を追加したり、いくつかの機能的なデスクトップ アイコンを追加したりしたいと考えています。
• 私が取り組みたい非常に難しい機能は、ユーザーが数字 (行/列/鉱山番号) を入力して難易度を選択できる機能を作成することです。

それは雨の日用になります。

読んでいただきありがとうございます！ゲームをお楽しみいただければ幸いです:)