javascript - 您将如何在单词搜索解算器中实现垂直单词查找？

Question

我正在尝试制作一个比以前更高级的项目(这个项目是一个单词搜索解算器)，到目前为止我已经成功了，但是在尝试实现垂直单词查找时我陷入了困境。我通过制作大量数组和 for 循环来解决这个问题，这似乎适用于水平方向，因为效果很好，但我无法真正找到一种方法来编辑我的代码，以便它可以适用于垂直单词，而不需要摆脱大量的水平代码。我觉得它应该很容易编辑，只需添加一两个简单的值，但我已经为此工作了很长时间，我的大脑开始受伤。仅水平方向就需要很长时间，而我真的不想垂直方向花费很长时间，因为我知道这可能非常简单。我的代码如下:

var numberOfColumnsInput = document.getElementById('numberOfColumns');
var numberOfRowsInput = document.getElementById('numberOfRows');
var wordSearchParametersDiv = document.getElementById('wordSearchParameters')
var getInputs = document.getElementsByClassName('newInputs');
var allowStyling = document.getElementsByClassName('createdLetters');
var canConfirm = true;
var lettersArray = [];
var convertArrayToWords = []
var loopIterator = 0;
var originalLettersArray, createInputForWord,wordsToFindValue, originalLettersArrayLength, reverseWord, numberOfSpans;

function createInputs(){
  if(canConfirm == true){
    for(i=1;i<parseInt(numberOfRowsInput.value) + 1;i++){
      var newInputStuff = document.createElement("input");
      newInputStuff.setAttribute("type", "text");
      newInputStuff.setAttribute("class", "newInputs")
      newInputStuff.setAttribute("placeholder", "Enter the letters from row " + String(i))
      newInputStuff.setAttribute("maxLength", numberOfColumnsInput.value);
      wordSearchParametersDiv.appendChild(newInputStuff);
    }
    var newButton = document.createElement("button");
    newButton.setAttribute("onclick", "createWordSearch()");
    newButton.setAttribute("id", "newButtonId");
    newButton.innerHTML = 'Confirm your letters?';
    wordSearchParametersDiv.appendChild(newButton);
  }
  canConfirm = false;
}

function createWordSearch(){
  extractLetters();
  originalLettersArray = lettersArray.slice(0);
  originalLettersArrayLength = originalLettersArray.length;
  var numberOfRows = parseInt(numberOfRowsInput.value);
  var edgeOfWordSearchPosition = parseInt(numberOfColumnsInput.value);
  var createDivForSearch = document.createElement("div");
  createDivForSearch.setAttribute("class", "createdRows");
  var createSpanForLetter = document.createElement("span");
  createSpanForLetter.setAttribute("class", "createdLetters")
  for(i=0;i<numberOfRows;i++){
    var numberOfRows = parseInt(numberOfRowsInput.value);
    var edgeOfWordSearchPosition = parseInt(numberOfColumnsInput.value);
    var createDivForSearch = document.createElement("div");
    createDivForSearch.setAttribute("class", "createdRows");
    wordSearchParametersDiv.appendChild(createDivForSearch);
    for(j=0;j<edgeOfWordSearchPosition;j++){
      console.log(lettersArray);
      var createSpanForLetter = document.createElement("span");
      createSpanForLetter.setAttribute("class", "createdLetters")
      createSpanForLetter.innerHTML = lettersArray[0];
      numberOfSpans = numberOfSpans + 1;
      lettersArray.splice(0,1);
      createDivForSearch.appendChild(createSpanForLetter);
    }
  }
  createNewFindWordBox(createDivForSearch);
}

function extractLetters(){
  for(i=0;i<parseInt(numberOfRowsInput.value);i++){
    splitLetters = getInputs[i].value.split("");
    for(j=0;j<splitLetters.length;j++){
      lettersArray.push(splitLetters[j]);
    }
  }
}

function createNewFindWordBox(x){
  createInputForWord = document.createElement('input');
  var createConfirmButton = document.createElement('button');
  createInputForWord.setAttribute('class', 'wordsToFind');
  createInputForWord.setAttribute('placeholder', 'Enter a word to find it.')
  createConfirmButton.setAttribute('id', 'confirmWordButton');
  createConfirmButton.setAttribute('onClick', 'findWord()')
  createConfirmButton.innerHTML = 'Confirm Word'
  x.appendChild(createInputForWord);
  x.appendChild(createConfirmButton);
}

