学习 MERN Stack 第 32 天

今天我开发了一个飞行棋 (Snake and Ladder) 游戏。

我使用了 HTML5、CSS3 和原生 JavaScript。

昨天我开发了剪刀石头布。今天我想挑战更大的难度。我需要在一个 100 格的网格上追踪位置。

我主要关注了两个技术领域：

  1. 网格生成 我没有编写 100 个独立的 HTML div。我使用循环通过编程方式创建网格。我使用 CSS Grid 创建了一个 10x10 的布局。

  2. 游戏逻辑 我避免了为蛇和梯子编写冗长的 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 };

开发这个游戏教会了我如何在游戏中管理状态和坐标。

来源: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1