Buzz
Chơi game thử ngay tại đây: Mytour Squid Game. Chắc chắn bạn sẽ trải qua những trải nghiệm thú vị!
Giao diện sẽ có 3 cột là HTML, CSS và JS (Javascript). Để bắt đầu viết mã HTML, hãy gõ ! và nhấn TAB, bạn sẽ có phần HTML cơ bản cho trang web.
Bây giờ, chúng ta sẽ tạo khung chữ nhật cho game:
Được rồi, mình sẽ tạo một thẻ 
Viết mã trong cột CSS để định dạng các thẻ. Sử dụng dấu # để gọi id của thẻ, chỉ định width (chiều rộng), height (chiều cao) và border (viền). Phần trắng bên dưới sẽ hiện ra khung game. Viết code cũng đơn giản, chỉ vài dòng là xong ^^
Bây giờ, chúng ta sẽ thêm Huyền Vân vào cột HTML: 
Chèn ảnh của Huyền Vân bằng thẻ 
Thêm thuộc tính position để cố định vị trí của Huyền Vân và top để di chuyển Huyền Vân theo chiều dọc → Ok, Huyền Vân đã chạm đất.
Tiếp theo, mình thêm boss Cu Hiệp vào game:
Để định dạng cho boss Cu Hiệp trong CSS, mình sẽ sử dụng thuộc tính left để di chuyển sang phải. Cũng có thể sử dụng thuộc tính right.
Thêm phần KeyFrame để tạo hiệu ứng chuyển động (0% là điểm bắt đầu, 100% là điểm kết thúc). Sau đó, thêm vào phần tử huyenvan thuộc tính animation: (tên keyframe) + (thời gian chạy của Huyền Vân) + forwards (khi chạy đến cuối thì dừng lại, không quay trở lại 0%).
Khi F5 trang, Huyền Vân sẽ tự động chạy. Tuy nhiên, mình không muốn vậy. Bây giờ, mình muốn Huyền Vân chỉ chạy khi ta chạm vào màn hình. Để làm điều này, chúng ta cần sử dụng Javascript.3. Javascript (JS)JS là ngôn ngữ lập trình web rất phổ biến. Trong bài viết này, nếu HTML là khung xương, CSS là da thịt, thì JS chính là bộ não điều khiển.
Bây giờ, chúng ta sẽ xử lý những logic sau:
Trong CSS, thêm thuộc tính .paused để ngừng animation.
Trong JS, mình tạo một biến có tên là huyenvan và gán nó bằng document.getElementById('huyenvan')
Giờ, để huyenvan đứng yên, mình thêm thuộc tính .paused vào. Sau khi F5 lại trang, bạn sẽ thấy kết quả.
Bây giờ, mình sẽ thêm một hàm vào JS có tên là run với ý nghĩa như sau: nếu style của huyenvan đang là paused, thì chuyển thành running; ngược lại, chuyển thành paused. (Lưu ý: ‘=’ là gán giá trị, còn ‘==’ là so sánh giá trị).
Sau khi F5 và nhấp vào màn hình game, bạn có thể điều khiển Huyền Vân chạy và đứng lại ^^
Đó là cách mình đã trình bày phần logic cơ bản nhất của Mytour Squid game. Các logic phức tạp hơn sẽ bao gồm:
Đây là trang web freecodecamp.org, nơi cung cấp các khóa học lập trình miễn phí rất phổ biến. Mỗi ngày, bạn có thể dành một ít thời gian để học và thực hành theo hướng dẫn trên trang này.
Mỗi bài học bao gồm 3 phần: hướng dẫn kiến thức và bài tập → thực hành → hiển thị nội dung trên web.
Nếu bạn muốn học qua video, bạn cũng có thể xem trên kênh YouTube của họ: freeCodeCamp.org - YouTube
Mong rằng bài viết sẽ hữu ích cho mọi người ạ ^^
