자바 스크립트 튜토리얼이 다시 시작되었습니다. 이 코드는 지금까지 소개 된 가장 복잡한 코드이므로 복사 및 붙여 넣기가 아니라 주의를 기울이기를 바랍니다.
이 글에서는 JavaScript로 크로스 워드 퍼즐 생성기를 만드는 방법을 배웁니다.
https://mitchum.blog/building-a-crossword-puzzle-generator-with-javascript/
먼저 이 프로젝트에서 영감을 얻은 요소에 대해 소개하고, 다음으로 다양한 구성 요소가 무엇이고 어떻게 구성되는지에 대해 논의하고 마지막으로 수행 한 성능 최적화에 대해 이야기하겠습니다.
이 링크를 클릭하여 사용해 볼 수 있습니다.
때로는 크로스 워드 퍼즐을 만드는 데 시간이 걸리기 때문에 버튼을 클릭 한 후에 인내심을 가지십시오. 왜 그런지 알게 될 것입니다.
소스 코드를 확인하려면 여기를 클릭하십시오.
격려의 말
나는 몇 년 동안 프로그래밍을 해왔고 그 과정에서 많은 실수를 저질렀습니다. 저는 소프트웨어 제작에 대해 한두 가지를 알고 있는 사람이라고 생각합니다. 내가 모르는 것들이 많이 있지만, 필요한 기술과 기술을 익힐 능력이 있다고 확신합니다.
그러나 나는 밤새 그 자신감을 얻지 못했습니다. 나는 꽤 나빴고 몇 년 전부터 내 코드 중 일부를 볼 기회를 얻었을 때 내가 한 바보 같은 일에 대해 울부 짖습니다.
그러니 지금 당장 기분 나쁘지 않아요! 우리는 모두 가치 있는 것을 잘하기 위해 처음부터 시작해야 합니다.
영감의 원천
그리고 이것은 저에게 작은 이야기를 가져옵니다. 대학을 떠났을 때 다시 쓴 오래된 Java 프로그램을 이식하여 이 크로스 워드 퍼즐 생성기를 만들었습니다. 나는 몇 년 동안 그것을 보지 않았고 말해주었습니다. 나에게 웃고 싶다면 GitHub에서 확인할 수 있습니다.
한 번에 하나의 Java 메소드로 이동하여 포팅 프로세스를 시작했습니다. 나는 각각을 논리를 복제하는 반짝이는 새로운 JavaScript 함수로 대체했습니다. 진행하면서 리팩터링 하고 버그를 수정하며 성능을 향상 시키기 시작했습니다.
나의 노동의 열매
완성 된 제품은 완벽하게 깨끗한 코드는 아니지만 이전보다 훨씬 나아졌습니다.
크로스 워드 퍼즐 생성기의 JavaScript 버전을 완성한 후 튜토리얼을 쓸 가치가 있는지 궁금해지기 시작했습니다. 필자가 사용한 알고리즘보다 더 나은 알고리즘이 있다고 100 % 확신하고, 더 많은 가독성과 효율성을 개선 할 수 있다고 확신합니다. 나쁜 습관을 가르치고 싶지 않습니다.
또한 매우 복잡하고 가르치기 가장 쉬운 자료는 아닙니다.
결국 나는 그것이 좋은 생각이라고 결정했다. 너무나 많은 튜토리얼은 사소한 것이기 때문에 일반적인 회사 코드 기반이 어떻게 생겼는지 잘 이해하지 못합니다. 이것은 당신에게 더 나은 근사치를 줄 것입니다. 수년에 걸쳐 상당히 복잡한 문제에 대해 다양한 능력 수준을 가진 여러 개발자의 협업입니다. 두 개발자 모두 나입니다. ?
또한 개발자로서 성장의 열쇠 인 자신 만의 개선 사항을 추가 할 수 있는 기회를 제공합니다.
우리는 정확히 무엇을 만들고 있습니까?
JavaScript, HTML 및 CSS를 사용하여 크로스 워드 퍼즐 생성기를 만들고 있습니다. 아이디어는 큰 단어 목록을 가져 와서 임의의 단어를 골라 내고 크로스 워드 퍼즐을 만들어내는 것입니다.
먼저 그리드에 단어를 배치합니다. 그런 다음 해당 단어에 연결할 수 있는 다른 단어를 얻게 됩니다. 그런 다음 다른 단어에 대해서도 똑같이 합니다. 이 과정을 계속 진행하여 단어가 배치되거나 퍼즐의 어느 곳에도 맞지 않을 때마다 다른 단어를 선택합니다.
우리는 언제 단어 배치를 중단합니까? 그것은 두 가지 주요 요인에 의해 결정되는 복잡한 대답입니다.
크로스 워드 퍼즐이 완성되면 계속해서 더 많은 것을 만들어 보겠습니다. 그런 다음 가장 많은 단어 교차점이 있는 것을 찾아 화면에 표시합니다!
문제 해결
이 글에서는 이전 튜토리얼에서처럼 잡초에 들어 가지 않을 것입니다. 너무 많은 기능과 엣지 케이스가 있습니다. 대신, 우리가 만들 고급 구성 요소를 자세히 설명하면 가장 도움이 될 것이라고 생각합니다. 모든 조각들이 어떻게 조화를 이루는 지 아는 것은 전투의 절반입니다.
어떤 변수가 변경 되는지를 염두에 두고 각 기능이 수행하는 작업을 연구하는 것이 좋습니다. 댓글 섹션은 무언가를 이해하지 못하는 경우 도움을 얻을 수 있는 좋은 방법입니다. 다른 사람들은 아마 그것에 대해 감사 할 것입니다.
단어의 큰 목록
가장 먼저 필요한 것은 선택할 단어의 큰 목록입니다.
원래 버전에서는 텍스트 파일에서 King James Bible을 가져 왔습니다.
업데이트 된 버전에서는 방금 단어가 포함 된 JavaScript 배열을 만들었습니다. 여기서 확인할 수 있습니다.
단어 표현
그리드에 단어를 놓으려면 몇 가지를 알아야 합니다. 분명히 단어 자체의 텍스트를 알아야 하지만 단어의 위치에 대해서도 알아야 합니다. 시작 위치를 표시하려면 행과 열이 필요합니다. 단어의 방향이 가로인지 세로 인지를 나타내는 부울 값도 필요합니다.
우리는 자신이 만든 단어 개체를 사용하여 단어를 표현할 것입니다. 여기서 확인할 수 있습니다.
크로스 워드 퍼즐 표현
우리가 만들고 있는 크로스 워드 퍼즐 개체는 완전히 완성 된 크로스 워드 퍼즐을 나타냅니다. 각기 다른 목적을 수행하는 다양한 기능을 갖습니다. 각 기능의 전체 목록과 기능은 다음과 같습니다.
여기서 확인할 수 있습니다.
최고의 크로스 워드 퍼즐 생성
그리드에 단어를 배치 할 수 있게 되면 크로스 워드 퍼즐을 만들어야 합니다. 그런 다음 최고의 퍼즐을 골라 화면에 표시해야 합니다. 이 모든 것을 수행하는 최상위 기능을 createCrosswordPuzzle이라고 합니다.
createCrosswordPuzzle 함수에는 목표 달성을 돕는 여러 가지 중첩 함수가 있습니다. 각 기능의 전체 목록과 기능은 다음과 같습니다.
위의 기능 외에도 이 파일에는 사용되지 않는 단어와 다양한 임의 값을 가져 오는 데 도움이 되는 일부 도우미 기능이 포함되어 있습니다.
여기서 확인할 수 있습니다.
성능 최적화
이전 섹션이 모든 부분이 어떻게 조화를 이루는 지 확인하는 데 도움이 되었기를 바랍니다. 크로스 워드 퍼즐 생성기는 사소한 문제는 아니지만 작은 문제로 나누는 것이 좋은 방법입니다. 실제로 이것은 모든 프로그래밍 작업에 적합한 접근 방식입니다.
한 가지 측면을 더 자세히 다루고 싶습니다. 기본적으로 이 코드는 빠르지 않습니다. 매우 많은 양의 중첩 루핑이 있습니다.
더 빨라지기 위해 취한 단계를 알려 드리겠습니다. 더 나은 알고리즘을 알고 있다면 의견을 보내 주시기를 바랍니다. 이것은 평생 동안 지속되는 공예이며, 저는 선생님만큼 학생입니다.
성능을 향상 시키기 위해 취한 4 가지 단계가 있습니다. 입력 조정, 스마트 단어 선택, 종료시기 알기 및 충분하다고 부르기로 합니다.
입력 조정
프로그램 속도에 큰 영향을 줄 수 있는 두 가지 변수가 있습니다. 하나는 그리드 수를 제어하고 다른 하나는 그리드에 단어를 맞추려는 시도 수를 제어합니다.
시도 횟수가 많을수록 총 그리드 수를 줄일 수 있음을 알았습니다. 많은 시도는 크로스 워드 퍼즐에 단어가 밀집되어 있도록 합니다.
이 입력을 직접 사용하여 프로그램 속도에 영향을 미치는 방식과 크로스 워드 퍼즐의 모양에 주목하십시오. 페이지가 시간 초과되지 않도록 잘 보이는 크로스 워드 퍼즐을 만들기 위해 최적화하려고했습니다.
이 입력을 직접 사용하여 프로그램 속도에 영향을 미치는 방식과 크로스 워드 퍼즐의 모양에 주목하십시오. 페이지가 시간 초과되지 않도록 잘 보이는 크로스 워드 퍼즐을 만들기 위해 최적화하려고했습니다.
똑똑한 단어 따기
작업 속도를 높이는 한 가지 방법은 단어 선택을 그리드에 배치 할 수 있는 단어로 제한하는 것입니다.
처음에 나는 각 단어를 무작위로 골랐다. 그러나 그 결과 적합한 방법이 없는 그리드에 단어를 배치하려고 시도했다. 그래서 나는 그리드를 반복하면서 많은 시간을 낭비했으며 그리드에 단어를 맞추는 시도를 낭비했습니다.
이 문제를 해결하기 위해 크로스 워드 퍼즐에 어떤 문자가 있는지 목록을 유지하기 시작했습니다. 이렇게 하면 단어 선택을 해당 문자 중 하나로 시작하는 단어로만 제한 할 수 있습니다. 시도 할 좋은 단어를 식별하는 데 도움이 되도록 아래 함수를 만들었습니다. 완벽하지는 않지만 불필요한 루핑을 방지합니다.
언제 종료해야 하는지 알기
때때로 당신은 언제 종료해야 하는지 알아야 합니다. 크로스 워드 퍼즐에 더 많은 단어가 추가되면 다른 단어를 성공적으로 배치 할 가능성이 줄어 듭니다. 공간이 충분하지 않아서 배치 요건이 더욱 엄격해졌습니다.
결국 우리는 그리드에 단어를 놓기 위해 너무 오랫동안 실패하기 시작할 것입니다. 나는 그 시점에서 일을 끝내는 것이 낫겠다고 결정했습니다. 우리가 그리드에 단어를 배치하는 데 문제가 있다면 어쨌든 가득 차있을 것입니다.
직장에서 수익을 줄이는 법입니다.
이것이 일어나는 코드 섹션은 다음과 같습니다. 숫자 470은 임의적입니다. 테스트를 마친 직후였습니다.
그것을 충분히 부름
성능을 향상 시키기 위해 취한 마지막 단계는 4 단어 이상의 교차점을 가진 크로스 워드 퍼즐을 만든 후에 크로스 워드 퍼즐 생성을 중단하는 것이었습니다.
4 단어 교차로가 있는 크로스 워드 퍼즐은 일반적으로 매우 좋아 보이므로 평균 생성 시간이 단축되면 중지하십시오.
아래를 참조하십시오.
결론
와우는 길고 지루한 게시물이었습니다. 나는 누군가가 실제로 이것을 읽는 것을 정말로 바란다. 그렇다면 의견을 남겨주세요. 이 모든 것을 쓰는 것에 대해 기분이 나아질 것입니다.?
자신 만의 크로스 워드 퍼즐 생성기를 설치하여 사용할 수 있기를 바랍니다. 고려해야 할 세부 사항이 많은 재미있는 프로젝트입니다. 직접 구현하고 모든 부분이 어떻게 작동하는지 이해하면 더 나은 개발자가 될 것입니다.
등록된 댓글이 없습니다.
