Cách tạo trò chơi ô chữ trong HTML

Crossword Labs là một nhà sản xuất trò chơi ô chữ. Đó là cách đơn giản và nhanh nhất để xây dựng, in, chia sẻ và giải các câu đố ô chữ trực tuyến. Và nó miễn phí để sử dụng

Không có quảng cáo, không có hình mờ và không cần đăng ký

Hơn một triệu câu đố ô chữ được thực hiện

Ô chữ mẫu

Tìm một câu đố ô chữ

Tìm một trò chơi ô chữ làm sẵn về bất kỳ chủ đề nào

hoặc làm của riêng bạn

Đặc trưng

• Nhanh chóng, đơn giản và miễn phí sử dụng
• URL ô chữ có thể chia sẻ
• Giải câu đố trực tuyến
• Hoạt động trên máy tính bảng và điện thoại
• Nhúng câu đố của bạn trên trang web của bạn
• In/xuất trò chơi ô chữ của bạn sang PDF hoặc Microsoft Word
• Tải xuống ô chữ của bạn dưới dạng hình ảnh
• Xuất sang SVG để tùy chỉnh đầy đủ

Đã đến lúc hướng dẫn JavaScript một lần nữa. Đây sẽ là mã phức tạp nhất mà tôi đã giới thiệu cho đến nay, vì vậy tôi hy vọng bạn đã chú ý và không chỉ sao chép và dán. Trong bài đăng này, bạn sẽ tìm hiểu cách xây dựng trình tạo trò chơi ô chữ bằng JavaScript

Trước tiên, tôi sẽ giới thiệu về điều đã truyền cảm hứng cho dự án này, tiếp theo tôi sẽ thảo luận về các thành phần khác nhau là gì và chúng khớp với nhau như thế nào, và cuối cùng tôi sẽ nói về các tối ưu hóa hiệu suất mà tôi đã thực hiện

Bạn có thể dùng thử bằng cách nhấp vào liên kết này. Tuy nhiên, hãy kiên nhẫn sau khi nhấp vào nút, vì đôi khi phải mất một chút thời gian để tạo trò chơi ô chữ. Bạn sẽ thấy tại sao đủ sớm. Trong khi bạn ở đó, hãy tiếp tục và sử dụng các công cụ dành cho nhà phát triển của bạn để tự làm quen một chút với mã

Và bạn có thể bấm vào đây để xem mã nguồn trên GitHub

Lời động viên

Tôi đã lập trình được nhiều năm và đã mắc rất nhiều lỗi trong quá trình thực hiện. Tôi thích nghĩ mình là người biết đôi điều về xây dựng phần mềm. Có rất nhiều thứ tôi không biết, nhưng tôi tự tin vào bộ kỹ năng của mình và khả năng học các khái niệm và công nghệ mới khi cần

Tuy nhiên, tôi không có được sự tự tin đó chỉ sau một đêm. Tôi đã từng khá tệ và khi tôi có cơ hội xem lại một số đoạn mã của mình từ nhiều năm trước, điều đó khiến tôi quặn lòng trước những điều ngớ ngẩn mà mình đã làm

Vì vậy, nếu đó là bạn ngay bây giờ, đừng cảm thấy tồi tệ. Tất cả chúng ta phải bắt đầu lại từ đầu để trở nên giỏi bất cứ thứ gì đáng giá

Nguồn cảm hứng

Và điều này đưa tôi đến một câu chuyện nhỏ. Tôi đã tạo trình tạo trò chơi ô chữ này bằng cách chuyển một chương trình Java cũ mà tôi đã viết lại khi mới ra trường. Tôi đã không xem nó trong nhiều năm, và để tôi nói cho bạn biết, nó khá thô. Bạn có thể xem nó trên GitHub nếu bạn muốn cười nhạo tôi

Tôi đã bắt đầu quá trình chuyển bằng cách sử dụng một phương thức Java tại một thời điểm. Tôi đã thay thế từng cái bằng một hàm JavaScript mới sáng bóng sao chép logic của nó. Khi tôi tiến bộ, tôi bắt đầu cấu trúc lại nó, sửa lỗi và cải thiện hiệu suất

Thành quả lao động của tôi

Sản phẩm hoàn chỉnh không phải là mã sạch hoàn toàn, nhưng nó tốt hơn rất nhiều so với trước đây

