MERNスタック学習 32日目
今日はスネーク&ラダー(すごろく)ゲームを作成しました。
このプロジェクトでは、複雑な配列操作とロジックが必要でした。HTML5、CSS3、およびVanilla JavaScriptを使用しました。
昨日はじゃんけんを作りました。今日は100マスのグリッドに挑戦しました。これには、数学的なレイアウトに基づいた位置の追跡が必要でした。
実装方法は以下の通りです:
- ループを使用してグリッドを作成しました。100個のdivをハードコードはしていません。
- CSS Gridを使用して10x10のレイアウトを作成しました。
- JavaScriptのオブジェクトを使用して、ハシゴ(ladders)とヘビ(snakes)を管理しました。
オブジェクトマップによって、トリガーとなるタイルと移動先のタイルを紐付けています。これにより、長いif-else文を避けることができます。
マップの例:
- ハシゴ: 4から14、9から31、28から84。
- ヘビ: 17から7、54から34、98から79。
動的なインターフェース上での空間的な遷移を管理することで、状態管理(state management)について多くのことを学びました。
出典: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1