経緯
大学時代に部活でハノイの塔ゲームを作ったんですよ。
それをもう一回作りたいなーと思って今回作り直しました。
久々に挑戦してみたら、さすがに一発で最短手数クリア……とはならず。
何回か挑戦してようやく最短手数にたどり着きました。
ハノイの塔とは？
「ハノイの塔」は古典的な数学パズルです。
異なる大きさの円盤を3本の棒の間で移動させ、すべての円盤を別の棒に移すのが目的です。
ルールはとてもシンプルで、
- 一度に動かせるのは1枚だけ
- 大きい円盤を小さい円盤の上に置くことはできない
という制約があります。
見た目は単純ですが、最短手数で解くには数学的な規則性があって、遊んでみると奥が深いパズルです。
使用技術
フロントエンド
- React
- ReactDOM
- Tailwind CSS
- PostCSS
- Autoprefixer
ビルド・デプロイ
- React Scripts
- gh-pages
ゲーム仕様
- 初期状態: 3枚の異なるサイズの円盤を左端の塔に積み重ね
- 操作方法: 円盤をドラッグして別の塔に移動
ゲームルール
- 一度に1枚の円盤しか動かせない
- 大きい円盤の上に小さい円盤を置くことはできない
- すべての円盤を右端の塔に移動すればクリア
実装機能
- 手数カウント
- ゲームクリア時の検出 & 祝賀アニメーション
- リセット機能
- 最適解との比較表示
課題
マインスイーパーと同様、単純すぎてちょっと物足りないですね。
難易度選択で円盤の枚数を増減できると遊びごたえが出そうです。
あと、円盤が重なったときの見た目があまり良くないのが不満点です。
「積み重なっている感」をきれいに表現したいのですが、今回の実装ではうまくいきませんでした。