HTML5 – Làm game trên Windows 8

Video

1. Giới thiệu:

Flash là một công nghệ rất hiệu quả, phổ biến và cho phép lập trình viên có thể tạo ra những ứng dụng với đầy đủ các hiệu ứng hình ảnh, âm thanh đặc sắc.

Nhưng một vấn đề nảy sinh ở đây là khả năng tương tác giữa các công nghệ này với các thành phần xung quanh nó thì dường như là không thể. Chúng bị cô lập và hoạt động độc lập với thế giới bên ngoài.

Với sự ra đời của HTML5 cùng các thành phần và API mới, giới hạn trên đã bị phá bỏ và đang từng bước thay thế dần các công nghệ như Flash. Với các ứng dụng cần những hiệu ứng đồ họa và chuyển động đặc biệt, lập trình viên có thể sử dụng Canvas với kiểu bitmap hoặc với kiểu vector. Không chỉ áp dụng cho việc thiết kế các trang web trực quan, HTML5 được áp dụng để tạo ra các thư viện đồ họa giúp tạo ra các ứng dụng đồ thị, game trong cả môi trường 2D và 3D như những ứng dụng trên desktop.

Một điều đáng mừng nữa là HTML, Javascript và CSS không còn bị giới hạn trên trình duyệt mà có thể được triển khai trên desktop, trên các thiết bị di động và trên bất kì thiết bị nào. Như vậy, lập trình viên không cần sử dụng hay yêu cầu người dùng cài đặt bất kì thư viện nào để có thể chạy được các ứng dụng của họ, đó là một lợi thế rất lớn mà chỉ có HTML mới có thể đạt được.

2. Đặc trưng của App:

Để bắt đầu vào làm một ứng dụng game trên Windows 8 thì đầu tiên, ta cần hiểu rõ những tính năng mới của Windows 8.

Game sẽ phải được trì hoãn khi người dùng chọn một số tính năng sau:

Snap: là một tính năng mới cho phép người sử dụng chạy và hiển thị hai ứng dụng song song cùng lúc (Hình 1).

Untitled

Hình 1

Setting: chứa các thông tin tác giả, tùy chỉnh, hướng dẫn, … của ứng dụng (Hình 2).

Untitled

Hình 2

 – Application bar: là thanh công cụ cung cấp cho người sử dụng các chức năng cần thiết cho ứng dụng, bạn có thể tham khảo nhiều icon trong phần mềm Metro studio. Thường thì app bar của game bao gồm 2 chức năng chính: pauseplay (Hình 3).

Untitled

Hình 3

 – Share: là tính năng cho phép bạn có thể chia sẽ thông tin với bạn bè và những người xung quanh. Thông tin về game và thành tích của người chơi là nội dung thường được chia sẽ (Hình 4).

Untitled

Hình 4

 – Search: là tính năng cho phép người dùng tìm kiếm chương trình hoặc là nội dung trong một chương trình đã được cài đặt trên máy (Hình 5).

Untitled

Hình 5

 – Zoom: nếu bạn đang sở hữu một chiếc smartphone thì ắt hẳn bạn đã quen thao tác nhúm ngón tay để zoom màn hình.

Zoom in (Hình 6)

zoom1

Hình 6

Zoom out (Hình 7)

zoom2

Hình 7

3. Thẻ canvas:

HTML5 xác định canvas như một bitmap phụ thuộc vào độ phân giải, được sử dụng để vẽ đồ thị, đồ họa game hoặc hình ảnh trực quan khác.

Canvas là một khùng hình chữ nhật trên trang và có thể sử dụng Javascript để vẽ bất cứ điều gì bạn muốn.

Canvas 2D cung cấp một API đơn giản nhưng vô cùng mạnh mẽ, nó có thể vẽ một cách nhanh chóng trên bề mặt bitmap 2D, bạn có thể vẽ bằng cách sử dụng script.

Một số phương thức vẽ của canvas:

 – Vẽ hình ảnh

 – Tô màu

 – Tạo hình học và các kiểu mẫu

 – Văn bản

 – Sao chép hình ảnh, video, những canvas khác.

 – Thao tác điểm ảnh

 – Xuất nội dung của một thẻ canvas sang tập tin ảnh tĩnh.

4. Các thao tác để bắt đầu một game bằng Visual studio 2012:

