Trong bài học này, bạn sẽ học cách tạo trò chơi của riêng mình bằng mã JavaScript và HTML. Trò chơi liên quan đến một người chơi (anh hùng) bắt kẻ thù (quái vật) nhiều lần nhất có thể trong thời hạn 30 giây. Phiên bản trò chơi này đã được sửa đổi từ hướng dẫn tại Lost Decade Games, những người đã chia sẻ mã và khuyến khích người dùng sửa đổi và chia sẻ mã đó

Tất cả mã JavaScript bên dưới đều chứa các nhận xét giải thích chức năng của từng phần mã và cách thức hoạt động của nó. Đảm bảo rằng bạn đã đọc các nhận xét để hiểu mã và trước khi thay đổi bất kỳ mã nào. Tất cả các nhận xét trong mã bên dưới bắt đầu bằng hai dấu gạch chéo về phía trước, vd. // đây là một bình luận

Để bắt đầu, bạn sẽ cần tạo hai tệp mới trong trình chỉnh sửa mã của mình

• Một tệp HTML (ví dụ:. mục lục. html)

• Một tệp JavaScript (ví dụ:. trò chơi. js)

Bạn cũng sẽ cần tạo một thư mục hình ảnh với ba hình ảnh (cuộn xuống để xem các hình ảnh ví dụ)

• bối cảnh

• người chơi sprite, và

• ma quỷ của kẻ thù

Mã đầy đủ

Đây là mã HTML và JavaScript cho trò chơi. Đừng quên thay đổi thuộc tính 'src' cho các tệp hình ảnh bgImage (hình nền), playerImage và playerImage thành hình ảnh của riêng bạn trong thư mục của riêng bạn. Cuộn xuống để xem các hình ảnh được sử dụng trong ví dụ

Trò chơi JavaScript thú vị, dễ xây dựng và là cách tuyệt vời để trẻ em học viết mã. JavaScript là ngôn ngữ lập trình rất phổ biến được sử dụng trên hầu hết các trang web trên internet. Việc thêm JavaScript vào ứng dụng dựa trên web có thể mang lại các hình ảnh động và tương tác sống động giúp cho việc duyệt và chơi trò chơi trở nên tuyệt vời hơn

Một chủ đề phổ biến thu hút trẻ em học cách lập trình bằng Javascript là khả năng tạo trò chơi dễ dàng chơi trên web. Với tốc độ internet ngày càng tăng và phần cứng máy tính ngày càng tiên tiến, không có gì ngạc nhiên khi thập kỷ qua chứng kiến ​​ngày càng nhiều nhà phát triển trò chơi tạo ra nội dung mới bằng cách sử dụng JavaScript

Phát triển trò chơi JavaScript

• Trò chơi phổ biến sử dụng JavaScript
• Công cụ trò chơi JavaScript tốt nhất là gì
• Học lập trình JavaScript với Lớp học JavaScript dành cho trẻ em của chúng tôi

JavaScript có tốt cho phát triển trò chơi không?

Bây giờ bạn đã biết mã JavaScript có thể được sử dụng để tạo trò chơi, nó đặt ra câu hỏi liệu nó có tốt cho nhiệm vụ này không.  

Đúng. JavaScript là một ngôn ngữ tuyệt vời để phát triển trò chơi, tùy thuộc vào loại trò chơi bạn muốn tạo. JavaScript là tốt nhất cho các trò chơi dựa trên web và di động. Đây cũng là một ngôn ngữ tuyệt vời cho trẻ em học vì nó thường dễ hiểu và có nhiều tài nguyên dành cho các lập trình viên có sẵn trực tuyến. Chúng tôi khuyến khích dạy JavaScript ở trường trung học cơ sở và trung học phổ thông

Trò chơi JavaScript có thể được chơi trên trình duyệt hoặc điện thoại di động, vì vậy, nếu đó là mục tiêu của bạn, thì đó là một lựa chọn tuyệt vời. Sử dụng các nền tảng và công cụ có thể giúp tạo cả trò chơi 2D và 3D có thể chạy trực tiếp trong trình duyệt của bạn. Ngoài các trò chơi dựa trên web, JavaScript ngày càng phổ biến trong phát triển trò chơi di động.  

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

JavaScript so với Java để phát triển trò chơi

Chúng tôi thường nghe mọi người so sánh JavaScript và Java và thậm chí đôi khi sử dụng sai các từ này thay thế cho nhau. Trên thực tế, JavaScript và Java hoàn toàn không liên quan đến nhau và điểm chung chính của chúng là cả hai đều là ngôn ngữ lập trình có chứa từ “Java. ”

