Lập trình game 2D trên HTML5, Phần 1: Giới thiệu Snail Bait

Điều tuyệt vời khi phát triển phần mềm là bạn có thể đưa bất cứ điều gì sống động mà bạn có thể tưởng tượng ra lên màn hình, miễn là chúng có lý. Do không bị vướng vào những hạn chế vật lý đã cản trở các kỹ sư trong các ngành khác, nên các nhà phát triển phần mềm từ lâu đã sử dụng các bộ công cụ API đồ họa và giao diện người dùng (UI) để thực hiện các ứng dụng sáng tạo và hấp dẫn. Người ta có thể cho rằng dạng phát triển phần...
Nội dung trích xuất từ tài liệu:
Lập trình game 2D trên HTML5, Phần 1: Giới thiệu Snail Bait Lập trình game 2D trên HTML5, Phần 1: Giới thiệu Snail BaitĐiều tuyệt vời khi phát triển phần mềm là bạn có thể đưa bất cứ điều gì sống động mà bạn có thểtưởng tượng ra lên màn hình, miễn là chúng có lý. Do không bị vướng vào những hạn chế vật lýđã cản trở các kỹ sư trong các ngành khác, nên các nhà phát triển phần mềm từ lâu đã sử dụngcác bộ công cụ API đồ họa và giao diện người dùng (UI) để thực hiện các ứng dụng sáng tạo vàhấp dẫn. Người ta có thể cho rằng dạng phát triển phần mềm sáng tạo nhất là lập trình trò chơi;một vài nỗ lực đáng làm theo quan điểm sáng tạo còn hơn cả việc biến cái nhìn của bạn về tròchơi trở thành hiện thực.Các trò chơi video nhảy bậc thềm (Platform Games - PG)Donkey Kong, Mario Bros., Sonic the Hedgehog và Braid tất cả đều là các trò chơi nổi tiếng, bánchạy nhất và tất cả chúng đều là những trò chơi nhảy bậc thềm. Có lúc các trò chơi nhảy bậcthềm đã chiếm 1/3 doanh thu của tất cả trò chơi video. Hiện nay, thị phần của chúng đã thấp hơnđáng kể, nhưng vẫn còn có nhiều trò chơi nhảy bậc thềm thành công.Tuy nhiên, điều đáng làm không có nghĩa là dễ làm; thực ra, thường là ngược lại. Việc thực hiệncác trò chơi, đặc biệt là các trò chơi video, đòi hỏi phải có một sự hiểu biết tốt về lập trình, hiểubiết tốt về các hình ảnh đồ họa và ảnh động và rất nhiều kiến thức toán học pha trộn với liềulượng đáng kể về tính nghệ thuật và tính sáng tạo. Và đó chỉ là sự khởi đầu. Các nhà phát triểntrò chơi thành công dành rất nhiều thời gian để trau chuốt trò chơi của mình bằng cách tinh lọccách chơi trò chơi và các hình ảnh đồ họa, ngoài việc thực hiện nhiều khía cạnh của trò chơikhông liên quan gì đến cách chơi — chẳng hạn như các bảng ghi điểm, các hướng dẫn, các hìnhảnh động giữa các vòng đời và các mức chơi và các trình tự kết thúc trò chơi.Mục đích của loạt bài này là giới thiệu cho bạn cách thực hiện một trò chơi video HTML5 để bạncó thể bắt đầu làm việc với một trò chơi riêng của mình.�� Gi�-i thi�-u Hãy xem nội dung video Giới thiệu về loạt bài này ở đây.Trò chơi: Snail BaitTrong loạt bài này, tôi sẽ hướng dẫn bạn cách thực hiện một trò chơi video nhảy bậc thềm trướctiên bằng HTML5 Canvas API (API Khung nền ảnh HTML5). Trò chơi đó là Snail Bait, đượchiển thị trong Hình 1. Bạn có thể chơi trò chơi này trực tuyến, xem phần Tài nguyên để có mộtliên kết đến trò chơi này. Hãy bảo đảm rằng trình duyệt của bạn có tăng tốc phần cứng choCanvas (chỉ vừa mới được triển khai thực hiện trong hầu hết các trình duyệt, trong đó có Chromekể từ phiên bản 18); nếu không, hiệu năng của Snail Bait sẽ vô cùng kém. (Xem ô bên Hiệu năngcủa HTML5 Canvas để biết thêm thông tin).Hình 1. Snail Bait chạy trong ChromeCác công nghệ HTML5 được dùng trong Snail Bait  Canvas (2D API)  Điều khiển thời gian cho các hình ảnh động dựa trên kịch bản lệnh  Âm thanh  CSS3 (các quá trình chuyển tiếp và các truy vấn phương tiện)Snail Bait là một trò chơi nhảy bậc thềm cổ điển. Nhân vật chính, mà tôi sẽ đơn giản gọi là cô béđang chạy, chạy dọc theo các bậc thềm và nhảy qua lại giữa các bậc thềm trôi nổi di chuyển theochiều ngang. Mục tiêu cuối cùng của nhân vật là đến được một bậc thềm rung động có một nútnhấn vàng ở cuối mức chơi. Tất cả nhân vật, bậc thềm đung đưa và nút nhấn vàng đều được hiểnthị trong Hình 1.Người chơi điều khiển nhân vật bằng bàn phím: phím d để di chuyển nhân vật sang trái, phím kdi chuyển nhân vật sang phải, phím j hay f tạo bước nhảy của nhân vật và phím p để tạm dừngtrò chơi.Khi trò chơi bắt đầu, nhân vật của bạn có ba mạng. Các biểu tượng nhân vật biểu thị số mạngcòn lại được hiển thị ở phía trên bên trái của khung nền ảnh của trò chơi, như bạn có thể thấytrong Hình 1. Trong hình trình của nhân vật, để đi đến cuối màn chơi, nhân vật phải tránh nhữngkẻ xấu — những con ong, con dơi và ốc sên — đồng thời cố gắng thu thập các thứ có giá trị nhưđồng tiền, những viên hồng ngọc và ngọc bích. Nếu nhân vật va chạm vào những kẻ xấu, nhânvật sẽ bị nổ tung, bạn sẽ mất một mạng và phải quay lại màn chơi từ đầu. Khi nhân vật chạm vàonhững thứ tốt, số điểm của bạn sẽ tăng lên và phát ra một hiệu ứng âm thanh.Có dùng các phím WASD không?Theo quy ước, các trò chơi máy tính thường sử dụng các phím w, a, s và d để điều khiển trò chơi.Quy ước đó được phát triển chủ yếu là vì nó cho phép những người chơi thuận tay phải sử dụngchuột và bàn phím đồng thời. Nó cũng để cho tay phải tự do để nhấn phím spacebar hoặc cácphím bổ trợ chẳng hạn như phím Ctrl hoặc ALT. Snail Bait không sử dụng các phím WASD vìnó không nhận đầu vào từ chuột hoặc các phím bổ trợ. Nhưng bạn có thể dễ dàng sửa đổi mã củatrò chơi để sử dụng bất kỳ tổ hợp các phím nào.Những kẻ xấu thường được treo lơ lửng đâu đó để trực chờ nhân vật của chúng ta chạm vàochúng. Tuy nhiên, ốc sên thì lâu lâu lại bắn các bom ốc sên (quả bóng bạc được hiể ...