如何使用Javascript在纵横字谜网格中添加导航功能？_Javascript_Html_Jquery_Css

如何使用Javascript在纵横字谜网格中添加导航功能？

javascript html jquery css

如何使用Javascript在纵横字谜网格中添加导航功能？,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我按照以下步骤创建了自己的纵横填字游戏： html文件如下所示： <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>The Weekly Crossword</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/norm

我按照以下步骤创建了自己的纵横填字游戏：

html文件如下所示：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>The Weekly Crossword</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./mystyle.css">

</head>
<body>
<!-- partial:index.partial.html -->
<input type="checkbox" name="checkvaliditems" id="checkvaliditems" />
<label for="checkvaliditems">Let's check as we go?</label>

<div class="crossword-board-container">

    <div class="crossword-board">
        <!-- ROW 1 -->
        <input id="item1-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[dD]{1}$" required="required" value="" />
        <input id="item1-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
        <input id="item1-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[pP]{1}$" required="required" value="" />
        <input id="item1-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[pP]{1}$" required="required" value="" />
        <input id="item1-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
        <input id="item1-6" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
        <!-- ROW 1 -->
        <!-- ROW 2 -->
        <input id="item2-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
        <span class="crossword-board__item--blank" id="item2-2"></span>
        <span class="crossword-board__item--blank" id="item2-3"></span>
        <span class="crossword-board__item--blank" id="item2-4"></span>
        <span class="crossword-board__item--blank" id="item2-5"></span>
        <span class="crossword-board__item--blank" id="item2-6"></span>
        <!-- ROW 2 -->
        <!-- ROW 3 -->
        <input id="item3-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
        <span class="crossword-board__item--blank" id="item3-2"></span>
        <span class="crossword-board__item--blank" id="item3-3"></span>
        <span class="crossword-board__item--blank" id="item3-4"></span>
        <span class="crossword-board__item--blank" id="item3-5"></span>
        <span class="crossword-board__item--blank" id="item3-6"></span>
        <!-- ROW 3 -->
        <!-- ROW 4 -->
        <input id="item4-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[gG]{1}$" required="required" value="" />
        <input id="item4-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
        <input id="item4-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
        <input id="item4-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[wW]{1}$" required="required" value="" />
        <input id="item4-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[pP]{1}$" required="required" value="" />
        <span class="crossword-board__item--blank" id="item4-6"></span>
        <!-- ROW 4 -->
        <!-- ROW 5 -->
        <input id="item5-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[oO]{1}$" required="required" value="" />
        <span class="crossword-board__item--blank" id="item5-2"></span>
        <span class="crossword-board__item--blank" id="item5-3"></span>
        <span class="crossword-board__item--blank" id="item5-4"></span>
        <span class="crossword-board__item--blank" id="item5-5"></span>
        <span class="crossword-board__item--blank" id="item5-6"></span>
        <!-- ROW 5 -->
        <!-- ROW 6 -->
        <input id="item6-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[nN]{1}$" required="required" value="" />
        <span class="crossword-board__item--blank" id="item6-2"></span>
        <span class="crossword-board__item--blank" id="item6-3"></span>
        <span class="crossword-board__item--blank" id="item6-4"></span>
        <span class="crossword-board__item--blank" id="item6-5"></span>
        <span class="crossword-board__item--blank" id="item6-6"></span>
        <!-- ROW 6 -->
        <div class="crossword-board crossword-board--highlight crossword-board--highlight--across">
            <span id="across-1" class="crossword-board__item-highlight crossword-board__item-highlight--across-1"></span>
            <span id="across-2" class="crossword-board__item-highlight crossword-board__item-highlight--across-2"></span>
        </div>
        <div class="crossword-board crossword-board--highlight crossword-board--highlight--down">
            <span id="down-1" class="crossword-board__item-highlight crossword-board__item-highlight--down-1"></span>
        </div>
        <div class="crossword-board crossword-board--labels">
            <span id="label-1" class="crossword-board__item-label crossword-board__item-label--1"><span class="crossword-board__item-label-text">1</span></span>
            <span id="label-2" class="crossword-board__item-label crossword-board__item-label--2"><span class="crossword-board__item-label-text">2</span></span>
        </div>
        <div class="crossword-clues">
            <dl class="crossword-clues__list crossword-clues__list--across">
                <dt class="crossword-clues__list-title">Across</dt>
                <dd class="crossword-clues__list-item crossword-clues__list-item--across-1" data-number="1"> headmaster of Hogwarts (last name) when the Chamber of Secrets was opened for the first time (6)</dd>
                <dd class="crossword-clues__list-item crossword-clues__list-item--across-2" data-number="2"> Hagrid's Half Brother (5)</dd>
            </dl>
            <dl class="crossword-clues__list crossword-clues__list--down">
                <dt class="crossword-clues__list-title">Down</dt>
                <dd class="crossword-clues__list-item crossword-clues__list-item--down-1" data-number="1"> ______ Pox; a potentially fatal contagious disease that occurs in wizards and witches (6)</dd>
            </dl>

            </dl>

        </div>

        <div class="crossword-complete">
        Congratulations,
