Video: Building Dynamic Web Apps with Laravel by Eric Ouyang 2025
Sẽ có những lúc bạn sẽ sử dụng lại các đối tượng nhiều lần trong các trò chơi HTML5 của mình và chúng sẽ vẫn giữ nguyên như cũ. Vì vậy, nó làm cho tinh thần để đưa chúng vào một thư viện để tái sử dụng dễ dàng. Đó là chính xác những gì bạn sẽ làm. Hãy xem frogLib. js:
// frogLib. js / / Đối tượng cho chức năng trò chơi ếch Fly () {tFly = mới Sprite (cảnh, "bay. png", 20, 20); tFly. setSpeed (10); tFly. wriggle = function () {// thay đổi hướng bởi một số ngẫu nhiên newDir = (Toán học ngẫu nhiên () * 90) - 45; điều này. changeAngleBy (newDir);} // end wriggle return tFly;} // end Chức năng bay Frog () {tFrog = mới Sprite (cảnh, "ếch png", 50, 50); tfrog. maxSpeed = 10; tfrog. minSpeed = -3; tfrog. setSpeed (0); tfrog. setAngle (0); tfrog. checkKeys = function () {if (keysDown [K_LEFT]) {this. changeAngleBy (-5);} // end if if (keysDown [K_RIGHT]) {this. changeAngleBy (5);} // end if if (keysDown [K_UP]) {this. changeSpeedBy (1); nếu (tốc độ> này maxSpeed) {this. setSpeed (this. maxSpeed);} // end if} // end nếu if (keysDown [K_DOWN]) {this. changeSpeedBy (-1); nếu (tốc độ
Đây là một tài liệu thú vị. Nó không chứa gì ngoài hai định nghĩa của lớp. Nó được sử dụng bởi vì một số chương trình khác sẽ sử dụng hai lớp học này.
Sử dụng thư viện là sự đơn giản. Đây là ếch. tập tin html mà đặt hai yếu tố này lại với nhau trong một trò chơi: . html
src = "frogLib. js"> var scene; var ếch; bay bay; var lá; chức năng init () {scene = new Scene (); bối cảnh. setBG ("xanh"); ếch = ếch mới (); bay = bay mới (); lá = mới Sprite (cảnh, "lá. png", 640, 480); lá. setSpeed (0); bối cảnh. bắt đầu ();) / / end init update chức năng () {scene. thông thoáng(); ếch. checkKeys (); bay. lắc lư (); lá. cập nhật (); ếch. cập nhật (); bay. update ();} // end update (); Chương trình này không giới thiệu nhiều điều đó là mới. Nó đơn giản thực hiện các phần tử được xác định trong thư viện, theo các bước sau:
Nhập khẩu froglib. js thư viện.
-
Tệp frogLib chỉ đơn giản là một tệp JavaScript. Nhập khẩu nó theo cách bạn nhập khẩu đơn giảnGame. js với một thẻ riêng biệt.
Tạo sprite.
-
Lá thư giãn chỉ là một bình thường. Xây dựng ếch và bay giống như bạn đã làm trước đó, mặc dù chúng được định nghĩa trong một tệp khác. (Nếu ếch hoặc ruồi không được tạo ra, đảm bảo bạn nhập thư viện một cách chính xác)
Quản lý thay đổi.
-
Chức năng update () chịu trách nhiệm kiểm soát trò chơi. Đây là nơi bạn quản lý tất cả các hành vi khác nhau của ma cà rồng: Nói cho ếch để tìm các phím bấm (với ếch checkKeys () phương pháp), và nói bay để nghiêng (với các bay. Wriggle () phương pháp).
Vẽ các sprites.
-
Một khi bạn đã xử lý tất cả mọi thứ đã gây ra các sprites để thay đổi, vẽ sprites trên màn hình. Vẽ mỗi sprite bằng cách gọi phương thức update () của nó. Sprites được vẽ theo thứ tự, vì vậy bất cứ điều gì bạn muốn có trong nền nên được rút ra trước khi các mục sẽ hiển thị ở phía trước. (Ếch sẽ xuất hiện trên nền, do đó con ếch nên được rút ra sau khi nền trên mỗi màn hình cập nhật.)