Ta sẽ dùng phần mềm Visual Studio 2012 để viết một chương trình đơn giản:

 – Có 5 dạng App cho người lập trình chọn lựa. Trong đó, Grid App đã được định nghĩa sẵn chức năng mở một trang khác và chức năng này cần thiết trong quá trình xây dựng menu cho game. Vì vậy, đối với những người mới bắt đầu thì việc chọn Grid App để thực hiện chương trình là cần thiết (Hình 8).

UntitledHình 8

 – Sau khi tạo project dạng Grid App, chúng ta chạy chương trình để xem trong ứng dụng đã có những gì (Hình 9).

Untitled

Hình 9

 – Chúng ta tự tạo trang cho game bằng cách tạo một thư mục mới trong thư mục “page“, rồi tạo một “page control” trong thư mục đó (Hình 11).

Untitled

Hình 11

 – Trang default.html sẽ được gọi đầu tiên mỗi khi chạy chương trình, vì vậy để mở trang vừa tạo, ta cần thay đổi liên kết trong trang default.html (Hình 12).

Untitled

Hình 12

 – Tạo thẻ canvas trong file myGame.hml (Hình 13).

Untitled

Hình 13

 – Viết javascript trong file myGame.js (Hình 14).

Untitled

 Hình 14

 – Chúng ta thử chạy thử một đoạn code sau để kiểm tra chương trình:

Untitled

 – Kết quả như Hình 15:

Untitled

Hình 15

5. Vòng lặp game:

Mỗi game đều có một vòng lặp để cập nhật và hiển thị trạng thái mới của game (Hình 16).

Untitled

Hình 16

 – Nhìn vào sơ đồ, ta có thể dễ dàng hiểu được hoạt động của game, khi chương trình bắt đầu thì đầu tiên chương trình cần tiếp nhận các giá trị vào qua phương thức input(), sau đó chương trình sẽ được cập nhật thông qua phương thức update() và cuối cùng là thể hiện trạng thái mới của game thông qua phương thức draw().

– Trong Javascript, thay vì sử dụng vòng lặp, ta sẽ sử dụng phương thức setInterval() hoặc setTimeout().

 – Nhờ vào phương thức setInterval(), game có thể liên tục được cập nhật và thể hiện những trạng thái mới trong những khoảng thời gian xác định, phương thức này sẽ hoạt động mãi cho đến khi phương thức clearInterval() được gọi.

Phương thức setInterval() có 2 tham số:

 – Tham số thứ nhất là hàm cập nhật game

 – Tham số thứ hai là tốc độ của game, quy định 1000 ms = 1 giây.

Ví dụ : setInterval(updateGame()1000) sẽ thực hiện cập nhật cho game 1s/lần.

6. Bắt sự kiện chuột:

Một điều cần lưu ý là Windows 8 đã tối ưu cho điều khiển cảm ứng và chuột, vì thế ta nên phát triển ứng dụng game sao cho cách chơi của game chủ yếu thông qua chuột. Có 3 sự kiện chuột mà ta thường gặp:

– Mouse Down : sự kiện nhấp chuột

– Mouse Move : sự kiện di chuyển chuột

– Mouse Up : sự kiện thả chuột

7. Tạo cấu trúc dữ liệu cho đối tượng:

Để giảm thiểu số lượng code và dễ dàng trong việc bảo trì ứng dụng thì việc tạo cấu trúc dữ liệu cho đối tượng là cần thiết. Đối tượng sẽ bao gồm các thuộc tính và các phương thức:

 – Thuộc tính: các thuộc tính được khai báo như khai báo biến và các biến này lưu trữ những dữ liệu cần thiết để quản lí đối tượng. Thông qua con trỏ this, chúng ta có thể tạo các thuộc tính trùng tên với tham số truyền vào.

Untitled

 – Phương thức: các phương thức được khai báo như khai báo hàm, bao gồm 2 phương thức cơ bản như update(), draw() … Thông qua đối tượng prototype, chúng ta thực hiện việc định nghĩa các phương thức kế thừa cho đối tượng.

Untitled

8. Tạo Animated Sprite:

Sprite là một phương pháp tạo các đối tượng chuyển động từ một hình ảnh duy nhất. Bằng cách sắp xếp các trạng thái của một đối tượng theo thứ tự chuyển động, sprite giúp cho việc quản lý tài nguyên và xử lí hiệu quả hơn so với việc phải sử dụng nhiều tập tin ảnh riêng lẻ (Hình 17).

