tiếp theo →
← trước

Làm thế nào để tạo một trò chơi JavaScript?

JavaScript cho phép chúng ta làm rất nhiều điều thú vị và tạo trò chơi cũng là một trong số đó. Đúng vậy, ngoài việc làm cho trang web của chúng tôi hấp dẫn hơn, đẹp hơn, chúng tôi cũng có thể sử dụng JavaScript để tạo một số loại trò chơi.

Vì vậy, hãy xem cách chúng tôi có thể tạo trò chơi bằng HTML và JavaScript.

Để tạo trò chơi, chúng tôi sẽ sử dụng HTML Canvas , vì vậy trước khi đi sâu hơn, chúng tôi cần hiểu thuật ngữ HTML Canvas.

HTML Canvas

& lt; Canvas & gt; là một trong nhiều loại phần tử HTML . Về cơ bản, nó được sử dụng để vẽ đồ họa một cách nhanh chóng, với sự trợ giúp của các ngôn ngữ kịch bản (thường là JavaScript). Phần tử này hoạt động như một vùng chứa đồ họa và vẽ đồ họa thực trên đó và bạn phải sử dụng ngôn ngữ tập lệnh như JavaScript . Nhiều phương pháp / chức năng cũng được cung cấp có thể được sử dụng để vẽ đường dẫn và nhiều loại hình ảnh như hình tròn, hộp, v.v., cũng như để thêm hình ảnh.

Các phần tử canvas có thể được sử dụng cho nhiều việc khác. Một số trong số chúng được đưa ra dưới đây:

1. Nó có thể được sử dụng để vẽ văn bản.
2. Nó có thể được sử dụng để vẽ đồ họa.
3. Nó có thể được sử dụng để di chuyển đồ họa như trả lại quả bông, để tạo hoạt ảnh cho bất kỳ thứ gì khác.
4. Nó có thể cung cấp sự tương tác; ví dụ: nó có thể phản hồi một số loại sự kiện JavaScript.

Hãy xem cách chúng ta có thể tạo canvas với sự trợ giúp của ví dụ:

Cú pháp để tạo Canvas

Ví dụ

Đầu ra

Chúng tôi đã tạo khu vực trò chơi bằng cách sử dụng phần tử canvas. Nó cũng tốt nhất để tạo các ứng dụng trò chơi HTML, JavaScript vì nó cung cấp hầu hết các chức năng cần thiết để phát triển trò chơi.

. getContext (“2d”)

Đây là đối tượng tích hợp sẵn của & lt; canvas & gt; phần tử được gọi là đối tượng getContext (“2d”) chứa tất cả các phương thức / chức năng và thuộc tính cần thiết để vẽ đồ họa trong & lt; canvas & gt ;.

Hãy bắt đầu phát triển trò chơi của chúng tôi bằng cách tạo một khu vực vui chơi và chuẩn bị vẽ

Bước 1: Khu vực trò chơi

Để tạo khu vực trò chơi, chúng tôi sẽ sử dụng phần tử Canvas, như chúng tôi đã thảo luận ở trên.

Chương trình

Giải thích về chương trình đã cho

Trong chương trình trên, chúng ta đã tạo một hàm “startGame ();” trong đó sau đó chúng tôi gọi phương thức start () của đối tượng mygameArea. Sau đó, phương thức “start ()” sẽ tạo một canvas và chèn nó vào phần tử body làm nút con đầu tiên.

Đầu ra

Bước 2: Thành phần trò chơi

Trong bước này, chúng tôi sẽ tạo một thành phần bằng cách sử dụng một hàm tạo cho phép chúng tôi thêm thành phần đó vào khu vực trò chơi của mình.

Phương thức tạo đối tượng được gọi là “thành phần” và chúng tôi sẽ tạo thành phần đầu tiên của mình với tên “mygamecomponent:”

Hãy hiểu cách tạo thành phần trò chơi với sự trợ giúp của ví dụ sau:

Giải thích về chương trình

Trong chương trình trên, chúng tôi đã tạo một đối tượng có tên “mygameComponent” để tạo thành phần trò chơi của chúng tôi bên trong phần thân của “myGamestart ();” chức năng.

Đầu ra

Bước 3: Khung

Để tăng thêm sức sống cho trò chơi của chúng tôi và sẵn sàng cho hành động, chúng tôi phải làm mới / cập nhật khu vực trò chơi với tốc độ 50 khung hình mỗi giây. Ví dụ: một bộ phim có tốc độ làm mới ít nhất là 60 FP.

Vì vậy, trước hết, chúng ta phải tạo một hàm “updateMyGame (),” và trong đối tượng của hàm này, chúng ta phải thêm một khoảng thời gian sẽ thực thi hàm UpdateMyGame (); trong mỗi 20 mili giây tương đương với 50 lần mỗi giây. Ngoài ra, chúng tôi cũng phải thêm chức năng có tên clear () để xóa toàn bộ khu vực trò chơi (hoặc toàn bộ khung hình).

Bên trong hàm tạo “component”, chúng ta sẽ gọi một hàm để xử lý thành phần trong bản vẽ, được gọi là hàm “Update ()”.

The UpdateMyGame (); gọi hàm clear (); và update (); phương pháp.

Kết quả của tất cả các công việc trên, thành phần trò chơi của chúng tôi được vẽ trên canvas và xóa ở tốc độ 50 khung hình / giây.

Chúng tôi có thể hiểu nó với sự trợ giúp của ví dụ sau:

Chương trình

Đầu ra

Bước: 4 Thêm chuyển động vào thành phần

Để cho thấy rằng hình chữ nhật màu xanh lam được vẽ 50 lần trong một giây, chúng tôi sẽ thay đổi vị trí “a” (mặt bằng nằm ngang) 1pixel mỗi khi hàm “updateGameArea ()” thực thi.

