Bạn có thể tạo trò chơi trên PC bằng JavaScript không?

Tất cả các bài học — và các phiên bản khác nhau của trò chơi MDN Breakout mà chúng ta đang cùng nhau xây dựng — đều có sẵn trên GitHub

1. Tạo Canvas và vẽ trên đó
2. Di chuyển quả bóng
3. Thoát ra khỏi các bức tường
4. Paddle và điều khiển bàn phím
5. Trò chơi kết thúc
6. Xây dựng cánh đồng gạch
7. phát hiện va chạm
8. Theo dõi điểm số và giành chiến thắng
9. điều khiển chuột
10. kết thúc lên

Bắt đầu với JavaScript thuần túy là cách tốt nhất để có kiến ​​thức vững chắc về phát triển web game. Sau đó, bạn có thể chọn bất kỳ khung nào bạn thích và sử dụng nó cho các dự án của mình. Các khung chỉ là các công cụ được xây dựng bằng ngôn ngữ JavaScript; . Các khung tăng tốc thời gian phát triển và giúp xử lý các phần nhàm chán của trò chơi, nhưng nếu có điều gì đó không hoạt động như mong đợi, bạn luôn có thể thử gỡ lỗi điều đó hoặc chỉ cần viết các giải pháp của riêng mình bằng JavaScript thuần túy

Ghi chú. Nếu bạn quan tâm đến việc tìm hiểu về phát triển trò chơi web 2D bằng thư viện trò chơi, hãy tham khảo đối tác của loạt bài này, trò chơi đột phá 2D bằng Phaser

Ghi chú. Loạt bài viết này có thể được sử dụng làm tài liệu cho các hội thảo thực hành về phát triển trò chơi. Bạn cũng có thể sử dụng Bộ nội dung Canvas của Gamedev dựa trên hướng dẫn này nếu bạn muốn nói về phát triển trò chơi nói chung

Các trò chơi JavaScript mang tính giải trí, dễ tạo và là một phương pháp tuyệt vời để các bạn trẻ học cách viết mã. JavaScript là ngôn ngữ máy tính nổi tiếng có thể tìm thấy trên hầu hết mọi trang trên internet. Khi bạn thêm JavaScript vào một ứng dụng web, nó có thể làm cho hoạt ảnh và tương tác trở nên sống động, giúp việc lướt web và chơi trò chơi trở nên thú vị hơn

Tiềm năng của Javascript để tạo ra các trò chơi có thể dễ dàng chơi trên web là một chủ đề phổ biến thu hút sinh viên học cách lập trình với nó. Với sự tiến bộ của kết nối internet và phần cứng máy tính, không có gì ngạc nhiên khi những người sáng tạo trò chơi đã sử dụng JavaScript để tạo nội dung mới trong thập kỷ trước

Bây giờ bạn đã biết JavaScript có thể được sử dụng để tạo trò chơi, bạn có thể tự hỏi liệu nó có phù hợp với nhiệm vụ không

Đúng. Tùy thuộc vào loại trò chơi bạn muốn tạo, JavaScript là một ngôn ngữ tuyệt vời để sử dụng. Đối với các trò chơi trên web và trên thiết bị di động, JavaScript là lựa chọn lý tưởng. Đây cũng là một ngôn ngữ tuyệt vời cho trẻ em học vì nó thường dễ nắm bắt và có rất nhiều tài nguyên trực tuyến dành cho các lập trình viên. Chúng tôi khuyên học sinh trung học cơ sở và trung học phổ thông nên học JavaScript như một phần của lớp viết mã

Trò chơi JavaScript có thể được chơi trên trình duyệt hoặc trên điện thoại di động, vì vậy chúng là lựa chọn tuyệt vời nếu đó là mục tiêu của bạn. Nền tảng và công nghệ có thể hỗ trợ tạo cả nội dung 2D và 3D

Mặt khác, nếu bạn muốn sử dụng JavaScript để tạo trò chơi AAA khổng lồ tiếp theo như Call of Duty hoặc FIFA, bạn có thể gặp khó khăn. Mặc dù có tính linh hoạt nhưng JavaScript chậm hơn nhiều và sử dụng nhiều bộ nhớ hơn các ngôn ngữ như C++. Các trò chơi nâng cao yêu cầu tính toán GPU chuyên sâu, đây là một trọng lượng đáng kể để vận chuyển mà JavaScript không được thiết kế để xử lý

Mọi người thường so sánh JavaScript với Java và thậm chí sử dụng nhầm hai thuật ngữ này thay thế cho nhau. Trên thực tế, JavaScript và Java không liên quan với nhau, với điểm chung duy nhất của chúng là cả hai đều là ngôn ngữ lập trình có thuật ngữ “Java” trong tên của chúng

