Vẽ mê cung đơn giản
Hôm ni, họ sẽ tạo nên một áp dụng giải đố mê cung. Ứng dụng hoàn toàn có thể sản xuất mê cung hình chữ nhật với những hàng và cột tùy ý, đôi khi kiếm tìm đường dẫn của bọn chúng từ lối vào cho lối ra. Để thêm phần thú vui, vận dụng sau cùng được cho phép chúng ta đi qua những mê cung bằng cách áp dụng điều hướng bàn phím hoặc click chuột.
Bạn đang xem: Vẽ mê cung đơn giản
Chúng tôi đã sử dụng thuật tân oán săn và giết nhằm chế tạo ra mê cung với thực hiện thuật tân oán tra cứu kiếm theo chiều sâu để giải quyết chúng. Chúng tôi thực hiện API canvas HTML nhằm vẽ mê cung được sản xuất bên trên trang web cùng chúng tôi cũng rất có thể vẽ các đường truyền của riêng biệt mình bên trên canvas HTML.
Ứng dụng được viết bằng Angular / TypeScript. quý khách hoàn toàn có thể tra cứu thấy mã mối cung cấp trong kho lưu trữ GitHub của tớ cùng nghịch các câu đố mê cung bên trên trang web test . Bản ghi màn hình tiếp sau đây minch họa cách hoạt động vui chơi của áp dụng ở đầu cuối.
Mê cung và Mô hình
Một mê cung có thể được coi là một lưới những ô. Trong mê cung hình chữ nhật hai phía, từng ô tất cả tối nhiều tư cạnh đại diện thay mặt cho những bức tường chắn hoàn toàn có thể ngăn đường đi mang lại ô không giống. Nếu một ô được kết nối với cùng 1 ô khác, thì từng ô bao gồm một cạnh bị giảm. Bản phác họa tiếp sau đây minch họa quy mô của các ô và một mê cung.
Những mê cung nhưng mà Shop chúng tôi chuẩn bị chế tác trực thuộc các loại “mê cung hoàn hảo”. Một mê cung hoàn hảo và tuyệt vời nhất là một trong mê cung không có Quanh Vùng vòng lặp với không có khu vực tất yêu tiếp cận. Trong một mê cung tuyệt vời nhất, hầu như ô gần như được liên kết với một ô khác cùng luôn luôn tất cả một đường đi duy nhất thân nhị ô bất kỳ. Trong nội dung bài viết này, tuyến đường duy nhất cho 1 mê cung tuyệt vời được call là giải pháp .
Trong vận dụng này, một mê cung được quy mô hóa như một Mazelớp bao gồm một lưới các ô. Các Mazelớp cần các quý hiếm mang lại số lượng mặt hàng và cột nhằm xây dừng một mảng hai chiều của những tế bào. Các chỉ số mảng của một ô cho biết số hàng với số cột của nó vào lưới. Một ô được quy mô hóa nhỏng một Celllớp, bao gồm tư ở trong tính Boolean tương ứng cho tứ cạnh của chính nó. Nếu một cạnh bị loại bỏ đi, thì ô đang đặt nằm trong tính cạnh kia thành false.
Các đoạn mã dưới đây hiển thị những quan niệm mô hình của Celllớp và Mazelớp.
Trong đoạn mã trên, cách làm Mazekhởi tạo cho lớp trước tiên khởi tạo thành những ô với ID hàng và ID cột của chúng, tiếp nối tạo nên cấu tạo mê cung.
Máy tạo nên mê cungBây giờ họ đã chuẩn bị sẵn sàng để sản xuất mê cung với lưới ô của nó được xác minh trước bởi vì các tmê man số số mặt hàng cùng cột. Trong số các thuật toán thù tạo mê cung (được liệt kê ở chỗ này ), tôi thấy rằng thuật toán săn và giết dễ dàng nắm bắt với dễ thực hiện. Thuật toán thù psuebởi vì nhỏng sau.
Chọn một ô ban đầu bỗng nhiên.Vào chế độ " giết ". Chọn thiên nhiên một tín đồ láng giềng không được mời tự ô hiện giờ. Loại quăng quật các cạnh thân ô hiện giờ với láng giềng đang lựa chọn, cùng hàng xóm được lựa chọn đã biến hóa ô hiện nay. Lặp lại cho đến lúc ô hiện nay không có láng giềng không được mời.Vào chế độ " săn ". Quét lưới nhằm tìm ô không truy cập nằm sát liền với ô đang truy cập. Nếu được tìm kiếm thấy, hãy liên kết nhì ô bằng phương pháp thải trừ các cạnh giáp của bọn chúng với để ô trước đây không được coi ngó là ô bắt đầu bắt đầu.Lặp lại các bước 2 với 3 cho tới lúc cơ chế “ săn ” quét tổng thể lưới và không kiếm thấy ô như thế nào không được lựa chọn.
Các hunt-và-diệt thuật toán thù là hơi dễ dàng nhằm thực hiện. Tuy nhiên, nếu như chế độ săn luôn quét lưới trường đoản cú bên trên cùng phía trái sang dưới thuộc mặt cần, thì vô cùng có chức năng các mê cung được tạo ra đã xong cùng với những giải pháp ưu tiên các sản phẩm bên trên thuộc, như sau, vì những mặt hàng trên cùng được kết nối sớm rộng thời gian trong đệ quy snạp năng lượng và giết .
Xem thêm: Những Loại Thuốc Uống Trị Thâm Mụn Hiệu Quả, Những Loại Thuốc Trị Thâm Mụn Hiệu Quả
Những loại mê cung này không quá thử thách bởi vì bọn chúng thiếu thốn tính thốt nhiên. Để sút tài năng xuất hiện các phương án số 1, chúng ta cũng có thể thốt nhiên hóa những hướng quét vào chế độ săn . Việc tiến hành sau cuối của thuật toán săn uống với giết được hiển thị dưới.
Trong đoạn mã bên trên, họ tất cả một mảng ID hàng được xáo trộn cùng một mảng ID cột được xáo trộn cho huntAndKill()cách làm quét mê cung. Bằng bí quyết này, Mazelớp rất có thể tạo thành một mê cung bất chợt mạnh bạo cùng với số lượng sản phẩm và cột.
cũng có thể tất cả một trong những buổi tối ưu hóa đến huntAndKill()cách thức, tuy nhiên bài toán tiến hành bây chừ là đầy đủ nhằm tạo nên mê cung được hiển thị vào cửa sổ trình coi sóc.
Maze SolverNếu bọn họ bao gồm một mê cung tuyệt vời và hoàn hảo nhất với kết cấu ko khẳng định, thì bạn cũng có thể sử dụng thuật toán quan sát và theo dõi bức tường ( liên kết ), có cách gọi khác là phép tắc bên trái hoặc nguyên tắc mặt phải , để xử lý mê cung. Mặt khác, giả dụ chúng ta biết cụ thể về cấu tạo mê cung, thì bạn có thể áp dụng thuật tân oán tìm kiếm kiếm theo chiều sâu ( link ) để đi qua mê cung giữa nhị ô bất kỳ.
Tại phía trên, vận dụng của công ty chúng tôi đã biết toàn cục cấu tạo của mê cung được sinh sản, bởi vì vậy Shop chúng tôi sẽ vận dụng thuật tân oán tìm kiếm theo chiều sâu , thuật toán thù này chỉ đơn giản dễ dàng lặp lại qua những ô chưa được chăm chút cho đến Khi giành được mục tiêu. Đoạn mã sau cho biết thêm một triển khai chủng loại.
Các findPath()khí cụ phương pháp kiếm tìm tìm bắt đầu tự ô đầu tiên với dứt với ô ở đầu cuối, cùng trả về một mảng của những tế bào thay mặt đại diện cho các giải pháp cho các mê cung, có nghĩa là tuyến phố tự ô trước tiên mang lại ô ở đầu cuối.
Vẽ Mê cung bên trên CanvasVới tất cả những mô hình đã có tùy chỉnh, Shop chúng tôi đã sẵn sàng nhằm vẽ một mê cung bên trên canvas HTML. trước hết, Shop chúng tôi thêm 1 phần tử canvas trong chủng loại HTML, nhỏng sau.
Sau kia, chúng tôi thiết lập cấu hình chiều rộng lớn với chiều cao của canvas dựa vào kích cỡ của mê cung mong ước cùng vẽ tất cả những ô trên canvas. Đoạn mã sau là 1 trong những ví dụ về triển khai vào một yếu tố Angular. Vì những API bạn dạng vẽ canvas HTML là size cần yếu biết được, các bạn sẽ có thể đưa mã sang các áp dụng sử dụng các form JavaScript không giống.
Phương thơm pháp vẽ băng thông mê cung cực kỳ như thể với đoạn mã trên, bởi vậy tôi sẽ không mở rộng những bản vẽ tại chỗ này.
Để thêm một số trong những quý giá giải trí, áp dụng chạy thử đánh giá các sự khiếu nại keyboard, nhằm người tiêu dùng rất có thể điều hướng bao quanh mê cung bằng các phím mũi thương hiệu. quý khách có thể dùng demo trên trang web kiểm tra này .
Câu đố mê cung là 1 trong những trò chơi thú vị cùng là một trong những dự án công trình prúc dễ ợt nhằm khám phá điều gì đó về canvas. Để tóm tắt hành trình dài của công ty chúng tôi vào bài viết này, Shop chúng tôi đang đề cùa đến những chủ đề về kiến tạo mô hình mê cung, chế tạo ra mê cung bằng cách áp dụng thuật toán thù snạp năng lượng cùng giết , xử lý mê cung bằng thuật tân oán search kiếm theo chiều sâu với vẽ mê cung bên trên canvas HTML.
Đó là tất cả cho một ngày bây giờ. Một lần tiếp nữa, chúng ta cũng có thể khám nghiệm mã mối cung cấp từ bỏ kho lưu trữ GitHub của tôi . Cảm ơn vày sẽ đọc.
