Ngày 32 học MERN Stack
Hôm nay tôi đã xây dựng một trò chơi Snake and Ladder.
Dự án này đòi hỏi việc xử lý mảng và logic phức tạp. Tôi đã sử dụng HTML5, CSS3 và Vanilla JavaScript.
Hôm qua tôi đã xây dựng trò Oẳn tù tì (Rock Paper Scissors). Hôm nay tôi đã chuyển sang một lưới 100 ô. Điều này đòi hỏi việc theo dõi các vị trí trên một bố cục toán học.
Dưới đây là cách tôi đã thực hiện:
- Tôi đã sử dụng một vòng lặp để tạo lưới. Tôi không viết mã cứng (hardcode) 100 thẻ div.
- Tôi đã sử dụng CSS Grid để tạo bố cục 10x10.
- Tôi đã sử dụng một đối tượng JavaScript để quản lý các thang (ladders) và rắn (snakes).
Bản đồ đối tượng (object map) liên kết ô kích hoạt với ô đích. Điều này giúp tránh các câu lệnh if-else dài dòng.
Ví dụ về bản đồ:
- Thang: 4 đến 14, 9 đến 31, 28 đến 84.
- Rắn: 17 đến 7, 54 đến 34, 98 đến 79.
Việc quản lý các chuyển đổi không gian trên một giao diện động đã dạy cho tôi rất nhiều về quản lý trạng thái (state management).
Nguồn: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1