Sau khi hoàn thành phiên bản JavaScript của trình tạo trò chơi ô chữ của mình, tôi bắt đầu tự hỏi liệu có đáng để viết một hướng dẫn cho. Tôi chắc chắn 100% rằng có những thuật toán tốt hơn thuật toán tôi đã sử dụng và tôi cũng chắc chắn 100% rằng tôi có thể thực hiện nhiều cải tiến về khả năng đọc và hiệu quả hơn. Tôi không muốn dạy cho các bạn bất kỳ thói quen xấu nào

Nó cũng rất phức tạp và không phải là tài liệu dễ dạy nhất

Cuối cùng tôi quyết định đó sẽ là một ý kiến ​​hay. Quá nhiều hướng dẫn ngoài kia thực sự tầm thường và không cho bạn hiểu rõ về cơ sở mã công ty điển hình trông như thế nào. Điều này sẽ cung cấp cho bạn một xấp xỉ tốt hơn về điều đó. Đó là sự hợp tác của nhiều nhà phát triển với các mức độ khả năng khác nhau về một vấn đề khá phức tạp trong nhiều năm. Tình cờ là cả hai nhà phát triển đều là tôi. 😂

Nó cũng sẽ cho bạn cơ hội thêm các cải tiến của riêng bạn, đây là chìa khóa để phát triển với tư cách là nhà phát triển

Chính xác thì chúng ta đang xây dựng cái gì?

Chúng tôi đang xây dựng trình tạo trò chơi ô chữ bằng JavaScript, HTML và CSS. Ý tưởng là lấy một danh sách dài các từ, chọn một số từ ngẫu nhiên và cố gắng tạo trò chơi ô chữ từ chúng

Chúng tôi sẽ bắt đầu bằng cách đặt một từ trên lưới. Sau đó, chúng tôi sẽ nhận được một từ khác có thể là ứng cử viên để kết nối với từ đó. Sau đó, chúng tôi sẽ làm tương tự cho một từ khác. Chúng tôi sẽ tiếp tục quá trình này liên tục, chọn một từ khác mỗi khi từ đó được đặt hoặc không khớp với bất kỳ vị trí nào trong câu đố

Khi nào chúng ta ngừng cố gắng đặt từ?

• Chúng ta đã đặt một loạt các từ trên trò chơi ô chữ chưa?
• Chúng ta có nhiều giao điểm từ trong trò chơi ô chữ không?

Một ví dụ về giao điểm từ

Sau khi trò chơi ô chữ được thực hiện, chúng tôi sẽ tiếp tục và tạo thêm một số trò chơi ô chữ khác. Sau đó, chúng tôi sẽ tìm một từ có nhiều giao điểm từ nhất và hiển thị nó trên màn hình

Phá vỡ vấn đề

Tôi sẽ không đi sâu vào cỏ dại trong bài đăng này như trong một số hướng dẫn trước đây của tôi. Có quá nhiều chức năng và trường hợp cạnh phải trải qua. Thay vào đó, tôi nghĩ sẽ hữu ích nhất nếu tôi giải thích chi tiết các thành phần cấp cao mà chúng ta sẽ tạo. Biết làm thế nào tất cả các mảnh phù hợp với nhau là một nửa trận chiến

Tôi thực sự khuyến khích bạn nghiên cứu xem mỗi chức năng đang hoàn thành những gì trong khi ghi nhớ những biến nào đang được thay đổi. Phần nhận xét là một cách tuyệt vời để liên hệ trợ giúp nếu bạn không hiểu điều gì đó. Những người khác có thể sẽ cảm ơn bạn vì điều đó

Danh sách lớn các từ

Điều đầu tiên chúng ta cần là một danh sách lớn các từ để chọn

Trong phiên bản gốc của tôi, tôi đã lấy Kinh thánh King James từ một tệp văn bản

Trong phiên bản cập nhật, tôi chỉ tạo một mảng JavaScript với một loạt các từ trong đó. Bạn có thể kiểm tra xem nó ra ở đây

Đại diện cho một từ

Để đặt một từ trên lưới, chúng ta sẽ cần biết một số điều về từ đó. Rõ ràng là chúng ta sẽ cần biết chính văn bản của từ đó, nhưng chúng ta cũng cần biết về vị trí của từ đó. Chúng tôi sẽ cần một hàng và một cột để đánh dấu vị trí bắt đầu của nó. Chúng tôi cũng sẽ cần một giá trị boolean để biểu thị xem từ nằm ngang hay dọc theo hướng

Chúng tôi sẽ đại diện cho các từ bằng cách sử dụng một đối tượng từ chúng tôi tự tạo. Bạn có thể kiểm tra xem nó ra ở đây

Đại diện cho trò chơi ô chữ

