zenryokukun / game-ms

Minesweeper KI-WA-MI

このリポジトリはcreate-react-appを利用しています。

vite版を公開しましたので、拘りがなければこちらの利用をお願いいたします。

---

Minesweeper極(KI-WA-MI)

Websiteで公開しているReact流マインスイーパー改のゲーム部分を ローカルで実行できるようにしたもの。webページにあるナビゲーションバーやフッターの機能は落としています。

インストール方法

1. このリポジトリをclone。

git clone https://github.com/zenryokukun/game-ms.git

2. game-msフォルダにcd

cd game-ms

3. dependenciesをインストール

npm i

yarnは使ったことないですごめんなさい。
インストールに数分かかります。321MBあるのでご留意ください。Reactは重い。 create-react-appでインストールされるパッケージ以外、追加のものはありません。

実行

npm start

ゲームのルール

• マスを左クリックすると開きます。
• 地雷が埋まっているマスをクリックすると負けです。
• 数字のマスは、隣接するマスに埋まっている地雷の数を表しています。
• 数字をヒントに、地雷があると思われるマスに右クリックで旗を立てます。
• 全ての地雷のマスに旗を立て、それ以外のマスを全て開くと勝ちです。
• 左上の数字は、残地雷数です。旗を立てると減りますが、間違えていても減ります。
• 右上の数字は経過秒数です。
• 同じ難易度で再プレイする場合は😊マークを左クリック。
• 数字のマスをダブルクリックすると、隣接するマスを全て開きます。時短にどうぞ。

フォルダについて

ホームページの１ページだったものを抜き出しているので、階層が少し深くなってるフォルダもあります。 後、cssモジュールがComponentフォルダに入っていたり、stylesフォルダに入っていたり統一感が無い箇所あります。ご容赦ください。

• /src
  直下のファイル。

  • index.tsx
    Reactのエントリポイントです。

  • App.tsx
    　　メインのComponentです。

  • index.css
    全てのComponentに適用されるcssです。create-react-appで生成された状態そのままです。

  • declaration.d.ts
    何故かcssモジュールのインポートでエラーになるため、typescriptが"*.module.css"をモジュールとして認識するように追加しました。
    create-react-app --template typescriptでインストールすれば、cssモジュールが使える状態になるはずだと思うのですが。。。原因分かる人いたら教えて下さい。

• /src/styles
  cssモジュールが入っています。

• /src/component/minesweeperkai
  App.tsxで利用しているComponentを配置。Component内で利用しているcssモジュールも１つだけ入っています。

  • Description.tsx
    「ルール説明」リンクを押したときに表示されるモーダル

  • GameBoard.tsx
    ゲーム部分。地雷数、ニコニコマーク、時間、ゲーム版など

  • LevelSelect
    画面上部のレベル選択エリア。EASY,MEDIUM,HARD,極のとこ

  • Result
    画面下部のゲーム状態を文字で表示している部分。PLAYING...とか。

  • Tile
    ゲーム版の各マスを部品化したもの

• /src/lib/mskai
  React Component以外のモジュールが入っています。ゲームのロジック部分です。