我正在尝试做一个比以前更高级的项目（这个项目是一个单词搜索求解器），到目前为止我已经成功了，但是在尝试实现垂直单词查找时我被卡住了。我通过制作大量数组和 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() 函数中还没有任何内容，因为这是我需要帮助的。我考虑过复制水平代码并试图从那里弄清楚我应该做什么，但我觉得可能有一种比我想出的更简单的方法。再次感谢您的帮助！