Các đối tượng trò chơi ô chữ mà chúng tôi đang tạo là đại diện của các trò chơi ô chữ đã hoàn thành. Mỗi loại sẽ có những chức năng khác nhau phục vụ cho những mục đích khác nhau. Dưới đây là danh sách đầy đủ của từng chức năng và chức năng của nó

• cập nhật. Cố gắng thêm một từ vào lưới
• canBePlaced. Kiểm tra xem một từ có thể được thêm vào lưới không
• getIntersections. Trả về số lượng giao điểm từ trong lưới
• vị trí pháp lý. Xác định xem một từ có thể được đặt hợp pháp ở một vị trí hàng/cột cụ thể hay không
• xâm chiếm lãnh thổ. Xác định xem một từ có xâm phạm lãnh thổ của từ khác tại một vị trí nhất định hay không
• endOfWord. Xác định xem một vị trí hàng/cột cụ thể có tương ứng với phần cuối của từ hay không
• nhân vật tồn tại. Xác định nếu một ký tự tồn tại ở một vị trí nhất định
• ghi đèNgangTừ. Xác định xem việc đặt một ký tự tại một hàng/cột cụ thể có ghi đè lên một từ nằm ngang hay không
• ghi đè DọcTừ. Xác định xem việc đặt một ký tự tại một hàng/cột cụ thể có ghi đè lên một từ dọc hay không
• isInterference. Kiểm tra nhiễu tại một tập hợp các vị trí hàng/cột
• isLetter. Kiểm tra nếu có một chữ cái ở vị trí hàng/cột
• isEmptyCell. Kiểm tra xem vị trí hàng/cột có trống không
• thêm từ. Thêm một từ vào lưới
• phù hợpOnGrid. Kiểm tra xem một từ có nằm trong giới hạn của lưới không
• isValidPosition. Kiểm tra xem vị trí hàng/cột có hợp lệ cho lưới không

Bạn có thể kiểm tra xem nó ra ở đây

Tạo câu đố ô chữ hay nhất

Khi chúng ta có khả năng đặt các từ trên một lưới, chúng ta cần bắt đầu thực hiện một loạt các trò chơi ô chữ. Sau đó, chúng ta cần chọn câu đố hay nhất và hiển thị nó trên màn hình. Chức năng cấp cao nhất thực hiện tất cả điều này được gọi là createCrosswordPuzzle

Hàm createCrosswordPuzzle có một số hàm lồng nhau giúp hoàn thành mục tiêu của nó. Dưới đây là danh sách đầy đủ của từng chức năng và chức năng của nó

• tạoGrids. Tạo một loạt các câu đố ô chữ
• tryToPlaceWordOnGrid. Lấy một từ nhất định và cố gắng đặt nó vào trò chơi ô chữ
• getAWordToTry. Lấy một từ mà chúng tôi muốn thử đặt trong trò chơi ô chữ
• getBestGrid. Chọn câu đố ô chữ hay nhất từ ​​​​những câu đố chúng tôi đã tạo
• isGoodWord. Xác định xem một từ có phải là ứng cử viên sáng giá để thử đặt trong trò chơi ô chữ hay không dựa trên các chữ cái trên bảng
• hiển thịÔ chữCâu đố. Hiển thị trò chơi ô chữ trên màn hình
• pushUsedWords. Đánh dấu một từ là đã sử dụng và thêm các chữ cái của từ đó vào danh sách các từ có trong trò chơi ô chữ

Ngoài các chức năng trên, tệp này chứa một số chức năng trợ giúp để nhận các từ không sử dụng và các giá trị ngẫu nhiên khác nhau

Bạn có thể kiểm tra xem nó ra ở đây

Tối ưu hóa hiệu suất

Tôi hy vọng các phần trước đã giúp bạn thấy tất cả các mảnh khớp với nhau như thế nào. Trình tạo câu đố ô chữ là một vấn đề không tầm thường, nhưng chia nó thành các vấn đề nhỏ hơn là một cách tốt để tiếp cận nó. Trên thực tế, đó là một cách tiếp cận tốt cho bất kỳ nhiệm vụ lập trình nào.

Tôi muốn đề cập đến một khía cạnh chi tiết hơn. Theo mặc định, mã này không nhanh lắm. Có một số lượng rất lớn các vòng lặp lồng nhau

Tôi sẽ chia sẻ với bạn các bước tôi đã thực hiện để làm cho nó nhanh hơn. Nếu bạn biết các thuật toán tốt hơn, tôi muốn bạn viết bình luận cho tôi. Đây là một nghề thủ công lâu dài và tôi là một học sinh cũng như một giáo viên

