javascript - 数组数组中字母分配的改进

Question

我编写了以下代码来在数组数组中分配单词。就像文字游戏一样。

var board = [
  ["m","t","h","v","g","y","m","w","n","q"],
  ["q","e","v","f","a","k","n","c","c","k"],
  ["x","s","r","e","r","c","m","c","h","a"],
  ["j","z","f","w","g","i","o","t","b","l"],
  ["x","v","j","m","x","q","s","s","v","c"],
  ["m","i","i","a","e","u","t","t","j","m"],
  ["t","n","j","w","h","j","e","m","b","d"],
  ["v","n","t","f","r","y","b","q","v","a"],
  ["k","q","x","b","q","w","c","i","v","g"],
  ["s","o","m","e","t","h","i","n","g","t"]
];

const directions = [
  'horizontal',
  'vertical'
];

function chooseRandomPlace() {
  return [Math.floor(Math.random() * 10),
          Math.floor(Math.random() * 10)];
}

let i = 0;
function horizontal(word) {
  i++;
  console.log(i);
  let wordLength = word.length;
  let [x, y] = chooseRandomPlace();
  if (9 - y < wordLength) return horizontal(word);

  for (let i = 0; i < wordLength; i++) {
    if (typeof board[x][y + i] !== 'string') {
      return horizontal(word)
    }
  }

  for (let i = 0; i < wordLength; i++) {
    board[x][y + i] = {value: word[i]};
  }
}

function vertical(word) {
  i++;
  console.log(i);
  let wordLength = word.length;
  let [x, y] = chooseRandomPlace();
  if (9 - x < wordLength) return vertical(word);


  for (let i = 0; i < wordLength; i++) {
    if (typeof board[x + i][y] !== 'string') {
      return vertical(word);
    }
  }

  for (let i = 0; i < wordLength; i++) {
    board[x + i][y] = {value: word[i]};
  }
}

function alocate(word) {
  let direction = directions[Math.floor(Math.random() * directions.length)];
  if (direction === 'horizontal') {
    horizontal(word)
  } else {
    vertical(word);
  }
  console.log(JSON.stringify(board));
}

const words = ['SOMETHIN', 'SOMETHIN', 'SOMETHIN', 'SOMETHIN', 'SOMETHIN'];
for (let word of words) {
  let location = alocate(word);
}

并且正在工作，但它可能会导致超出最大调用堆栈大小错误错误，具体取决于单词数(最多 10 个)和每个单词的长度。是否有任何类型的改进可以避免这种情况......如果没有，是否有某种数学算法来设置最大长度的单词的安全限制？

谢谢。

Answer 1

将表示单词的字符串转换为数组。创建两个变量，分别反射(reflect)数组数组中数组的起始索引和数组数组中的索引，应将字符串的当前索引设置为重新形成单词。

后增量垂直索引to，对应于数组数组中的相邻数组。将索引 where(对应于当前数组的索引)处的每个相邻数组设置为字符串索引的值。 要水平设置字母，请发布增量from变量。

您可以创建一个接受可选对象的函数，其中可以在反射(reflect)水平和对 Angular 坐标的棋盘数组的索引处设置值，以生成棋盘上水平、垂直和对 Angular 线上包含单词的填字游戏棋盘。

在 stacksnippets 的填字游戏板上至少有 9 个单词，其中元素的 .textContent 的 .color 在 click 处发生更改，其中字母是单词的一部分。

let board = [["m","t","h","v","g","y","m","w","n","q"],
            ["q","e","v","f","a","k","n","c","c","k"],
            ["x","s","r","e","r","c","m","c","h","a"],
            ["j","z","f","w","g","i","o","t","b","l"],
            ["x","v","j","m","x","q","s","s","v","c"],
            ["m","i","i","a","e","u","t","t","j","m"],
            ["t","n","j","w","h","j","e","m","b","d"],
            ["v","n","t","f","r","y","b","q","v","a"],
            ["k","q","x","b","q","w","c","i","v","g"],
            ["a","d","r","j","m","n","r","e","n","t"]];

const div = document.querySelector("div");

const settings = {list:void 0, diagonal:false, horizontal:false, from:0, to:0};

const setWord = (coords) => {

  div.innerHTML = "";
  
  let {list, from, to, diagonal, horizontal} = Object.assign({}, settings, coords);
  
  if (!list || list.length && list.length === 0) 
    throw new Error("list is not defined");
  
  for (let letter of list) {
    let [x, y] = [horizontal ? to : to++
                 , diagonal || horizontal ? from++ : from];
    board[x][y] = `<span onclick="this.className='letter'">${letter}</span>`;
  }

  for (let arr of board) {
    div.innerHTML += `${arr.map(letter =>
      /^</.test(letter) ? letter : `<span>${letter}</span>`).join(" ")}<br>`;
  }

}

setWord({list:"su", diagonal:false, from:4, to:2});
setWord({list:"ha", diagonal:false, from:2, to:0});
setWord({list:"lemur", diagonal:true, from:2, to:2});
setWord({list:"f", diagonal:false, from:2, to:3});
setWord({list:"d", diagonal:false, from:5, to:3});
setWord({list:"a", diagonal:false, from:6, to:3});
setWord({list:"l", diagonal:false, from:7, to:3});
setWord({list:"l", diagonal:false, from:7, to:3});
setWord({list:"p", diagonal:false, from:5, to:6});
setWord({list:"pa", horizontal:true, from:0, to:2});
setWord({list:"m", horizontal:true, from:3, to:2});
setWord({list:"clone", diagonal:false, from:7, to:2});

.letter {
  color: green;
}

div {
  background: #000;
  width: 180px;
  margin: 4px;
  padding: 4px;
  border: 4px solid goldenrod;
}

div span {
  color: red;
  white-space: pre;
  position: relative;
  display: inline-block;
  width: 14px;
}

<div></div>