eagle

 Hình 17

Mỗi lần đối tượng thực hiện phương thức update() thì một trạng thái mới sẽ được vẽ, để dễ dàng trong việc tính toán trạng thái tiếp theo của nhân vật thì các trạng thái phải được đặt trên hình ảnh sao cho bằng nhau về khoảng cách để khi cắt hình, ta được chính xác trạng thái cần hiển thị kế tiếp.

Chúng ta cùng ôn lại những kiến thức trên qua một game trên Windows Store mà tôi đã thực hiện.

HTML5 – Làm quen với va chạm và phản xạ giữa các đối tượng

Trong bài viết này, chúng ta sẽ xử lí những va chạm tương đối đơn giản giữa hình tròn và hình vuông, tạo các hiệu ứng cho mỗi lần va chạm và phát âm thanh. Tôi sẽ giới thiệu các kĩ thuật trên qua một mini Game. Demo

Nội dung của game như sau: chúng ta sẽ cho một quả bóng di chuyển tự do, mỗi khi gặp phải vật cản thì vật cản đó sẽ biến mất và quả bóng bị văng ngược trở lại… Chúng ta tiến hành thực hiện những nội dung trên.

Bài này sẽ có vài kiến thức đã được giải thích ở bài trước nên các bạn có thể xem lại để hiểu hơn.

1. Tạo quả bóng:

Untitled

Hình 1

– Như Hình 1, quả bóng có thể di chuyển, tạo bóng mờ, chuyển màu khi va chạm và phản xạ ngược lại khi gặp vật cản, vì vậy ta cần đầy đủ các yếu tố để định nghĩa phần thuộc tính của quả bóng như sau:

+ Giới hạn vùng di chuyển cho quả bóng, nếu va chạm vào vùng giới hạn thì ta cho quả bóng phản xạ lại.

+ Tọa độ tâm và bán kính để vẽ quả bóng.

+ Tốc độ của quả bóng.

+ Khoảng cách cho bóng mờ của quả bóng.

+ Thời gian chuyển màu khi bị va chạm.

 Hiện thực phần thuộc tính cho quả bóng:

Untitled

 – Phương thức draw() gồm 2 phần chính: vẽ quả bóng và vẽ bóng mờ của quả bóng.

+ Cú pháp đầy đủ để vẽ một hình tròn như sau:

Untitled

+ Chuyển màu khi va chạm:

○  Khi không va chạm, quả bóng sẽ có màu đỏ.

○  Khi va chạm, quả bóng sẽ chuyển sang màu hồng khoảng một thời gian rồi trở về màu đỏ.

 Hiện thực vần vẽ quả bóng chính:

Untitled

+ Phần bóng mờ của quả bóng thực chất là một mảng khoảng 10 phần tử lưu lại các điểm mà quả bóng đã đi qua, khi quả bóng chuyển màu thì bóng mờ cũng chuyển màu. Chúng ta sẽ làm cho bóng mờ của quả bóng càng ngày càng trong suốt bằng cách giảm alpha, alpha có khoảng giá trị từ 0 – 1, nếu càng về 0 thì quả bóng càng mờ:

Untitled

 Hiện thực phần bóng mờ:

Untitled

 – Phương thức update() cũng gồm 2 phần: cập nhật quả bóng và bóng mờ của quả bóng.

+ Tạo bóng mờ:

○  Để tạo khoảng cách cho bóng mờ theo sau, ta dùng một biến để đếm, cứ cách 5 lần thì ta tạo một quả bóng mờ mới.

○  Ta có thể giới hạn cho đuôi mờ của quả bóng khoảng 10 phần tử bằng cách kiểm tra số phần tử trong mảng, nếu số phần tử >= 10 thì ta loại bỏ phần tử đầu tiên của mảng.

Untitled

+ Cập nhật vị trí mới của quả bóng:

Untitled

+ Va chạm với vùng giới hạn:

○  Đầu tiên ta tính left, right, top và bottom của quả bóng để so sánh với vùng giới hạn.

○  Sau đó, ta so sánh 4 tọa độ trên với vùng giới hạn của bản đồ, nếu quả bóng va chạm với cạnh trái và cạnh phải của chướng ngại vật thì ta đổi chiều quả bóng theo X, nếu quả bóng va chạm với đỉnh và đáy thì ta đổi chiều quả bóng theo Y.

