Làm thế nào để Xây dựng Hoạt hình với simpleGame. js Trò chơi HTML5 của bạn - núm vú

Có thể xây dựng một thư viện đơn giản hóa tất cả các tính năng của các công cụ trò chơi HTML5 khác nhau. Xem xét sử dụng thư viện: simpleGame. js. Thư viện này rất dễ sử dụng và hoàn toàn có khả năng phát triển trò chơi tinh vi. Để bắt đầu, bạn thực sự cần phải hiểu chỉ có hai đối tượng:

• Cảnh: Đối tượng này bắt đầu với một đối tượng canvas HTML và thêm vào vòng lặp chính. Cảnh là đối tượng thống nhất điều khiển trò chơi.

• Sprites: Các đối tượng này là các phần tử di chuyển xung quanh màn hình. Hầu hết các yếu tố trò chơi là sprites. Mỗi một sprite phải thuộc một cảnh duy nhất, nhưng bạn có thể có nhiều sprites như bạn muốn. Một ma cà rồng được dựa trên một hình ảnh.

  

Mã này thực sự phức tạp hơn nhiều so với trông nó. Đây là những gì nó làm:

• Thêm trang vải vào trang. Hình chữ nhật màu xám thực sự là một nhãn canvas được tự động thêm vào trang.

• Nó bắt đầu một vòng lặp trò chơi. Chương trình này có một vòng lặp trò chơi đã chạy ở tốc độ 20 khung hình / giây.

• Nó có chứa một thần. Hình bóng là một quả táo, có khả năng di chuyển bất kỳ tốc độ theo bất kỳ hướng nào và các tính năng thú vị khác như phát hiện va chạm được tích hợp sẵn.

• Bóng đang di chuyển. Nó sẽ tự động kết thúc ở phía bên kia của màn hình khi nó để lại một bên.

Đây là toàn bộ danh sách mã:

redBall. html / / đơn giản trò chơi với một bóng duy nhất di chuyển var cảnh; var ball; chức năng init () {scene = new Scene (); ball = mới Sprite (cảnh, "redBall. png", 50, 50); trái bóng. setMoveAngle (180); trái bóng. setSpeed ​​(3); bối cảnh. bắt đầu ();) / / end init update chức năng () {scene. thông thoáng(); trái bóng. Cập nhật ();} // end update

Bạn bắt đầu với một trang HTML5 cơ bản và thêm một vài tính năng để biến nó thành môi trường chơi game.

Làm thế nào để xây dựng trang trò chơi của bạn

Bắt đầu bằng cách xây dựng trang bên dưới:

1. Bắt đầu với một trang HTML5.

   Bạn có thể sử dụng cùng một công cụ mà bạn đã sử dụng cho sự phát triển web khác của bạn. Xây dựng một mẫu HTML5 cơ bản như bạn làm với bất kỳ tài liệu HTML5 nào khác.

2. Nhập khẩu đơn giảnGame. js thư viện.

   Thư viện này có sẵn miễn phí từ trang web. Sử dụng một thẻ để nhập thư viện. Đặt thuộc tính src là tên của thư viện (simpleGame. Js).

3. Giữ HTML đơn giản.

   Bạn không cần nhiều. Các trò chơi động cơ sẽ tạo ra một bức tranh có chứa cảnh. Bạn có thể đặt một tiêu đề, hướng dẫn, hoặc các công cụ khác như scoreboards trên trang, nhưng các trò chơi động cơ sẽ làm hầu hết các công việc.

4. Gọi init () khi cơ thể tải.

   Rất phổ biến để có một chức năng được gọi là khi cơ thể tải. Thêm onload = "init ()" vào thẻ cơ thể để gọi phương thức init ().

5. Tạo một thẻ kịch bản thứ hai để chứa mã của bạn.

   Bạn cần phải có thẻ mã lệnh thứ hai cho mã tùy chỉnh. Đặt thẻ này sau thẻ nhập thư viện.

6. Đặt hai chức năng trong kịch bản của bạn.

   Tất cả các chương trình đơn giản sẽ có ít nhất hai chức năng: init () xảy ra khi khởi động, và update () xảy ra một lần cho mỗi khung.