JavaScript là ngôn ngữ kịch bản được giải thích trong khi Java là ngôn ngữ biên dịch. Là một ngôn ngữ kịch bản được giải thích, mã không cần được biên dịch. Thay vào đó, kết quả được giải thích bằng lệnh của người dùng. Đây là lý do tại sao nó hoạt động rất tốt khi tạo trang web. Người dùng thường nhấp và cuộn trên một trang web, đây là đầu vào mà JavaScript có thể sử dụng để thực hiện một hành động tương ứng

Tuy nhiên, Java yêu cầu phải biên dịch mã trước khi có thể chạy. Điều đó có nghĩa là mã được dịch sang ngôn ngữ máy để máy tính hiểu

Bây giờ điều đó đã không còn nữa, tiềm năng của những ngôn ngữ này khi nói đến trò chơi là gì? . Nhưng nếu loại trò chơi lý tưởng của bạn là thứ có thể chạy trên PC hoặc bảng điều khiển, thì Java có thể là ngôn ngữ tốt hơn. Một trò chơi rất phổ biến được xây dựng bằng Java là Minecraft.  

Khuyến khích. Trại hè Minecraft cho trẻ em

Nhận thông tin mới nhất về viết mã cho trẻ emcác hoạt động, tin tức và tài nguyên

Bản tin Đăng ký

" * " cho biết các trường bắt buộc

Email *

Tên mẹ *

Đầu tiên Cuối cùng

Δ

Trò chơi phổ biến trong JavaScript

Nhiều trò chơi trực tuyến phổ biến được xây dựng bằng JavaScript. Những đứa trẻ muốn viết mã trò chơi JavaScript có thể lấy chúng làm nguồn cảm hứng. Kiểm tra một số trong số họ dưới đây

• Tower Building là một cách tuyệt vời để bắt đầu với trò chơi JavaScript. Game cho phép người chơi xếp chồng các khối để tạo thành một tòa tháp rất cao. Đây là một trò chơi tuyệt vời để xem vì nó không chỉ bao gồm mã QR để bạn chơi trên điện thoại mà còn có thể duyệt, rẽ nhánh và sao chép kho lưu trữ GitHub để xem trò chơi được tạo ra như thế nào
• Bejeweled được tạo dưới dạng trò chơi trên trình duyệt vào đầu những năm 2000. Nó tương tự như Candy Crush, nơi bạn phải ghép ba viên ngọc liên tiếp để ghi điểm.  
• 2048 là một trò chơi gây nghiện cho phép bạn sử dụng các phím mũi tên để di chuyển các ô xung quanh trong một ô lưới. Ý tưởng là hợp nhất các ô cho đến khi chúng bằng 2048. Sự thật thú vị, một trong những tập lệnh Python đầu tiên tôi viết là một cách để tự động chơi trò chơi này cho tôi
• Polycraft là một trò chơi 3D có thể chơi được trên trình duyệt của bạn. Polycraft đầy phiêu lưu, khám phá, xây dựng căn cứ, thu thập, chế tạo và thậm chí là chiến đấu. Đây là một ví dụ tuyệt vời về cách bạn có thể vượt qua các trò chơi 2D bằng Javascript
• Words With Friends 2 là một trò chơi ứng dụng dành cho thiết bị di động sử dụng React Native, một khung sử dụng JavaScript để tạo các ứng dụng dành cho thiết bị di động. Zynga đã chọn sử dụng React Native vì khả năng tạo trò chơi có thể chơi trên nhiều nền tảng bằng JavaScript với một cơ sở mã

Khuyến khích. Chương trình viết mã cho trẻ em và thanh thiếu niên

Công cụ trò chơi JavaScript tốt nhất là gì

Mã JavaScript hoàn toàn là văn bản và mặc dù mạnh mẽ nhưng JavaScript không thể làm mọi thứ một mình. Khi phát triển trò chơi bằng JavaScript, việc sử dụng công cụ trò chơi hoặc thư viện kết xuất là rất phổ biến. Những đứa trẻ học cách kết hợp các công cụ trò chơi trong chương trình của chúng sẽ thực hiện bước tiếp theo để biến trò chơi mơ ước của chúng thành hiện thực

Công cụ trò chơi là phần mềm cho phép bạn tạo các thành phần bổ sung cho trò chơi như âm thanh, hoạt ảnh, đồ họa và vật lý. Có vô số tùy chọn khi tìm kiếm 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 có thể được sử dụng cho các nhu cầu cụ thể của bạn. Dưới đây là một số ví dụ phổ biến để lựa chọn

PixiJS

PixiJS là một công cụ nguồn mở tự hào về tốc độ và API đẹp mắt. Trình kết xuất 2D cũng có hỗ trợ đa nền tảng để bạn có thể tạo trò chơi của mình cho nhiều ứng dụng. Là nguồn mở cũng cho phép một cộng đồng hỗ trợ cao tham gia vào việc cung cấp các cải tiến nhất quán cho công cụ