○  Vì có 2 loại va chạm nên ta cần trả về một giá trị nào đó để phân biệt với các va chạm khác.

 Hiện thực phần kiểm tra vùng giới hạn của quả bóng:

Untitled

+ Va chạm với chướng ngại vật (Hình 2):

Untitled

Hình 2

○  Để xác định được va chạm giữa quả bóng với hình vuông thì trước hết ta cần tìm điểm gần nhất từ tâm hình tròn đến hình vuông như Hình 3. Ta tìm điểm gần nhất giữa tâm quả bóng và hình vuông bằng cách so sánh tâm quả bóng với 4 cạnh của hình vuông.

Untitled

Hình 3

 Hiện thực phần tìm điểm gần nhất giữa quả bóng và hình vuông:

Untitled

○ Dựa vào điểm vừa tìm được, ta dùng định lí Pytago để tính cạnh huyền của hình tam giác vuông có một đỉnh là điểm gần nhất vừa tìm được và một đỉnh là tâm của quả bóng như Hình 4.

Untitled

Hình 4

 Hiện thực phần tính cạnh huyền của tam giác vuông:

Untitled

 ○ Dựa vào cạnh huyền vừa tìm được, ta so sánh với bán kính của hình tròn, nếu cạnh huyền <= bán kính thì chứng tỏ quả bóng trên đang va chạm với hình vuông.

 ○ Để cho chương trình trở nên sinh động thì mỗi lần va chạm như vậy, ta cho quả bóng phản xạ và hình vuông vừa va chạm biến mất. Để tính phản xạ cho quả bóng thì ta xét lại xem điểm gần nhất vừa tìm được nằm ở phía nào của hình vuông, nếu nằm ở phải và trái của hình vuông thì sẽ phản xạ theo chiều X, nếu nằm ở đỉnh và đáy của hình vuông thì sẽ phản xạ theo chiều Y. Sau đó, ta trả về chỉ số hình vuông vừa bị va chạm để chương trình thực hiện loại bỏ hình vuông đó khỏi mảng. 

 Hiện thực phần va chạm cho quả bóng:

Untitled

2. Tạo hình vuông:

– Để tạo và di chuyển hình vuông, các bạn có thể tham khảo ở bài trước.

– Trong bài này, đối tượng hình vuông sẽ đơn giản hơn vì nó đóng vài trò là chướng ngại vật trong chương trình, vì vậy ta sẽ loại bỏ phương thức update()isContain().

 Hiện thực phần thuộc tính và phương thức draw() cho hình vuông:

Untitled

3. Tạo âm thanh mỗi khi va chạm:

– Để cho chương trình trở nên sinh động thì ta sẽ tạo âm thanh cho quả bóng mỗi khi va chạm.

– Có 2 hình thức va chạm: va chạm với vùng giới hạn và va chạm với chướng ngại vật. Vì vậy ta cũng sẽ chuẩn bị 2 loại âm thanh khác nhau (các bạn có thể lấy file âm thanh trong phần Demo ở trên).

– Hàm sẽ có tham số là tên của âm thanh mà chúng ta cần gọi.

 Hàm loadAudio():

Untitled

4. Hoàn thiện phần nội dung chương trình:

– Trong hàm init(), ta sẽ tạo một quả bóng và dùng setInterval() để cập nhật liên tục quả bóng. Ngoài ra, ta còn bắt sự kiện chuột mouseDown để tạo chướng ngại vật bằng chuột.

Hiện thực hàm init():

Untitled

– Trong hàm draw(), ta vẽ quả bóng và các chướng ngại vật.

 Hiện thực hàm draw():

Untitled

– Trong hàm update(), ta kiểm tra va chạm của quả bóng và gọi âm thanh tùy theo loại va chạm.

 Hiện thực hàm update():

Untitled

– Ở sự kiện mouseDown, mỗi lần nhấp chuột, ta sẽ thêm một chướng ngại vật mới cho quả bóng.

 Hiện thực sự kiện mouseDown:

Untitled

Như vậy là chúng ta đã hoàn thành một mini game tương đối đơn giản, nhưng qua chương trình này, chúng ta có thể hiểu được cách kiểm tra va chạm, phát âm thanh và tạo bóng mờ … Các bạn có thể thêm vài hiệu ứng cho chương trình như làm đổi màu và cho hình vuông đó mờ dần khi quả bóng va chạm… Chúc các bạn thành công.