Trong khi Java là ngôn ngữ biên dịch, JavaScript là ngôn ngữ kịch bản được giải thích. Mã không cần phải được biên dịch vì nó là ngôn ngữ kịch bản được giải thích. Thay vào đó, lệnh của người dùng diễn giải kết quả. Đây là lý do tại sao nó rất hiệu quả khi xây dựng trang web. Trên một trang web, người dùng thường xuyên nhấp chuột và cuộn, cung cấp dữ liệu mà JavaScript có thể sử dụng để thực hiện một hành động

Mặt khác, Java yêu cầu mã được xây dựng trước khi nó có thể được thực thi. Nghĩa là, mã được chuyển đổi sang ngôn ngữ máy mà máy tính có thể hiểu được

Bây giờ nó đã hết cách, khả năng chơi trò chơi cho các ngôn ngữ này là gì? . Tuy nhiên, nếu bạn muốn tạo một trò chơi có thể chạy trên PC hoặc bảng điều khiển, Java sẽ là lựa chọn tốt hơn. Minecraft, một trò chơi phổ biến dựa trên Java, là một trong những trò chơi phổ biến nhất

Mã JavaScript là tất cả văn bản và mặc dù mạnh mẽ nhưng nó không có khả năng tự làm mọi thứ. Việc sử dụng công cụ trò chơi hoặc thư viện trình kết xuất trong khi thiết kế trò chơi bằng JavaScript là điều khá điển hình. Trẻ em học cách đưa các công cụ trò chơi vào chương trình của chúng sẽ tiến một bước gần hơn đến việc hiện thực hóa trò chơi lý tưởng của chúng

Công cụ trò chơi là các phần mềm cho phép bạn thêm các tính năng bổ sung vào trò chơi của mình bao gồm âm thanh, hoạt ảnh, hình ảnh và vật lý. Khi nói đến việc chọn một công cụ trò chơi hoặc thư viện kết xuất cho trò chơi của bạn, bạn có rất nhiều lựa chọn thay thế. Dưới đây là một vài ví dụ phổ biến để lựa chọn

PixiJS là một công cụ nguồn mở tự hào có API nhanh và hấp dẫn. Trình kết xuất 2D cũng đa nền tảng, cho phép bạn tạo trò chơi cho nhiều nền tảng khác nhau. Là nguồn mở cũng cho phép một cộng đồng lớn và nhiệt tình đóng góp vào sự phát triển liên tục của động cơ

BabylonJS là một bộ công cụ kết xuất với một bộ khả năng phong phú cho phép bạn tạo mọi thứ từ hoạt hình đơn giản đến các trò chơi 3D chính thức. BabylonJS, giống như PixiJS, là mã nguồn mở và được hỗ trợ bởi một cộng đồng các nhà phát triển rộng lớn

Phaser hỗ trợ các trò chơi HTML5 trên cả nền tảng máy tính để bàn và thiết bị di động. Trọng tâm chính của nó là tạo ra các trò chơi 2D có thể được xây dựng cho nhiều nền tảng khác nhau. Khả năng sử dụng các plugin bổ sung khi cần là một trong những lợi thế của Phaser. Điều này cho phép bạn giữ các công cụ của mình nhỏ gọn để bạn không có quá nhiều bộ phận thừa

Để bắt đầu, hãy chuyển đến trình chỉnh sửa bạn chọn. Các ví dụ hiển thị ở đây sẽ sử dụng trình chỉnh sửa CodeWizardsHQ của chúng tôi

Dòng mã đầu tiên chúng tôi viết sẽ tạo ra một trò chơi canvas. Chiều cao và chiều rộng có thể được điều chỉnh khi cần thiết. Có bốn bước để thực hiện điều này

Trong thẻ style>/style>, hãy dán mã canvas của bạn
Trong các thẻ script>/script> của bạn, hãy tạo hàm startGame và thiết lập các biến và getCanvas của bạn
Trong thẻ body>/body>, gọi startGame onload
Sử dụng thẻ h1>/h1> trong phần tử body>/body> để cung cấp tiêu đề nếu muốn
Tiêu đề trò chơi của chúng ta, Block Hopper, sẽ xuất hiện trong một hình chữ nhật màu xanh nhạt. Cài đặt trò chơi của chúng tôi sẽ là thế này

Ghi chú. Tất cả mã bạn viết sau bước này sẽ nằm trong thẻ Script>/Script>

Bây giờ hãy thêm người chơi của chúng tôi. Điều này sẽ được thực hiện trong bốn bước