BabylonJS

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

phaser

Phaser cung cấp hỗ trợ cho các trò chơi HTML5 trên máy tính để bàn và thiết bị di động. Trọng tâm của nó là phát triển trò chơi 2D có thể được biên dịch sang nhiều nền tảng. Một lợi ích của việc sử dụng Phaser là khả năng sử dụng các plugin bổ sung khi cần thiết. Điều này cho phép bạn giữ cho các công cụ của mình có kích thước nhỏ để bạn không có quá nhiều thành phần không cần thiết.  

dưa hấuJS

MelonJS framework rất nhẹ nhưng cung cấp khả năng thêm plugin khi bạn thấy phù hợp. Nó cho phép bạn thêm các tính năng như va chạm, họa tiết, vật lý, hiệu ứng hạt, v.v. Nó cũng được biết đến là rất thân thiện với người mới bắt đầu so với các công cụ trò chơi khác.  

Số ba. js

Một thư viện phổ biến khác để hiển thị đồ họa 3D trong trình duyệt web là Three. js. Nó khá dễ học và rất phổ biến, có nghĩa là có vô số ví dụ có sẵn. Trình kết xuất mặc định của nó là WebGL, nhưng nó cũng cung cấp hỗ trợ cho các trình kết xuất SVG, Canvas 2D và CSS3D

Được đề xuất. Lớp học JavaScript dành cho Trẻ em & Trẻ N

Cách viết mã trò chơi bằng JavaScript

Nếu bạn muốn tạo một trò chơi JavaScript nhanh chóng và dễ dàng ngay bây giờ, thì bạn đang ở đúng chỗ. Các bước này sẽ hướng dẫn bạn trong quá trình tạo trò chơi nhảy khối của riêng bạn. Bạn cũng có thể tải xuống mã JavaScript Block Hopper đã hoàn thành

Bước 1 – Chọn Trình chỉnh sửa mã

Để 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, mà sinh viên trong tất cả các lớp viết mã của chúng tôi đều có quyền truy cập. Nếu bạn hiện không phải là học viên của chúng tôi, bạn có thể sử dụng trình chỉnh sửa trực tuyến khác như CodePen

Bước 2 – Xây dựng Canvas trò chơi

Đoạn mã đầu tiên chúng tôi sẽ viết sẽ thiết lập khung vẽ cho trò chơi của chúng tôi. Bạn có thể điều chỉnh chiều cao và chiều rộng khi cần thiết. Điều này mất bốn bước

1. Add your canvas code inside your tags
2. Create your startGame function and define your variables and getCanvas inside your tags
3. Call startGame in the tags onload. 
4. If you’d like, add a title using an
   tag inside the tag

Bạn sẽ thấy một hình chữ nhật màu xanh nhạt với tiêu đề trò chơi của chúng tôi, Block Hopper. Đây sẽ là nền tảng của trò chơi của chúng tôi

Note: after this step all code you write will go inside the tags.

Bước 3 – Viết mã trình phát của bạn, The Hopper

Tiếp theo, hãy thêm trình phát của chúng tôi. Chúng tôi sẽ làm điều này trong bốn bước.  

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

Bước 4 – Thêm trọng lực vào trình phát của bạn

Hãy tạo ra một số lực hấp dẫn cho người chơi. Dưới đây là các bước

1. Tạo một biến fallSpeed
2. Tạo một khoảng thời gian mới và giữ nó trong một biến gọi hàm updateCanvas() của chúng ta
3. Tạo hai chức năng cho trình phát của chúng tôi;
4. Tạo một hàm updateCanvas() để xóa canvas và vẽ lại trình phát

Bước 5 – Thêm chức năng mã vào trình phát của bạn

Cầu thủ của chúng tôi đang rơi xuống, tuy nhiên, chúng tôi muốn cầu thủ của mình dừng lại ngay khi chạm đất. Thêm hàm stopPlayer() sau vào hàm createPlayer() của bạn. Sau đó gọi hàm ở cuối movePlayer()

Bước 6 – Logic nhảy mã cho trình phát của bạn

Bây giờ, hãy cho phép người chơi của chúng tôi nhảy khi chúng tôi nhấn phím cách

1. Tạo thuộc tính boolean isJumping và jumpSpeed
2. Tạo hàm jump() bên trong hàm createPlayer() của bạn
3. Cập nhật chức năng makeFall() của chúng tôi
4. Gọi hàm jump() của chúng ta bên trong updateCanvas()
5. Tạo một hàm resetJump()
6. Chuyển đổi boolean isJumping và gọi resetJump() sau khi chúng ta nhấn phím cách

Bước 7 – Xây dựng khối tấn công