HTML5 – Quản lý một danh sách các đối tượng trong game

Trong mỗi game, số lượng nhân vật có thể không giới hạn, nhân vật càng nhiều thì càng tăng sự hấp dẫn và kịch tính. Bài viết này sẽ giới thiệu cách quản lí một mảng các đối tượng đối với thao tác draw()update(), ngoài ra chúng ta sẽ học cách bắt sự kiện chuột để thao tác với các đối tượng vừa tạo ra. Demo.

Đây chỉ là một ví dụ đơn giản nên chúng ta sẽ không sử dụng hình ảnh mà vẽ trực tiếp bằng canvas. Nội dung của chương trình lần này sẽ là vẽ các hình vuông, nếu chúng ta nhấp chuột vào hình vuông đang có sẵn thì có thể di chuyển hình vuông đang nhấp vào đó, nếu vị trí nhấp chuột trên màn hình không thuộc bất cứ hình vuông nào thì chương trình sẽ vẽ ra một hình vuông mới. Bây giờ chúng ta bắt tay vào thực hiện chương trình.

Phần code khởi đầu cho chương trình các bạn có thể tham khảo ở bài trước.

1. Định nghĩa và tạo các phương thức cho hình vuông:

– Để vẽ một hình vuông đơn giản, chúng ta cần biết 2 yếu tố sau:

+ Vị trí hình vuông sẽ xuất hiện trên màn hình, chúng ta sẽ cho tọa độ x và y của hình vuông là vị trí nhấp chuột.

+ Kích thước của cạnh hình vuông.

 Hiện thực phần thuộc tính cho hình vuông:

Untitled

– Định nghĩa phương thức draw() của hình vuông:

Dựa vào những thuộc tính đã thiết lập ở trên, ta sẽ sự dụng những thuộc tính trên làm tham số để gọi hàm vẽ hình vuông.

 Hiện thực phương thức draw() cho hình vuông:

Untitled

– Định nghĩa phương thức update() cho hình vuông khi di chuyển đến vị trí mới: 

Phương thức này sẽ có 2 tham số truyền vào là tọa độ x , y của chuột trên màn hình. Khi chuột di chuyển đến đâu, thì tọa độ của hình vuông sẽ nằm tại vị trí đó.

 Hiện thực phương thức update() cho hình vuông:

Untitled

– Định nghĩa phương thức isContain() của hình vuông:

Chúng ta cần tạo phương thức này để kiểm tra xem vị trí nhập chuột có nằm trong hình vuông không, chúng ta cần so sánh 2 yếu tố:

+ Tọa độ x của chuột có nằm giữa cạnh trái và cạnh phải của hình vuông không.

+ Tọa độ y của chuột có nằm giữa cạnh trên và cạnh dưới của hình vuông không.

 Hình 1 mô tả chuột lúc này đang nằm ngoài hình vuông

1 - Copy

Hình 1

Hình 2 mô tả chuột lúc này đã nằm trong hình vuông

1Hình 2

Hiện thực phương thức isContain():

Untitled

Lưu ý: mỗi đối tượng nên để trong 1 file.js riêng và đặt tên theo đối tượng vì một game có thể có rất nhiều đối tượng, việc sửa đổi các đối tượng sẽ gặp nhiều khó khăn nếu không chia ra để quản lí. Sau khi hoàn tất một file.js, các bạn nhớ thêm đường dẫn trong thẻ <head> để có thể gọi đối tượng trong file.js đó. Ví dụ, tên file chứa đối tượng hình vuông tôi vừa định nghĩa là rest.js thì chúng ta thêm đường dẫn như sau:

Untitled

2. Sự kiện chuột:

– Có 3 sự kiện chuột mà chúng ta thường xuyên bắt gặp đó là:

 + Mouse Down (Sự kiện nhấp chuột): mỗi lần nhấp chuột, nếu ta nhấp chuột vào một hình vuông nào thì hình vuông đó có thể di chuyển, ngược lại nếu không nằm trong bất kì hình vuông nào thì chương trình sẽ tự động sinh một hình vuông mới.

 + Mouse Move (Sự kiện di chuyển chuột): nếu đang nhập chuột tại hình vuông nào thì ta có thể di chuyển hình vuông đó theo sự kiện này.

 + Mouse Up (Sự kiện thả chuột): nếu việc di chuyển đối tượng đang diễn ra thì sự kiện này dùng để xác định khi nào thả chuột để ngừng di chuyển đối tượng.