1. Tạo biến người chơi
2. Tạo một biến để lưu trữ vị trí Y của người chơi
3. Tạo một hàm gọi là createPlayer() với các tham số chiều rộng, chiều cao và vị trí x
4. Trong startGame(), chúng ta sử dụng phương thức từ bước 3 để tạo trình phát của mình và gán nó cho biến mà chúng ta đã xác định ở bước 1

Hãy cho người chơi cảm giác về lực hấp dẫn. Các bước thực hiện như sau

1. Tạo biến FallSpeed
2. Tạo một khoảng thời gian mới và lưu nó vào một biến sẽ được sử dụng để gọi hàm updateCanvas()
3. Tạo hai chức năng cho trình phát của chúng tôi. một để vẽ và một để di chuyển
4. Tạo một hàm gọi là updateCanvas() để xóa canvas và vẽ lại trình phát

Cầu thủ của chúng tôi đang rơi, nhưng chúng tôi muốn nó dừng lại ngay khi tiếp đất. Trong hàm createPlayer() của bạn, hãy thêm hàm stopPlayer(). Sau đó, khi kết thúc movePlayer, hãy gọi hàm ()

Bây giờ, khi chúng ta nhấn phím cách, trình phát của chúng ta sẽ nhảy

1. Tạo một thuộc tính jumpSpeed ​​và một boolean isJumping
2. Trong hàm createPlayer() của bạn, hãy thêm hàm jump()
3. Thực hiện thay đổi đối với chức năng makeFall() của chúng tôi
4. Bên trong updateCanvas, gọi hàm jump() của chúng ta ()
5. Tạo một phương thức gọi là resetJump()
6. Khi chúng tôi nhấn phím cách, hãy chuyển đổi boolean isJumping và chạy resetJump()

Đã đến lúc xây dựng hệ thống phòng thủ chống lại bạn. Điều này sẽ tương tự như xây dựng trình phát, nhưng các đặc điểm của khối của chúng tôi sẽ được tạo ngẫu nhiên

1. Tạo một biến khối mới và sử dụng hàm createBlock() để tạo một khối mới
2. Gán một giá trị từ createBlock cho biến khối ()
3. Bên trong startGame(), gọi hàm và gắn nó vào biến của bạn
4. Tạo một phương thức gọi là RandomNumber()
5. Gán các số ngẫu nhiên cho chiều rộng, chiều cao và tốc độ cho hàm createBlock() của bạn. Sau đó xây dựng hai chức năng. vẽ() và tấn côngPlayer()
6. Chặn cuộc gọi trong updateCanvas(). Draw() và block là hai hàm có thể sử dụng cùng nhau. attackPlayer();

Tuyệt vời. Bây giờ, khối của chúng tôi sẽ tấn công người chơi của chúng tôi, nhưng nó sẽ không bao giờ quay trở lại sau khi chạm đến mép màn hình. Hãy giải quyết vấn đề này

1. Tạo một hàm gọi là returnToAttackPostion() bên trong createBlock()
2. Đặt lại các giá trị chiều rộng, chiều cao, tốc độ và x và y của khối
3. Khi kết thúc cuộc tấn công, hãy gọi chức năng mới
   Người chơi()

Chúng ta phải kết thúc trò chơi khi khối tấn công thành công người chơi. Đã đến lúc phát triển chức năng detectCollision() để dừng trò chơi nếu có va chạm. Trong hàm updateCanvas() của bạn, hãy gọi hàm detectCollision()

Đối với đêm chung kết, chúng tôi sẽ thêm điểm vào trò chơi của mình. Điều này được thực hiện giống như cách tạo hình, ngoại trừ chúng tôi sẽ chỉ định thuộc tính fillText và phông chữ

1. Tạo một biến điểm bằng 0 để bắt đầu. Khi bạn ở đó, hãy tạo một biến scoreLabel để sử dụng sau này
2. Tạo hàm createScoreLabel() với hàm draw()
3. Gán giá trị cho nhãn điểm của bạn bằng hàm createScoreLabel() của chúng tôi
4. Điểm cuộc gọiNhãn. vẽ() trong updateCanvas()
5. Tăng điểm của bạn sau khi khối của bạn đi đến cuối

Và như vậy, bạn đã hoàn thành trò chơi JavaScript đầu tiên của mình. Tuy nhiên, cách tiếp cận tốt nhất để cải thiện kỹ năng lập trình của bạn là viết mã của riêng bạn. Dưới đây là một số chướng ngại vật khác mà bạn có thể cố gắng kết hợp vào trò chơi của mình