Hướng dẫn javascript games - trò chơi jav
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 4 được hiển thị như 1 đối tượng hình chữ nhật trong trang web (đóng vai trò là game area - vùng không gian của game)HTML Canvas 4 là thành phần hoàn hảo để tạo game trong HTML. 4 cung cấp tất cả các chức năng mà bạn cần để tạo 1 trò chơi.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 4 có một đối tượng built-in (xây dựng bên trong) được gọi là 8, đối tượng này bao gồm các method (phương thức) và các property (thuộc tính) để vẽ.Bạn có thể tìm hiểu thêm về thành phần 4 và đối tượng 8 ở trong bài viết về Canvas Tutorial này.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 1 sẽ có nhiều property và method được giới thiệu sau trong bài này.Hàm 2 gọi đến method 3 của đối tượng 1.Method 3 tạo ra 1 thành phần 4 và chèn nó như childnode đầu tiên của thành phần 7.Để 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à 8, và component đầu tiên tạo ra trong vùng gamearea chúng ta gọi nó là 9 :
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 1 đi thì tất cả các chuyển động của component (khối vuông màu đỏ) sẽ để lại dấu vết nơi mà chúng đã đi qua (các ảnh của khối hình này sẽ được lưu lại dọc đường nó đi qua). Bạn có thể quan sát trực quan tại đâyThay đổ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 :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à 5 và 6 được sử dụng làm các chỉ số tốc độ. Đồng thời trong hàm tạo này viết hàm 7 để thay đổi vị trí của khối màu (component), hàm newPos() này được gọi từ hàm 8 trước khi vẽ component.Ý 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 6 để chuyển chỉ số tốc độ ( 5 và 6) về 0. (dùng được cả trong màn hình bình thường và màn hình cảm ứng):
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): 0Bạ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.Multiple Keys đã đề cập trên. Ý tưởng bài toán: Tạo 1 mảng 3 cho đối tượng 1, mỗi phần tử của mảng biểu thị giá trị một key được nhấn hay không. Nếu key được nhấn thì phần tử tương ứng của mảng 3 có giá trị là 6, giá trị 6 này được duy trì cho đến khi phím không còn được nhấn nữa, khi bắt sự kiện keyup của phím thì giá trị của phần tử tương ứng này trở về 2.keyup của phím thì giá trị của phần tử tương ứng này trở về 2.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 9 của tất cả các phím keys.[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 : 1Demo : 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 1 để cập nhật tọa độ x và y của component theo tọa độ của con trỏ chuột: 2Sau đó gán tọa độ của khối hình bằng tọa độ mới được cập nhật: 3Demo : 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 |