You are awesome!
        </div>

    </div>

</div>
<!-- partial -->

</body>
</html>

.crossword-board-container {
  position: relative;
  background: #FFFFFF;
}

.crossword-board {
  position: absolute;
  z-index: 1;
  background: transparent;
  border: 1px solid #000000;
  width: 400px;
  height: 400px;
  display: grid;
  grid-template: repeat(6, 16.666667%)/repeat(6, 16.666667%);
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
}

.crossword-board__item {
  border: 1px solid #000000;
  background: transparent;
  position: relative;
  z-index: 100;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}
.crossword-board__item:active, .crossword-board__item:focus {
  background: #FFFF74;
  border: 1px solid #000000;
  outline: 1px solid #000000;
}

.crossword-board__item--blank {
  background: #000000;
  border: 1px solid #000000;
  outline: 1px solid #000000;
}

.crossword-board--labels {
  position: absolute;
  z-index: 60;
}

.crossword-board__item-label {
  position: relative;
}

.crossword-board__item-label-text {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 12px;
  line-height: 1;
}

.crossword-board__item-label--1 {
  grid-column: 1/1;
}

.crossword-board__item-label--2 {
  grid-column: 1/1;
  grid-row: 4/4;
}

.crossword-board--highlight {
  position: absolute;
  z-index: 50;
}

.crossword-board__item-highlight {
  background: #9AFF67;
  display: grid;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}

/***********************************************************/
/** ACROSS ANSWERS HIGHLIGHTING START                      */
/***********************************************************/
.crossword-board__item-highlight--across-1 {
  grid-column: 1/7;
}

.crossword-board__item-highlight--across-2 {
  grid-column: 1/6;
  grid-row: 4;
}

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-1 {
  opacity: 1;
}

#item4-1:valid ~ #item4-2:valid ~ #item4-3:valid ~ #item4-4:valid ~ #item4-5:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-2 {
  opacity: 1;
}

/***********************************************************/
/** ACROSS ANSWERS HIGHLIGHTING END                        */
/***********************************************************/
/***********************************************************/
/** DOWN ANSWERS HIGHLIGHTING START                        */
/***********************************************************/
.crossword-board__item-highlight--down-1 {
  grid-column: 1;
  grid-row: 1/7;
}

#item1-1:valid ~ #item2-1:valid ~ #item3-1:valid ~ #item4-1:valid ~ #item5-1:valid ~ #item6-1:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-1 {
  opacity: 1;
}

/***********************************************************/
/** DOWN ANSWERS HIGHLIGHTING END                          */
/***********************************************************/
#checkvaliditems:checked ~ .crossword-board-container .crossword-board__item:valid {
  background: #9AFF67;
}

.crossword-clues {
  position: absolute;
  top: 0px;
  left: 400px;
  width: 340px;
}

.crossword-clues__list {
  margin: 0 0 0 20px;
  padding: 0;
  display: inline-block;
  vertical-align: top;
}

.crossword-clues__list-title {
  font-weight: bold;
  padding: 4px;
}

.crossword-clues__list-item {
  font-size: 12px;
  margin: 0;
  padding: 4px;
}
.crossword-clues__list-item:before {
  content: attr(data-number) ". ";
}
#item1-1:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-1:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-1:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item1-2:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-2:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-2:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item1-3:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-3:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-3:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item1-4:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-4:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-4:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item1-5:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-5:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-5:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item1-6:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-6:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-6:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #FFFF74;
}
#item4-1:active ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-1:focus ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-1:hover ~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #FFFF74;
}
#item4-2:active ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-2:focus ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-2:hover ~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #FFFF74;
}
#item4-3:active ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-3:focus ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-3:hover ~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #FFFF74;
}
#item4-4:active ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-4:focus ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-4:hover ~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #FFFF74;
}
#item4-5:active ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-5:focus ~ .crossword-clues .crossword-clues__list-item--across-2,
#item4-5:hover ~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #FFFF74;
}
#item1-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item1-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item1-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item2-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item2-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item2-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item3-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item3-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item3-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item4-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item4-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item4-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item5-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item5-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item5-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item6-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item6-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item6-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #FFFF74;
}
#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid
~ .crossword-clues .crossword-clues__list-item--across-1 {
  background: #9AFF67;
}

