Tạo trò chơi giải đố trong HTML5

HTML5 P-Code là một trò chơi giải đố được tạo bằng công cụ mã p. Mục tiêu của trò chơi là di chuyển các quân cờ ở một bên để tạo thành một hình ảnh

Mặt răng cưa của mỗi mảnh được tạo bằng các số ngẫu nhiên. Sau đó, bạn có thể tinh chỉnh hình ảnh trên HTML5 để tạo các mẫu

Ưu điểm của việc tạo trò chơi bằng công cụ p-code là bạn có thể chỉnh sửa và thực thi các chương trình ở một vị trí. Mã P cũng có một tính năng dữ liệu trong đó bạn có thể xem dữ liệu được thực thi như thế nào. Hơn nữa, có tính năng theo dõi cho phép thực thi từng bước mã của bạn

Phần mềm doanh nghiệp thường rơi vào một trong bốn loại ứng dụng. xuất bản, tìm kiếm, thực hiện và hội thoại. May mắn thay, web vượt trội trong việc làm tất cả những điều này. Bốn yếu tố tương tự cũng cần thiết để quản lý các dịch vụ hoặc nền tảng mà bạn muốn duy trì bản thân hoặc trong tổ chức của mình. Bài đăng này nói về một ví dụ cụ thể, một “công cụ trò chơi giải đố HTML5 mã nguồn mở” mà chúng ta có thể dễ dàng khám phá và sau đó trích xuất các nguyên tắc này từ. Đồng thời, học cách tạo ra những trò chơi giải đố nhỏ thú vị

“Increpare” (được biết đến nhiều hơn với tên Stephen Lavelle) đã viết Puzzlescript cách đây không lâu. Nó mô tả cả kịch bản và nền tảng chuyên về luật chơi cho trò chơi xếp gạch kiểu Sokoban. Sokoban? . Bộ câu đố ban đầu này thực sự khá khó chịu nhưng là một bài kiểm tra tốt về kỹ năng lập kế hoạch và thực hiện của bạn. Như bạn có thể thấy từ thư viện Puzzlescript, có rất nhiều biến thể thú vị của những trò chơi nhỏ này

Xác định Quy tắc Trò chơi, Cấp độ và Khối

Hãy xem xét nền tảng Puzzlescript từ quan điểm của người sáng tạo; . Tất cả các trò chơi được chia thành các cấp độ, được duyệt bởi nhân vật người chơi di chuyển bằng các phím mũi tên hoặc “W”, “A”, “S” và “Z”. Bất kỳ cấp độ nào cũng bao gồm các đối tượng khối được vẽ (kém) được sắp xếp theo cách dần dần ngăn bạn đạt được điều kiện giành chiến thắng. Hoàn thành một cấp độ sẽ đưa bạn đến cấp độ tiếp theo. Tất nhiên, cách tốt nhất để tiếp thu tất cả những điều này một cách nhanh chóng là chơi bất kỳ trò chơi nào. Các đối tượng duy nhất trong Sokoban ban đầu là những bức tường, thùng và sàn nhà với những dấu chấm trên

Vì vậy, công việc của bạn là xác định luật chơi, thiết kế các cấp độ câu đố và vẽ các khối

Để viết luật chơi của riêng bạn, bạn sử dụng tập lệnh Puzzlescript. Vì vậy, ví dụ, quy tắc sau đây cho rằng nếu người chơi di chuyển về phía một cái thùng, thì thùng đó sẽ tự di chuyển theo cùng một hướng

[> Người chơi. Thùng] -> [> Người chơi. > Thùng]

Điều này thể hiện tương tác đẩy tiêu chuẩn trong Sokoban. Đọc nó là “thay thế mô hình ở phía bên trái (người chơi di chuyển vào ô vuông có thùng đứng yên) bằng phía bên tay phải (người chơi di chuyển vào ô vuông, thùng di chuyển vào ô tiếp theo)”. Vì vậy, nó thực sự là một bản dịch. Bạn cần suy nghĩ về cách game engine kiểm tra tất cả các hoạt động sắp diễn ra, diễn giải từng bản dịch, sau đó vẽ lại trò chơi. Nếu bạn là một game thủ giải đố thông thường, điều này sẽ quen thuộc với những bản hit hiện đại như “Baba is You”

Hãy xem mã của một trò chơi Puzzlescript cụ thể có tên là Manic Ammo (tác giả nói với tôi rằng anh ấy ổn về điều này). Nó dường như là một câu chuyện huyền ảo về một người nào đó bị mắc kẹt trong hầm chứa đạn dược. Bây giờ hãy nhấn vào liên kết “hack” ở phía dưới và bạn có thể thấy màn hình được chia thành ba cửa sổ

Cửa sổ trên cùng bên phải cho phép bạn chạy trò chơi khi nó hiện đang được biên dịch. Vì vậy, nếu bạn nhấp vào nó và nhấn dấu cách, trò chơi sẽ phát trong cửa sổ. Nhưng mối quan tâm của chúng tôi là ở cửa sổ mã nguồn bên trái. Bạn có thể thấy tiêu đề “đối tượng” và thực sự có vẻ như có một danh sách dài các dữ liệu được định dạng. Bạn sẽ nhanh chóng nhận ra rằng đây là hình ảnh đại diện cho các khối 5×5 của trò chơi, với mã số cho các màu cơ bản của chúng. Ví dụ: “Người chơi” có đầu màu đen hồng, bụng màu vàng. Thật là một người nhỏ bé tuyệt vời

