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
- Nó có thể được sử dụng để vẽ văn bản
- Nó có thể được sử dụng để vẽ đồ họa
- 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
- 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[];"