#item4-1:valid ~ #item4-2:valid ~ #item4-3:valid ~ #item4-4:valid ~ #item4-5:valid
~ .crossword-clues .crossword-clues__list-item--across-2 {
  background: #9AFF67;
}

#item1-1:valid ~ #item2-1:valid ~ #item3-1:valid ~ #item4-1:valid ~ #item5-1:valid ~ #item6-1:valid
~ .crossword-clues .crossword-clues__list-item--down-1 {
  background: #9AFF67;
}

.crossword-complete {
  position: absolute;
  z-index: 1000;
  top: 110%;
  left: 0%;
  font-size: 24px;
  line-height: 1;
  color: red;
  width: 150%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~
#item2-1:valid ~
#item3-1:valid ~
#item4-1:valid ~ #item4-2:valid ~ #item4-3:valid ~ #item4-4:valid ~ #item4-5:valid ~
#item5-1:valid ~
#item6-1:valid ~ .crossword-complete {
  opacity: 1;
}

#checkvaliditems {
  background: #9AFF67;
  cursor: pointer;
  position: absolute;
  top: 35px;
  left: 37px;
}

[for="checkvaliditems"] {
  padding: 10px 10px 10px 40px;
  margin: 20px;
  display: inline-block;
  background: #9AFF67;
  cursor: pointer;
}

正如您所注意到的，没有使用箭头键在网格中导航的机制。我还想有一个方法，从切换到向下线索。我认为这需要javascript的键码功能，但我不知道如何在中构建它。有什么帮助吗？

以下是如何在Jquery 3.5中使用箭头键移动输入焦点

$(window).on("load.crossword", function(event){
  crossword = {};
  crossword.squares = $("input.crossword-board__item");
  $(document).on("keyup.crossword", function(event){
    var element = $(".crossword-board__item:focus");
    if(element.length > 0){
      var coord = element.attr("id").split("-").map(function(value, index){
        return parseInt(/\d/.exec(value));
      });
      switch(event.which){
        case 37: //left arrow
          element = element.prevAll("input.crossword-board__item").get(0) || element;
          break;
        case 38: //up arrow
          element = element.prevAll("input.crossword-board__item#item"+(coord[0]-1)+"-"+coord[1]).get(0) || element.prevAll("input.crossword-board__item[id^=item"+(coord[0]-1)+"]").last().get(0) || element
          break;
        case 39: //right arrow
          element = element.nextAll("input.crossword-board__item").get(0) || element;
          break;
        case 40: //down arrow
          element = element.nextAll("input.crossword-board__item#item"+(coord[0]+1)+"-"+coord[1]).get(0) || element.nextAll("input.crossword-board__item[id^=item"+(coord[0]+1)+"]").last().get(0) || element
          break;
      }
    }else{
      element = crossword.squares.first().get(0);
    }
    element.select();
  });
});

我不确定你所说的“从横线切换到下线”是什么意思，因为它可能位于一个横线和下线都在的正方形中。澄清后我会更新答案。

那么，这些行去哪里了，我需要创建一个单独的jquery文件吗？我的意思是，当前一个特定的正方形将相关的线索（默认情况下是交叉的）以黄色显示在右侧。通过一个切换开关，我很想切换到那个正方形的向下线索。但看起来不需要那个切换，因为它会自动为两条线索着色，所以不用担心。让我知道如何将此脚本集成到现有的html和css文件中您使用的是什么环境？在codepen.io中，您将进入

外部脚本

区域中的pen settings>JS>键入

jquery

。答案中的行将进入JS区域。如果您在自己的服务器上运行，请使用此处的说明：并使用与另一个

script

标记相同的方式将脚本包含在html

head

中。RubyonRails还有其他方法，等等。在谷歌上搜索你正在使用的任何框架。谢谢@EvanMessinger。这确实解决了我的问题。非常感谢。我已经接受了答案，但是如果您知道如何在输入后自动将光标移到下一个网格中（如果是横向的，则是横向的，反之亦然），请告诉我。