Cách khởi tạo trò chơi của bạn

Phần khởi tạo của trò chơi xảy ra khi trang tải. Nó chủ yếu được thực hiện với thiết lập sprites và các nguồn lực khác. Đây là đoạn code:

var scene; var ball; chức năng init () {scene = new Scene (); ball = mới Sprite (cảnh, "redBall. png", 50, 50); trái bóng. setMoveAngle (180); trái bóng. setSpeed ​​(3);} // end init

Hầu hết các trò chơi sẽ sử dụng một kiểu khởi tạo tương tự. Đây là cách bạn thiết lập trò chơi:

1. Xác định một biến để chứa cảnh.

   Mỗi trò chơi đơn giảnGame sẽ có ít nhất một đối tượng cảnh. Xác định cảnh bên ngoài bất kỳ chức năng nào, vì vậy nó có sẵn cho tất cả các đối tượng. Bạn sẽ thực sự tạo ra cảnh bên trong init () chức năng.

2. Xác định một biến cho mỗi sprite.

   Tất cả các sprite trong trò chơi của bạn cũng cần phải thuộc về một biến toàn cầu. Bạn sẽ tạo ra các sprites trong init () function, nhưng bạn cần tạo biến có sẵn cho tất cả các chức năng.

3. Xây dựng chức năng init ().

   Chức năng này được gọi bằng tải thân. Nó sẽ chạy sau khi trang đã được nạp vào bộ nhớ.

4. Tạo cảnh.

   Để xây dựng hiện trường, hãy tạo ra một thể hiện của lớp cảnh. Những gì bạn thực sự nói là "Làm cho tôi một đối tượng cảnh và gọi trường hợp cụ thể này '. '"Cảnh không yêu cầu bất kỳ thông số nào.

5. Tạo bóng sprite.

   Bóng là một ví dụ Sprite. Để tạo ra một sprite, bạn cần thêm một vài thông tin nữa. Bạn cần một cảnh, một tên tập tin hình ảnh, chiều rộng và chiều rộng.

6. Đặt góc chuyển động của quả cầu.

   Bạn có thể thay đổi góc mà quả bóng di chuyển. Các góc được đo bằng các độ như trên bản đồ.

7. Đặt tốc độ di chuyển của quả cầu.

   Bạn cũng có thể xác định tốc độ của quả bóng.

8. Bắt đầu cảnh.

   Khi bạn đã hoàn tất việc thiết lập mọi thứ, hãy nói cảnh để bắt đầu.

Cập nhật hoạt hình trò chơi

Sau khi bạn bắt đầu cảnh, một bộ đếm thời gian sẽ bắt đầu. Hai mươi lần một giây, nó sẽ gọi một hàm trên trang của bạn gọi là update (). Vì vậy, bạn cần phải có một chức năng như vậy, và nó cần có một số mã cho trò chơi của bạn để chạy.

Các update () chức năng không phải là terribly khó khăn cả.

cập nhật chức năng () {scene. thông thoáng(); trái bóng. Cập nhật ();} // end update

Chức năng update () thường thực hiện ba việc:

• Xóa màn hình trước đó: Thứ tự đầu tiên của việc kinh doanh là dọn dẹp bất cứ lộn xộn nào gây ra bởi màn hình cuối cùng. Đối tượng Scene có một hàm rõ ràng () cho chính xác mục đích này.

• Kiểm tra sự kiện: Thông thường, bạn kiểm tra các sự kiện, như đầu vào của người dùng, sprites rơi vào nhau, sprites rời khỏi màn hình, hoặc bất cứ điều gì.Đối với hình ảnh động đơn giản này, sự kiện duy nhất là một ma cà rồng rời khỏi màn hình và hành vi liên quan đến hành động này đã được tự động hóa.

• Cập nhật mỗi sprite: Phần cuối cùng của bản cập nhật màn hình đang cập nhật các sprites. Khi bạn cập nhật một sprite, nó sẽ rút ra ở vị trí mới.

Đây là điều sẽ xảy ra nếu bạn không xóa màn hình. Tất cả các chuyển động ma sẽ được vẽ trên vải, và nó trông giống như một smear lớn hơn là một quả bóng di chuyển.