Phần còn lại của danh sách được chia thành các phần có tiêu đề rõ ràng, bao gồm cả “Quy tắc”. Ở đó bạn sẽ thấy một số Puzzlescript quen thuộc

[> người chơi][Droid] -> [> người chơi][> Droid]

[> Người chơi. Shell] -> [> Người chơi. > Vỏ]

[> người máy. Shell] -> [> Droid. > Vỏ]

Vì vậy, bạn có thể thấy rằng một người chơi có thể đẩy một cái vỏ giống như một cái thùng trong ví dụ ban đầu của chúng tôi

Mục đích của tất cả quyền truy cập nhanh này là để cho phép những người sáng tạo tiềm năng bắt đầu hành trình của họ bằng cách nghịch các trò chơi hiện có. Ví dụ: bạn có thể vui vẻ làm cho trò chơi không thể chơi được bằng cách thêm dòng mã này vào phần Quy tắc. Xây dựng lại trò chơi và thử lại từ đầu

[> Người chơi. mục tiêu] -> [mục tiêu. > Người chơi]

Bạn có thể xem những gì nó làm trước khi bạn chạy nó? . Đó là lý do bản hack trên rất phá cách

Phương pháp thú vị này để tham gia trực tiếp vào ứng dụng hoạt động rất hiệu quả. Việc chỉ tải một số mã ứng dụng lên GitHub và yêu cầu mọi người sao chép và chạy cục bộ thực sự là một cách sử dụng web kém khi so sánh. Cho phép các phương thức tương tác ít ma sát (như thêm một dòng mã và xem những gì diễn ra trên cùng một trang) giúp biến những người thử nghiệm thành người sáng tạo

Nền tảng Puzzlescript

Viết các trò chơi nhỏ bằng puzzlescript chắc chắn là một bài kiểm tra kỹ năng phát triển và thiết kế tốt như bất kỳ võ đường viết mã nào. Tuy nhiên, bài đăng này là về nền tảng tổng thể

Khi bạn phát triển và hỗ trợ một ứng dụng hoặc công cụ trong công ty, bạn cần nghĩ về Cộng đồng thực hành. Một công cụ hoặc ứng dụng sẽ chỉ phát triển mạnh khi có người dùng tận tâm và chính người dùng phải trở thành người ủng hộ. Điều này có nghĩa là bạn cần điều hành một diễn đàn và ít nhất là hướng dẫn nó. Bất chấp tuổi của Puzzlescript, bạn có thể thấy các mục trong diễn đàn từ tháng hiện tại. Stephen cập nhật nền tảng, hy vọng không phá vỡ các trò chơi cũ hơn. Có rất nhiều bổ sung kể từ khi tôi sử dụng nó lần cuối

Làm thế nào để nền tảng này hoạt động cho tìm kiếm và thực hiện? . Bởi vì mỗi trò chơi có thể được trình bày dưới dạng một liên kết, các trang web khác có thể sắp xếp các trò chơi theo ý muốn của họ. Có một URL duy nhất để chỉnh sửa hoặc phát rất hiệu quả. Trang web này phân loại các trò chơi câu đố theo quy mô và thử thách. Thật vậy, danh sách các trò chơi hiện tại dường như được giữ trong một tệp json, do đó, việc lấy chỉ mục của riêng bạn là chuyện nhỏ. Trò chơi cũng được lưu trữ trên itch. io

Nhưng hãy đánh giá cao cách nền tảng mô phỏng tất cả các mục tiêu doanh nghiệp đó. Đầu tiên, nó hoạt động như một cách để bạn khám phá Puzzlescript là gì, câu đố Sokoban cơ bản là gì và giới thiệu những gì xác định các quy tắc có thể đạt được. Sau đó, nó cho phép người dùng tạo câu đố của riêng họ và nó cũng lưu trữ các câu đố hiện có. Và có một diễn đàn cho phép người chơi trao đổi các gợi ý và đề xuất — cũng như một nơi để tác giả trao đổi thông tin chính thức

Vì vậy, nền tảng bao gồm một cách khá trực tiếp người tạo nội dung, nhà thiết kế, tin tặc, người chơi, người bảo trì và người quản lý. Bạn có thể nói rằng các nền tảng khác hỗ trợ các công cụ, ứng dụng hoặc dịch vụ của bạn đã cung cấp tất cả các khía cạnh theo cách hiệu quả như vậy không?

Tất nhiên, trang web này nằm trên Github, vì nó là mã nguồn mở. Vậy tại sao không thiết kế một trò chơi giải đố nhỏ đẹp mắt, đồng thời đánh giá cao cách thức hoạt động của một nền tảng ngăn xếp đầy đủ tốt trong tự nhiên

Làm cách nào để tạo trò chơi trong JavaScript?

Làm cách nào để kết thúc trò chơi bằng JavaScript?