– Trong canvas, chúng ta gọi 3 sự kiện trên trong hàm init() như sau:

Untitled

– Trong đó mouseDown, mouseMove mouseUp là 3 hàm mà chúng ta sẽ khởi tạo trong chương trình:

Untitled

– Cách lấy tọa độ x, y của chuột trên màn hình như sau:

Untitled

3. Tạo nhiều đối tượng:

 – Đầu tiên, chúng ta cần nắm rõ vài cú pháp trong việc thao tác với mảng:

  + Cú pháp khai báo một mảng các phần tử:

 Untitled

  + Thêm phần tử vào mảng (Trong trường hợp này thì Rect là đối tượng ta sẽ thêm vào mảng):

Untitled

  + Xóa phần tử trong mảng:

 Untitled

 – Vì 3 sự kiện chuột độc lập nhau nên chúng ta cần một biến để liên kết 3 sự kiện này lại: 

 + Nếu ta nhấp chuột trong hình vuông nào thì biến này sẽ lưu lại chỉ số của hình này trong mảng.

 + Tiếp theo, nếu biến lưu chỉ số của phần tử trong mảng thì khi di chuyển chuột, ta sẽ di chuyển phần tử đó.

 + Cuối cùng, chúng ta sẽ reset lại biến đó tại sự kiện thả chuột.

 – Phương thức draw() của chương trình:

 + Đầu tiên chúng ta sẽ xóa toàn bộ màn hình trong phạm vi khung vẽ canvas.

 + Sau đó, ta cho chạy vòng lặp từ đầu mảng tới cuối mảng và thực hiện phương thức vẽ cho toàn bộ các phần tử trong mảng.

 – Ở sự kiện mouseDown: 

  + Chúng ta sẽ kiểm tra xem vị trí nhấp chuột có nằm trong hình vuông nào không, thực hiện kiểm tra từ cuối mảng trở về đầu mảng để đảm bảo các ô vuông xuất hiện sau sẽ được kiểm tra trước.

 + Nếu không có phần tử nào được chọn thì ta sẽ thêm một phần tử mới vào mảng tại vị trí nhấp chuột trên màn hình. Vì có một hình vuông mới vừa tạo ra nên ta gọi phương thức draw() để hiển thị lại tất cả hình vuông cũ và hình vuông mới vừa tạo.

 Hiện thực sự kiện mouseDown:

Untitled

 – Ở sự kiện mouseMove: 

 Nếu đang nhấp chuột vào một hình vuông nào đó thì ta thực hiện di chuyển hình vuông đó theo những vị trí mới của chuột trên màn hình, sau đó ta gọi phương thức draw() để vẽ lại các hình khác và hình đang di chuyển ở vị trí mới.

 Hiện thực sự kiện mouseMove:

Untitled

 – Ở sự kiện mouseUp: 

Ta sẽ reset lại biến liên kết 3 sự kiện với nhau trong sự kiện này.

Untitled

Chúng ta có thể chạy lại để kiểm tra thành quả như Hình 3:

Untitled

Hình 3

Vậy là chúng ta vừa hoàn thành xong một chương trình tương đối đơn giản nhưng qua chương trình này chúng ta biết được cách quản lí nhiều đối tượng đồng thời, các bạn có thể thêm vài chi tiết đơn giản để cho chương trình sinh động hơn như là chuyển màu ô mà chuột đang nhấp sang màu đỏ, có bao viền xung quanh… Chúc các bạn thành công.

HTML5 – Đối tượng chuyển động như thế nào?

Chuyển động của nhân vật là cần thiết trong mỗi game, nó làm cho trò chơi trở nên sinh động, bớt nhàm chán và tăng tính hấp dẫn cho người chơi. Vậy làm thế nào để tạo một nhân vật có thể chuyển động, chúng ta sẽ tìm hiểu cách tạo một đối tượng chuyển động bằng ngôn ngữ HTML5 qua bài viết này. Link download

