Bạn có thể sử dụng javascript và tạo trò chơi không?

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ố đó. Vâng, 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 ta có thể tạo trò chơi bằng HTML và JavaScript

Để tạo trò chơi, chúng ta sẽ sử dụng HTML Canvas, vì vậy trước khi tiếp tục, chúng ta cần hiểu thuật ngữ HTML Canvas

Canvas HTML

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 thùng chứa đồ họa và vẽ đồ họa thực trên đó và bạn phải sử dụng ngôn ngữ kịch bản như JavaScript. Một loạt các phương thức/chức năng cũng được cung cấp có thể được sử dụng để vẽ các đườ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 yếu tố canvas có thể được sử dụng cho nhiều thứ khác. Một số trong số họ đượ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ư nảy một quả bông, để tạo hiệu ứng động cho bất kỳ thứ gì khác
  4. Nó có thể cung cấp sự tương tác;

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

Cú pháp tạo Canvas

Thí dụ

đầu ra

Chúng tôi đã tạo khu vực trò chơi bằ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à một đối tượng dựng sẵn của phần tử được gọi là đối tượng getContext ["2d"] chứa tất cả các phương thức/hàm và thuộc tính cần thiết để vẽ đồ họa trong

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

Bước 1. khu 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 chương trình đã cho

Trong chương trình trên, chúng ta đã tạo một hàm "startGame[];" . Phương thức "start[]" sau đó tạo canvas và chèn nó vào phần tử body dưới dạng 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 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

Hàm 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

Thuyết minh 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[];"

đầu ra

Bước 3. khung

Để thêm sức sống cho trò chơi của chúng tôi và giúp trò chơi sẵn sàng 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[]; . Ngoài ra, chúng ta cũng phải thêm chức năng gọi là clear[] để xóa toàn bộ khu vực trò chơi [hoặc toàn bộ canvas]

Bên trong hàm tạo "thành phần", chúng ta sẽ gọi một hàm để xử lý bản vẽ thành phần, được gọi là hàm "Cập nhật []"

UpdateMyGame[];

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 khung vẽ và xóa ở tốc độ 50 khung hình mỗi giây

Chúng ta 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

Để hiển thị 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 phẳng ngang] bằng 1 pixel mỗi khi chức năng "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

Một trò chơi phải có các đ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 ta 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 tôi sẽ sử dụng các thuộc tính sau đây làm chỉ báo tốc độ

Chúng tôi cũng phải thêm một chức năng mới gọi là "newPos[];" . Hàm newPos[];

Thí dụ

đầu ra

Bước 6. Tạo ra một số chướng ngại vật

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/chướng ngại vật nào

Hãy xem cách chúng ta có thể tạo 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

Thí dụ

Chúng ta có thể tạo bao nhiêu ràng buộc/chướng ngại vật tùy thích bằng cách áp dụng quy trình được sử dụng ở trên trong chương trình

Ghi chú. điều cần thiết là 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 các chướng ngại vật

Nếu có chướng ngại vật trong một trò chơi, nhưng nếu chúng tĩnh, thì không ai muốn chơi trò chơi đó

Để cung cấp chuyển động cho các 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 lần cập nhật

Thí dụ

Điều gì sẽ xảy ra nếu bạn va vào 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 chơi gặp phải bất kỳ chướng ngại vật nào thì trò chơi đó sẽ kết thúc.

Để làm điều này, chúng ta cần tạo một phương thức mới trong hàm 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 hiện 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 sẽ được gọi 50 lần trong một giây]. Chúng tôi cũng sẽ phải thêm điểm dừng[];

Chương trình

đầu ra

Tạo các 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 ta 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 liên tục theo các hướng khác nhau để tránh va vào 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 đơn giản nhất

Trong phương pháp này, trước tiên chúng ta phải tạo một biến mới, e. g. , "userscore" và cũng cần tạo một thành phần khác để hiển thị điểm của người dùng

Như chúng ta đã 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ề loại thành phần, trong trường hợp này là loại "văn bản"

Trong hàm tạo của thành phần, chúng tôi sẽ kiểm tra loại của thành phần e. g. , nếu nó là thành phần của "văn bản" 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 thức "fillText. "

Cuối cùng, chúng ta sẽ sử dụng thuộc tính FrameNo để đếm điểm. Để thực hiện điều này, chúng tôi phải sửa đổi một số mã của "updateGameArea[];"

Chủ Đề