Có 4 bước tôi đã thực hiện để cải thiện hiệu suất. Tôi sẽ gọi chúng là Điều chỉnh đầu vào, Chọn từ thông minh, Biết khi nào nên bỏ cuộc và Gọi nó là đủ tốt

Điều chỉnh đầu vào

Có hai biến có thể ảnh hưởng lớn đến tốc độ của chương trình. Một kiểm soát số lượng lưới cần tạo và kiểm soát kia kiểm soát số lần cố gắng khớp các từ trên lưới

Tôi nhận thấy rằng số lần thử cao có nghĩa là tôi có thể giảm tổng số lưới cần tạo. Số lần thử cao giúp đảm bảo rằng trò chơi ô chữ sẽ có rất nhiều từ

Tự mình chơi xung quanh với những đầu vào này và để ý cách chúng ảnh hưởng đến tốc độ của chương trình và trò chơi ô chữ trông như thế nào. Tôi đã cố gắng tối ưu hóa để tạo trò chơi ô chữ đẹp mắt trong khi không khiến trang hết thời gian chờ

Chọn từ thông minh

Một cách để tăng tốc mọi thứ là giới hạn lựa chọn từ của chúng tôi đối với những từ có cơ hội được đặt trên lưới

Lúc đầu, tôi chọn từng từ hoàn toàn ngẫu nhiên, nhưng điều đó dẫn đến việc cố gắng đặt các từ trên lưới mà không có cách nào phù hợp. Vì vậy, tôi đã lãng phí rất nhiều thời gian để lặp qua lưới và tôi cũng lãng phí nỗ lực để khớp các từ trên lưới

Để khắc phục điều này, tôi bắt đầu giữ một danh sách các chữ cái tồn tại trong trò chơi ô chữ. Bằng cách đó, tôi có thể giới hạn lựa chọn từ của mình chỉ với những từ bắt đầu bằng một trong những chữ cái đó. Tôi đã tạo chức năng dưới đây để hỗ trợ xác định các từ hay để thử. Nó không hoàn hảo, nhưng nó ngăn chặn một số vòng lặp không cần thiết

Biết Khi Nào Nên Bỏ Cuộc

Đôi khi bạn chỉ cần biết khi nào nên bỏ cuộc. Khi nhiều từ được thêm vào trò chơi ô chữ, khả năng đặt thành công một từ khác sẽ giảm xuống. Không có nhiều không gian cho nó và các yêu cầu về vị trí trở nên khắt khe hơn

Cuối cùng, chúng tôi sẽ bắt đầu thất bại trong một thời gian cực kỳ dài để đặt một từ trên lưới. Tôi quyết định sẽ tốt hơn nếu chỉ kết thúc mọi thứ vào thời điểm đó. Nếu chúng tôi gặp khó khăn khi đặt các từ trên lưới thì có lẽ nó đã khá đầy

Đó là quy luật hiệu quả giảm dần trong công việc

Đây là phần mã nơi điều này diễn ra. Số 470 khá tùy ý. Có vẻ như ngay sau khi thực hiện một số thử nghiệm

Gọi nó là đủ tốt

Bước cuối cùng tôi thực hiện để cải thiện hiệu suất là ngừng tạo trò chơi ô chữ sau khi tôi đã tạo trò chơi có ít nhất 4 từ giao nhau

Một trò chơi ô chữ với 4 giao điểm từ thường có vẻ khá tốt, vì vậy hãy dừng lại khi chúng tôi có một trong số đó cắt giảm thời gian tạo trung bình của chúng tôi

Xem bên dưới

Phần kết luận

Wow đó là một bài viết dài và tẻ nhạt. Tôi thực sự hy vọng ai đó thực sự đọc đến đây. Nếu bạn làm, hãy để lại cho tôi một bình luận. Nó sẽ khiến tôi cảm thấy tốt hơn khi viết tất cả những điều này 😂

Tôi hy vọng bạn đã có thể thiết lập và chạy trình tạo trò chơi ô chữ của riêng mình. Đó là một dự án thú vị với rất nhiều chi tiết để xem xét. Nếu bạn có thể tự triển khai nó và hiểu cách thức hoạt động của tất cả các phần, bạn chắc chắn sẽ trở thành nhà phát triển tốt hơn cho nó

như mọi khi, cảm ơn vì đã đọc. Theo dõi tôi trên Twitter nếu bạn muốn theo kịp những gì tôi đang làm

Bạn cũng có thể đăng ký blog của tôi nếu bạn muốn một số mẹo về cách viết chức năng và để các bài đăng trên blog của tôi được gửi đến hộp thư đến của bạn