function findWord(){
  wordsToFindValue = createInputForWord.value;
  reverseWord = createReverse(wordsToFindValue);
  checkHorizontal();
  checkVertical();
  checkDiagonal();
  checkHorizontal('reverse');
  checkVertical('reverse');
  checkDiagonal('reverse');
}

function createReverse(x){
    var splitString = x.split("");
    var reverseArray = splitString.reverse();
    var joinArray = reverseArray.join("");
    return joinArray;
}

//Horizontal is done for now! Bug: You can find a word that has part of it on one line and the rest on another line and it will think it found a word even though that is not how word searches work.
function checkHorizontal(x){
  if(x=='reverse'){
    var whatIndexWeOn = [];
    for(i=0;i<(originalLettersArrayLength);i++){
      for(j=0;j<wordsToFindValue.length;j++){
        convertArrayToWords.push(originalLettersArray[j+i]);
        whatIndexWeOn.push(j+i);
      }
      var makeWord = convertArrayToWords.join('');
      if(makeWord == reverseWord){
        console.log('found word');
        for(j=0;j<wordsToFindValue.length;j++){
          allowStyling[whatIndexWeOn[j]].style.backgroundColor = 'blue';
        }
      }
      convertArrayToWords = [];
      whatIndexWeOn = [];
    }
  }else{
    var whatIndexWeOn = [];
    for(i=0;i<(originalLettersArrayLength);i++){
      for(j=0;j<wordsToFindValue.length;j++){
        convertArrayToWords.push(originalLettersArray[j+i]);
        whatIndexWeOn.push(j+i);
      }
      var makeWord = convertArrayToWords.join('');
      if(makeWord == wordsToFindValue){
        console.log('found word');
        for(j=0;j<wordsToFindValue.length;j++){
          allowStyling[whatIndexWeOn[j]].style.backgroundColor = 'blue';
        }
      }
      convertArrayToWords = [];
      whatIndexWeOn = [];
    }
  }
}

function checkVertical(x){
  if(x=='reverse'){

  }else{
    
  }
}

function checkDiagonal(x){
  if(x=='reverse'){

  }else{
    
  }
}

#wordSearchParameters{
  background-color:lightgrey;
  height:50vh;
  width:90vw;
}

.newInputs{
  display:block;
}

.createdLetters{
  padding:10px;
  display:inline-block;
  border:1px black solid;
  height:25px;
  width:25px;
}

.wordsToFind{
  display:block;
}

#confirmWordButton{
  display:block;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Word Search Solver</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <center>
      <div id='wordSearchParameters'>
        <h1> Welcome to the Word Search Solver!</h1>
        <p>Please enter the things below:</p>
        <input type='number'id='numberOfColumns' placeholder='# of columns (vertical)'>
        <input type='number' id='numberOfRows' placeholder='# of rows (horizontal)'>
        <button id='confirmButton' onclick='createInputs()'>Confirm</button>
      </div>
    </center>
    <script src="script.js"></script>
  </body>
</html>

我在 checkVertical() 函数中还没有任何内容，因为这就是我需要帮助的地方。我考虑过复制水平代码并试图弄清楚我应该从那里做什么，但我觉得可能有一种比我想出的方法更简单的方法。再次感谢您的帮助!

Answer 1

我将从 checkHorizo​​ntal 中的内容开始，但请注意，对于水平检查，您要从左到右扫描字母(即，索引每次增加 1)。要进行垂直检查，您需要根据列数来增加索引。

考虑一个简单的例子:3x3 字谜:

o n e
r g b
c o l

对应于以下数组:[o, n, e, r, g, b, c, o, l]

水平扫描，您可以找到单词“one”。

要查找单词'orc'，您需要从索引i = 0 开始，然后添加列数 (3) 以查找下一个字母。因此，假设起始索引为 0 - 或字母“o” - array[previousIndex + numCols] 等于 array[3] 给出下一个字母 - ' r' - 再次添加列数即可得到 array[6] 或字母 'c'。