使用JavaScript或HTML的纵横字谜

我需要做这个纵横填字游戏，我对它是全新的，但是我一直在努力做这个，因为我必须把它作为一个作业提交，以获得一份网络开发的工作。我很难决定使用一个背景颜色改变的HTML表格来拼图，还是制作一个javascript多维数组来制作这个纵横字谜

交叉词Puzzel
#普泽尔{
宽度：100%；
保证金：0；
填充：0；
边界塌陷：塌陷；
边框：1px纯黑；
}
#交叉{
文本对齐：居中；
宽度：30px；
高度：30px；
保证金：0；
填充：0；
边界塌陷：塌陷；
边框：1px纯白；
}
#钮扣{
宽度：30%；
浮动：对；
}
tr{
保证金：0；
填充：0；
边界塌陷：塌陷；
}
#左框{
浮动：左；
宽度：50%
身高：50%；
}
#右盒{
浮动：左；
}
#屁股{
宽度：100px；
填充：20px；
}
桌子{
填充：20px；
}
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?

我知道我不应该这样做，但我喜欢这个挑战，所以我在这方面提出了一个解决方案

它使用以下标记

<div id="puzzle_container">
    <table id="puzzle">
    </table>
</div>

<div id="hints_container">
    <h3>Vertical</h3>
        <div id="vertical_hints_container"></div>
    <h3>Horizontal</h3>
        <div id="horizontal_hints_container"></div>
</div>

<div id="buttons_container">
    <button id="clear_all">Clear All</button>
    <button id="check">Check</button>
    <button id="solve">Solve</button>
    <button id="clue">Clue</button>
</div>

竖的
水平的
清除所有
检查
解决
线索

和jQuery。

交叉词Puzzel
#交叉{
文本对齐：居中；
宽度：30px；
高度：30px；
保证金：0；
填充：0；
边界塌陷：塌陷；
边框：1px纯白；
}
#钮扣{
宽度：30%；
浮动：对；
}
tr{
保证金：0；
填充：0；
边界塌陷：塌陷；
}
运输署{
高度：30px；
宽度：30px；
}
#左框{
浮动：左；
}
#右盒{
浮动：左；
清除：左；
}
.屁股{
高度：50px；
宽度：107px；
}
#普泽尔{
文本对齐：居中；
保证金：0；
填充：0；
边界塌陷：塌陷；
边框：1px纯黑；
}
.输入框{
宽度：40px；
高度：40px；
边框：1px纯黑；
文本对齐：居中；
}
#床头柜{
宽度：480px；
浮动：左；
清除：左；
}
//全球的
var-currentTextInput；
var puzzelArrayData；
//加载纵横字谜
函数initializeScreen（）{
var puzzelTable=document.getElementById（“puzzel”）；
puzzelArrayData=preparePuzzelArray（）；
对于（变量i=0；i=0；j--）{
如果（puzzelArrayData[j][column]！=0）{
document.getElementById（'txt'+'.'+j+'.'+列）.value=puzzelArrayData[j][column]；
}否则就断了；
}
//在右边打印元素
对于（i=column；i=0；k--）{
如果（puzzelArrayData[行][k]！=0）{
document.getElementById（'txt'+''.'+row+'.'+k）.value=puzzelArrayData[row][k]；
}否则就断了；
}
//完成了！
}
}
水平方向：垂直方向
<script>
const puzzleText = `
======REPLACE WITH YOUR PUZZLE BELOW======
exolve-begin
  exolve-width: 3
  exolve-height: 3
  exolve-grid:
    ACE
    R.R
    EAR
  exolve-across:
    1 Clue for ACE (3)
    3 Clue for EAR (3)
  exolve-down
    1 Clue for ARE (3)
    2 Clue for ERR (3)
exolve-end
======REPLACE WITH YOUR PUZZLE ABOVE======
`;
</script>