𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗗𝗮𝘆 𝟯𝟮
今日はスネーク＆ラダー（すごろく）ゲームを作りました。
HTML5、CSS3、およびVanilla JavaScriptを使用しました。
昨日はじゃんけんを作りましたが、今日はより大きな挑戦をしたいと考えました。100マスのグリッド上での位置を追跡する必要がありました。
主に2つの技術的な領域に焦点を当てました：
グリッド生成 100個のHTML divを個別に書くのではなく、ループを使用してプログラムでグリッドを生成しました。CSS Gridを使用して10x10のレイアウトを作成しました。
ゲームロジック ヘビとハシゴの処理に長いif-else文を使うのを避け、JavaScriptのオブジェクトを使用して移動をマッピングしました。これにより、コードがクリーンになります。
このオブジェクトは、開始タイルから目的地タイルへとマッピングします：
- ハシゴは上に進めます。
- ヘビは下に移動させます。
ロジックの例： const gameModifications = { 4: 14, 9: 31, 21: 42, 28: 84, 51: 67, 72: 91, 80: 99, 17: 7, 54: 34, 62: 19, 64: 60, 87: 36, 93: 73, 95: 75, 98: 79 };
これを作ることで、ゲームにおける状態（state）と座標の管理方法を学びました。
出典: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1