Việc chuyển động trong game cũng như những đoạn phim, thực chất chúng chỉ là những hình ảnh nối tiếp nhau xuất hiện, làm cho người chơi có cảm giác như nhân vật đang thực sự di chuyển. Vì thế, nếu số lượng hình ảnh càng nhiều thì nhân vật được miêu tả càng chính xác, càng giống thật hơn.

Hình 1 mô tả một chú chim đang bay lượn với 28 trạng thái khác nhau.

Image

Hình 1

Như vậy ta đã hiểu về cách chuyển động của nhân vật trong game, ta bắt tay vào thực hiện từng bước:

1. Bắt đầu một chương trình:

     – Như thường lệ, đoạn code bên dưới sẽ là tiền đề bắt đầu một chương trình sử dụng canvas:

Untitled

     – Chúng ta sẽ kiểm tra lại đoạn code trên có chạy được không bằng việc vẽ hình nền cho chương trình.

    – Như đã giới thiệu ở trên, chương trình của chúng ta sẽ mô tả 1 chú chim đang bay, vì vậy Hình 2 sẽ được dùng làm hình nền cho chương trình.

background

Hình 2

     – Ta gọi phương thức drawImage để vẽ hình nền :

Untitled

     – Sau đó, chúng ta chạy thử chương trình để xem thành quả.

2. Đnh nghĩa đi tượng và to các phương thc cho đi tượng:

     – Đầu tiên, chúng ta sẽ định nghĩa cho chú chim gồm các thuộc tính:

+ Giới hạn đường bay cho chú chim, chúng ta sẽ giới hạn theo kích thước của hình nền, chiều dài là 1366 px và chiều cao là 768 px.

+ Hình ảnh gồm: link dẫn đến hình, số khung hình (trong ví dụ này thì ta có 28 khung, tương đương với 28 trạng thái của chú chim đang bay), khung đang hiển thị, chiều dài và chiều rộng của khung.

+ Vị trí chú chim đang bay trên màn hình.

     Hiện thực phần thuộc tính:

Untitled

 – Tiếp theo, chúng ta sẽ định nghĩa phương thức update() cho nhân vật. Để mô tả nhân vật cần thực hiện 2 việc:

+ Thay đổi tọa độ x tăng dần từ trái sang phải.

+ Trong 28 trạng thái của chú chim, ta phải tính toán làm sao cho từng trạng thái xuất hiện lần lượt và khi kết thúc 28 trạng thái thì trở lại trạng thái đầu tiên.

     Hiện thực phương thức update():

Untitled

 – Cuối cùng là phương thức draw() cho nhân vật. Dựa vào phương thức update(), việc chia hình nhân vật theo từng frame cần các bước sau:

1. Tọa độ cần cắt theo chiều rộng.

Untitled - Copy

2. Tọa độ cần cắt theo chiều cao.

Untitled - Copy

3. Chiều rộng cần cắt.

Untitled - Copy

4. Chiều cao cần cắt.

Untitled - Copy

5. Tọa độ X sẽ hiển thị trên màn hình.

6. Tọa độ Y sẽ hiển thị trên màn hình.

7. Chiều rộng cần hiển thị trên màn hình.

8. Chiều cao cần hiển thị trên màn hình.

     Hiện thực phương thức draw(), mỗi bước trên sẽ tương ứng với mỗi kí hiệu số trong phần code:

Untitled

3. Tạo đối tượng và gọi các phương thức của đối tượng:

– Chương trình chính cũng cần các hàm chức năng như draw() và update(), chúng ta sẽ gọi hàm update() thông qua phương thức setInterval(). Phương thức setInterval() thực chất là một vòng lặp, vì vậy việc cập nhật của chương trình sẽ luôn được diễn ra cho đến khi chúng ta dừng vòng lặp lại bằng phương thức clearInterval().

– Dựa vào chú chim vừa định nghĩa, chúng ta tiến hành khai báo trong chương trình và gọi các phương thức bird.update() và bird.draw().

     Hiện thực quá trình khai báo, cập nhật và vẽ chú chim:

Untitled

Như vậy là chúng ta đã hoàn thành việc mô tả 1 chú chim đang bay, các bạn có thể cho chú chim bay ngược lại mỗi khi bay hết chiều rộng, cho chú lượn lên lượn xuống tùy thích bằng cách thay đổi tọa độ Y theo một giá trị ngẫu nhiên hoặc thêm âm thanh để làm cho chương trình trở nên sinh động hơn. Chúc các bạn thành công.