HTML5-Canvas: Viết game Mario – Part 1

mario_iconTrong các bài viết trước, tôi có viết một ví dụ đơn giản trên Canvas để làm nền tảng cho các game slide-scrolling 2D rất nổi tiếng như Contra, Final Fight, Metal Slug, Castlevania,… Hãy coi lại part 0 để thử xem bạn có thể phát triển nó thành những game nào. Riêng với tôi, phát triển nó thành game Mario là một khởi đầu tốt và rất thích hợp cho người mới bắt đầu.

Đọc tiếp

Html5-Canvas: Tạo menu và chuyển đổi giữa các màn hình Game

Html5-Canvas-Screen-Menu-GameMỗi game được làm ra đều cần có màn hình chào mừng và các menu để giúp người chơi chuyển đổi giữa các màn hình khác nhau như: giới thiệu, chơi game, hướng dẫn, tùy chọn. Từ yêu cầu của một bạn, tôi sẽ hướng dẫn cách thực hiện phần này một cách đơn giản và nhanh chóng.

Đọc tiếp

GameDev – Áp dụng AI trong game Rắn Săn Mồi – Part 2 (end)

Cute_snake_cartoonTa đã tìm hiểu và vạch ra những việc cần làm trong phần trước. Việc còn lại là cài đặt lại trên nền Canvas với ngôn ngữ javascript, và bạn có thể sẽ thấy thích thú với thành quả của mình.

Đọc tiếp

GameDev – Áp dụng AI trong game Rắn Săn mồi – Part 1

snake-iconAI hay trí tuệ nhân tạo được sử dụng trong rất nhiều game, từ đơn giản đến phức tạp. Tùy theo từng trường hợp mà AI có thể tính toán vị trí để di chuyển, tìm đường đi, phân tích trạng thái để đưa ra quyết định,…

Đọc tiếp

Html5 – Giới thiệu thư viện Modernizr

Modernizr Html5 logoCác công nghệ web mới ra đời như HTML5, CSS3, Responsive design đòi hỏi developer và cả designer đều phải nắm bắt kịp thời và giải quyết những vấn đề phát sinh như tính tương thích, hiệu quả, linh hoạt,… Nếu bạn đang đối mặt với điều này, bạn có thể cần dùng đến Modernizr – một thư viện javascript giúp bạn vận dụng hiệu quả HTML5 và CSS3.

Đọc tiếp

Html5 – Sử dụng Full Screen API

Html5 Fullscreen API DemoHtml5 cho phép bạn có thể đưa một thành phần/thẻ của trang vào trạng thái hiển thị fullscreen (khác với chế độ fullscreen của trình duyệt (F11)). Ngoài ra, bạn có thể sử dụng CSS để thay đổi cách hiển thị của thành phần khi nó ở trong trạng thái fullscreen.

Đọc tiếp

Html5-Canvas: Thay đổi kích thước Canvas theo trình duyệt

resize_view_fit_windowMột trong những yêu cầu thường thấy của game là thay đổi kích thước cửa cửa sổ game theo trình duyệt. Việc thay đổi này cần đảm bảo tốc độ của game không bị ảnh hưởng cũng như hình ảnh không bị biến dạng (giữ nguyên tỉ lệ chiều cao vào rộng).

Đọc tiếp