Ngày 32 học MERN Stack
Hôm nay tôi đã xây dựng một trò chơi Snake and Ladder.
Tôi đã sử dụng HTML5, CSS3 và Vanilla JavaScript.
Hôm qua tôi đã làm trò Oẳn tù tì (Rock Paper Scissors). Hôm nay tôi muốn một thử thách lớn hơn. Tôi cần theo dõi vị trí trên một lưới 100 ô.
Tôi tập trung vào hai khía cạnh kỹ thuật chính:
Tạo lưới (Grid Generation) Tôi không viết 100 thẻ div HTML riêng biệt. Tôi đã sử dụng một vòng lặp để tạo lưới bằng lập trình. Tôi đã sử dụng CSS Grid để tạo bố cục 10x10.
Logic trò chơi Tôi đã tránh sử dụng các câu lệnh if-else dài dòng cho các con rắn và thang. Tôi đã sử dụng một đối tượng JavaScript để ánh xạ các bước di chuyển. Điều này giúp mã nguồn trở nên sạch sẽ.
Đối tượng này ánh xạ từ ô bắt đầu đến ô đích:
- Thang giúp bạn đi lên.
- Rắn khiến bạn đi xuống.
Logic ví dụ: 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 };
Việc xây dựng trò chơi này đã dạy tôi cách quản lý trạng thái (state) và tọa độ trong một trò chơi.
Nguồn: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1