Đã đến lúc tạo một khối để tấn công bạn. Điều này sẽ tương tự như tạo trình phát, nhưng chúng tôi sẽ thêm một số ngẫu nhiên cho các thuộc tính của khối của chúng tôi

1. Tạo một biến khối mới và hàm createBlock()
2. Gán biến khối với một giá trị từ createBlock()
3. Gọi hàm bên trong startGame() và gán nó cho biến của bạn
4. Tạo hàm RandomNumber()
5. Bên trong hàm createBlock() của bạn, gán các số ngẫu nhiên cho chiều rộng, chiều cao và tốc độ. Sau đó tạo hàm draw() và hàm attackPlayer().  
6. Trong updateCanvas(), gọi khối. Vẽ () và chặn. attackPlayer();

Bước 8 – Thêm logic để di chuyển trình phát của bạn

Tuyệt vời. Bây giờ khối của chúng tôi di chuyển để tấn công người chơi của chúng tôi, tuy nhiên, khi nó đến mép màn hình, nó sẽ không bao giờ quay trở lại. Hãy khắc phục điều đó

1. Tạo hàm returnToAttackPostion() bên trong createBlock()
2. Đặt lại giá trị chiều rộng, chiều cao, tốc độ và x và y của khối
3. Gọi hàm mới ở cuối attackPlayer()

Bước 9 – Dừng trò chơi khi va chạm

Khi khối tấn công thành công người chơi, chúng ta cần kết thúc trò chơi. Đã đến lúc viết hàm detect Collision() để dừng trò chơi khi xảy ra va chạm. Gọi hàm detectCollision() trong hàm updateCanvas() của bạn

Bước 10 – Thêm điểm vào trò chơi

Đố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

Hoàn thành trò chơi JavaScript đầu tiên của bạn

Và bạn đã có nó, bạn đã mã hóa trò chơi JavaScript đầu tiên của mình. Tuy nhiên, cách tốt nhất để lập trình tốt hơn là tự viết mã. Dưới đây là một vài thử thách khác nhau mà bạn có thể thử thêm vào trò chơi của mình

1. Đối với một thử thách dễ dàng, hãy thay đổi một số biến như FallSpeed ​​hoặc jumpSpeed. Chơi với nó một chút cho đến khi bạn có được cài đặt bạn thích
2. Đối với thử thách từ trung bình đến khó, hãy tạo một nhãn mới ở phía bên kia màn hình ghi số mạng bạn có. Bắt đầu với ba mạng, bạn sẽ mất một mạng mỗi khi va chạm. Khi bạn hết mạng, thì trò chơi kết thúc
3. Đối với một thử thách khó khăn, hãy thêm một đối tượng mới trong trò chơi mang lại cho bạn điểm thưởng nếu bạn chạm vào nó. Điều này sẽ liên quan đến việc tạo một chức năng mới để tạo đối tượng và thêm tính năng phát hiện va chạm. Có lẽ cũng nên làm cho đối tượng nổi

Nếu bạn muốn xem và chơi trò chơi đã hoàn thành, hãy truy cập https. // phương tiện truyền thông. codewizardshq. com/BlockHopper/block_hopper. html

Bạn cũng có thể tải xuống mã JavaScript Block Hopper đã hoàn thành

Học lập trình JavaScript với Lớp học JavaScript dành cho trẻ em của chúng tôi

Bạn đã làm được đến mức này. Bạn đang trên đường trở thành nhà phát triển trò chơi JavaScript. Đây chỉ là khởi đầu để mở khóa nhiều kỹ năng mới giúp bạn tạo ra trò chơi mà bạn hằng mong muốn.  

Nếu bạn muốn tiếp tục học cách viết mã và xây dựng trò chơi của riêng mình, CodeWizardsHQ cung cấp các lớp viết mã ảo dành cho thanh thiếu niên dạy các nguyên tắc cơ bản của ngôn ngữ lập trình trong thế giới thực. Mỗi lớp học được giảng dạy bởi một giáo viên trực tiếp với những đứa trẻ khác cũng hào hứng viết mã giống như bạn. Các lớp học của chúng tôi bao gồm JavaScript và có các dự án thú vị như tạo máy đánh bạc của riêng bạn và trò chơi Chiến tranh không gian.  

Sẵn sàng để nâng cấp kinh nghiệm học tập của con bạn?

• Chương trình mã hóa trường tiểu học
• Chương trình mã hóa trường trung học cơ sở
• Chương trình mã hóa trường trung học

Với sự trợ giúp của các giáo viên CodeWizardsHQ của chúng tôi, bạn sẽ ngạc nhiên về khả năng phát triển trò chơi JavaScript của riêng mình

Tôi có thể sử dụng JavaScript để tạo trò chơi không?

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

Có công cụ trò chơi JavaScript không?

Tôi có thể sử dụng gì để tạo trò chơi 2D?