Hướng dẫn code game bằng html
Khi nói đến phát triển các ứng dụng Game, chúng ta đều nghĩ ngay tới Android. Nhưng có khi nào bạn nghĩ rằng chỉ với HTML và JavaScript bạn cũng có thể phát triển ra những game đơn giản hấp dẫn? Trước đây tôi cũng nghĩ là không cho đến lúc đọc được bài về Game Tutorial trên HTML Game Tutorial - w3schools.com mà tôi sẽ giới thiệu cho bạn sau đây. Show
1. Game HOMEĐể tìm hiểu về quá trình làm Game, trước tiên tôi mời bạn chơi 1 Game sau đây được làm bằng HTML để làm quen với HTML Games. Dưới đây là hình ảnh của 1 game xây dựng bằng HTML. Mô tả về game :
2. Game CanvasThành phần HTML HTML Canvas
Sử dụng JavaScript để vẽ, viết, chèn hình ảnh và nhiều hơn thế nữa. .getContext("2d")Thành phần Bạn có thể tìm
hiểu thêm về thành phần Get StartedĐể tạo game trước hết cần tạo 1 không gian cho game :
Trong ví dụ trên : Đối tượng Hàm Method Để hiểu rõ hơn phần này bạn có thể vào xem ví dụ sau : http://www.w3schools.com/games/tryit.asp?filename=trygame_canvas , ở đó bạn có thể thấy được hoạt động của nó và tùy chỉnh cho canvas. 3. Game Components - Các thành phần của GameTrong phần này chúng ta sẽ tìm hiểu về cách thêm thành phần vào trong vùng không gian game, các Frame của nó và cách làm cho component đó chuyển động, thay đổi kích cỡ và màu sắc .... Add a Component - Thêm component vào vùng GameTạo một component constructor (hàm tạo - là những hàm đặc biệt cho phép thực thi, điều khiển chương trình ngay khi khởi tạo đối tượng), cho phép bạn thêm các component vào vùng gamearea. Trong ví dụ
sau đây, đối tượng hàm tạo được gọi là
Các component mang trong mình nó những thuộc tính và phương thức để tự kiểm soát sự xuất hiện và chuyển động của nó. Đây là hình ảnh của 1 component đơn giản được thêm vào bằng đoạn mã trên (khối vuông màu đỏ nằm trong vùng gamearea) Bạn có thấy khối hình trên thật đơn điệu và không bắt mắt không? Để có thể tự tạo ra những vật thể thật cute, bắt mắt cho riêng mình bạn có thể tìm hiểu thêm về Canvas để tự thiết kế component. FramesĐể game sẵn sàng hoạt động chúng ta sẽ cập nhật hiển thị (update the display) 50lần/giây, giống như các khung hình (frame) trong 1 bộ phim. Các bước thực hiện (Step) :
Làm cho component chuyển động (Make it Move)Để chứng minh hình vuông màu đỏ (component) được vẽ ra 50 lần/s, chúng ta sẽ thay đổi vị trí x (hoành độ - nằm ngang) ở mỗi lần update khu vực game area là 1 pixel (điểm ảnh).
Bạn có thể xem kỹ hơn quá trình update và chuyển động của khối màu đỏ tại đây Why Clear The Game Area? - Tại sao lại phải làm sạch vùng Game?Chắc hẳn bạn có thắc mắc tại sao lại cần phải làm sạch vùng Game mỗi lần update và hành động này có thực sự cần thiết? Việc này tưởng chừng như không cần thiết nhưng
nếu chúng ta bỏ method Thay đổi kích thước, màu sắc, vị trí của component
Sử dụng tọa độ x, y để định vị các component trên vùng game. Góc trái phía trên của canvas có tọa độ là (0, 0). Bạn cũng có thể vào đây để trải nghiệm các sự thay đổi này Nhiều component trong 1 canvas và làm cho các component này chuyển động
Bạn có thể vào đây để tạo các component và quỹ đạo cho chúng theo ý bạn. 4. Game ControllersTrong phần này, chúng ta sẽ học cách để điều khiển chuyển động của component (trái-phải, lên-xuống), bạn có thể click vào đường link tôi đính kèm ở phần tiêu đề của mục này để thử điều khiển chuyển động của khối component như trong ảnh : Để tạo các chức năng điều khiển đó chúng ta cần tạo Controller theo các bước sau : Nhận trong Controller - Get in ControlĐể điều khiển khối màu đỏ (trái-phải, lên-xuống) đầu tiên cần thêm trên giao diện 4 button để điều khiển chuyển động của khối màu đỏ. Với từng button (1 chức năng) chúng ta viết 1 hàm để thực hiện chức năng di chuyển khối hình màu đỏ theo hướng tương ứng. Trong hàm tạo của mỗi component chúng ta thêm 2 thuộc tính mới là Ý tưởng bài toán :
Sau đây là đoạn js để điều hướng chuyển động của khối hình :
Stop Moving - Dừng chuyển độngSau mỗi dịch chuyển của khối hình xong, chúng ta cần dừng lại chuyển động của khối hình, để làm được điều này chúng ta thêm 1 hàm
Sử dụng bàn phím như bộ điều khiển để chơi Game - Keyboard as ControllerChúng ta hoàn toàn có thể điều khiển khối màu đỏ bằng các phím trên bàn phím máy tính.
Di chuyển khối màu đỏ khi 1 key nào đó được nhấn (trong hàm updateGameArea):
Bạn có thể vào link sau để trải nghiệm và thay đổi phím key theo ý mình : http://www.w3schools.com/games/tryit.asp?filename=trygame_controllers_keys Multiple Keys Pressed - Ấn nhiều key cùng 1 lúcBạn có tự hỏi sẽ như thế nào nếu chúng ta nhấn nhiều key cùng 1 lúc? Trong ví dụ trên, component chỉ có thể di chuyển theo chiều ngang hoặc chiều dọc. Bây giờ chúng ta muốn nó có thể di chuyển được theo đường chéo. Để làm được điều này chúng ta cần sử dụng phương pháp Multiple Keys đã đề cập trên. Ý tưởng bài toán: Tạo 1 mảng Cách thức di chuyển
khối hình cũng rất đơn giản, cách thức gán key và tính toán tăng giảm tọa độ của khối hình không khác gì so với di chuyển lên-xuống-trái-phải; chỉ khác thay vì bắt sự của 1 phím duy nhất thì ở đây là bắt sự kiện nhấn [IMAGE-88] Trên đây là hình ảnh minh họa cho các hướng chéo mà khối màu có thể di chuyển, để làm cho khối hình di chuyển :
Dưới đây là đoạn code để thực hiện ý tưởng trên :
Demo : http://www.w3schools.com/games/tryit.asp?filename=trygame_controllers_keys_multiple Có 1 điều thú vị về độ ưu tiên khi có cặp phím đối ngẫu (cặp phím có 2 hướng ngược nhau : trái - phải, lên - xuống) được nhấn là phím theo chiều dương so với gốc tọa độ sẽ được ưu tiên hơn (++X và ++Y). Theo đó :
Di chuyển khối hình bằng con trỏ chuột - Using The Mouse Cursor as a ControllerĐể di chuyển khối hình bằng con trỏ chuột bạn cần thêm 1 method vào đối
tượng
Sau đó gán tọa độ của khối hình bằng tọa độ mới được cập nhật:
Demo : http://www.w3schools.com/games/tryit.asp?filename=trygame_controllers_mouse 5. Lời kếtỞ phần 1 này tôi xin dừng tại GameComtroller. Ở phần sau chúng ta sẽ cùng nhau tìm hiểu thêm về cách tạo chướng ngại vật (Game Obstacles), cách tính điểm cho game (Game Score), hình ảnh trong Game (Game Images), âm thanh, đồ hoạ, cách làm vật thể trôi lên (Game Bouncing), quay vật thể (Game Rotation), chuyển động theo quỹ đạo của vật thể (Game Movement). Bạn có thể tham khảo thêm ở đường link sau : http://www.w3schools.com/games/default.asp |