配列の配列における文字割り当ての改善

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の最大）の数と、各単語の長さに応じて、Maximum call stack size exceeded errorエラーを引き起こす可能性があります。これを避けるための改善がありますか？そうでない場合は、最大長の単語の安全な制限を設定する数学的なアルゴリズムがありますか？

ありがとうございます。

Answer 1

単語を表す文字列を配列に変換します。配列の配列内の配列の開始インデックスと配列の配列内のインデックスを反映する2つの変数を作成し、現在の文字列のインデックスを設定して単語を再フォーマットします。

ポストインクリメントの垂直インデックスtoは、配列の配列内の隣接する配列に対応します。現在の配列のインデックスに対応するindexにstringのindexの値を設定します。 文字を水平に設定するには、変数fromを転記します。

ボード上の水平、垂直、斜線の単語を含むクロスワードボードを生成するために、水平および斜めの座標を反映するボード配列のインデックスに値を設定できるオプションのオブジェクトを受け入れる関数を作成できます。

stacksnippetsのクロスワードボードに少なくとも9つの単語があります。.colorの.textContentの要素は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>