Thay đổi vị trí

Chúng tôi có thể sử dụng tọa độ A và B để thay đổi vị trí hoặc định vị thành phần trò chơi của chúng tôi trong khu vực trò chơi.

Bước 5: Tạo các nút Điều khiển

Trò chơi phải có các nút điều khiển để chơi trò chơi hoặc để điều khiển thành phần trò chơi.

Ở đây, chúng tôi sẽ tạo hai nút điều khiển để điều khiển chuyển động của hộp hình chữ nhật của chúng tôi. Chúng tôi phải tạo một số chức năng cho mỗi nút.

Chúng ta phải tạo thuộc tính mới trong hàm tạo của thành phần và gọi chúng là tốc độ A, tốc độ B. Chúng ta sẽ sử dụng các thuộc tính sau đây làm chỉ số tốc độ.

Chúng tôi cũng phải thêm một hàm mới có tên “newPos ();” đến phương thức khởi tạo của thành phần sẽ sử dụng các thuộc tính speedA, speedB để di chuyển thành phần từ nơi này đến nơi khác (hoặc thay đổi vị trí) trong khu vực trò chơi / canvas. Hàm newPos (); sẽ được gọi từ phần thân của “updatemygame ();” hoạt động ngay trước khi vẽ thành phần.

Ví dụ

Đầu ra

Bước 6: Tạo một số trở ngại

Như chúng ta biết rất rõ rằng bất kỳ trò chơi nào cũng chẳng là gì nếu nó không chứa đựng bất kỳ khó khăn / trở ngại nào.

Hãy xem cách chúng ta có thể tạo ra chướng ngại vật bằng cách tạo một thành phần mới và thêm nó vào khu vực trò chơi.

Ví dụ:

Chúng tôi có thể tạo ra nhiều ràng buộc / trở ngại như chúng tôi muốn bằng cách áp dụng quy trình được sử dụng ở trên trong chương trình.

Lưu ý: cũng cần cập nhật tất cả các thành phần (hoặc chướng ngại vật) trong mọi khung hình.

Đầu ra

Cung cấp chuyển động cho chướng ngại vật

Nếu có chướng ngại vật trong trò chơi nhưng nếu chúng là vật cản thì không ai muốn chơi trò chơi đó.

Để cung cấp chuyển động cho chướng ngại vật của chúng tôi, chúng tôi phải thay đổi thuộc tính của “myfirstObstacle.x” ở mỗi bản cập nhật.

Ví dụ:

Điều gì sẽ xảy ra nếu bạn gặp chướng ngại vật

Như chúng ta đều biết rằng, trong bất kỳ trò chơi nào, nếu người dùng gặp chướng ngại vật nào thì trò chơi sẽ kết thúc.

Để thực hiện việc này, chúng ta cần tạo một phương thức mới trong phương thức khởi tạo của thành phần, phương thức này sẽ tìm kiếm sự va chạm của hộp màu xanh của chúng ta với các ràng buộc khác (hoặc bất kỳ thành phần nào khác) từ đầu trò chơi. Phương thức này phải được thực thi lặp đi lặp lại mỗi khi nhận được bản cập nhật khung (hoặc chúng ta có thể nói rằng phương thức này nên được gọi 50 lần trong một giây). Chúng ta cũng sẽ phải thêm stop (); đến đối tượng mygamearea ‘ sẽ xóa khoảng thời gian 20 mili giây.

Chương trình

Đầu ra

Tạo chướng ngại vật có kích thước ngẫu nhiên

Để làm cho trò chơi của chúng tôi trở nên khó khăn và thú vị hơn một chút, hãy thêm các chướng ngại vật có kích thước ngẫu nhiên để người dùng di chuyển hộp màu xanh lam liên tục theo các hướng khác nhau để tránh va phải chướng ngại vật.

Chương trình

Đầu ra

Bước 7: Hiển thị Điểm Người dùng

Để hiển thị điểm của người dùng, có nhiều cách khác nhau, nhưng để giữ cho trò chơi này đơn giản nhất có thể, chúng tôi sẽ sử dụng một trong những phương pháp dễ dàng nhất.

Trong phương pháp này, trước tiên chúng tôi phải tạo một biến mới, ví dụ: “điểm số người dùng” và cũng cần tạo một thành phần khác để hiển thị điểm số của người dùng.

Như chúng ta đều biết, viết bất kỳ văn bản nào trên canvas hoàn toàn khác với việc tạo / vẽ một hộp trên canvas. Vì vậy, cần phải gọi hàm tạo của thành phần bằng cách sử dụng đối số bổ sung sẽ cho hàm tạo biết về kiểu thành phần, trong trường hợp này là kiểu “văn bản”.

Trong phương thức khởi tạo của thành phần, chúng tôi sẽ kiểm tra loại thành phần, ví dụ: nếu nó là thành phần của “text” và khi chúng tôi kiểm tra loại thành phần, chúng tôi sẽ sử dụng phương pháp < strong> “fillText.”

Cuối cùng, chúng tôi sẽ sử dụng thuộc tính FrameNo để tính điểm. Để triển khai điều này, chúng tôi phải sửa đổi một số mã của hàm “updateGameArea ();” sẽ sử dụng thuộc tính FrameNo và ghi điểm canvas.

Chương trình

Đầu ra

Lưu ý: Bạn cũng có thể thêm nhiều tính năng khác vào trò chơi này để trò chơi hấp dẫn hơn. Ví dụ: hình nền, hiệu ứng âm thanh, v.v.

Chủ đề tiếp theo

Hướng dẫn JavaScript

← trước
tiếp theo →