如何在 HTML 中更改一个网格并为一个正方形着色 [关闭]

Question

我有一个问题，无法解决。我必须用 HTML、CSS 和 JS 制作一款游戏。当人工通过文本框输入一个数字时，我有网格，我必须在一个正方形中显示一张图片并将正方形设为绿色。人类单击一个按钮，然后我有卡通人物，我必须移动它（在一个正方形中显示他的照片，并在地图上将此正方形设为绿色（网格是地图）。之后，当人类再次单击按钮时，我必须将卡通人物的图片移动到另一个方块上，并将其变为绿色。到游戏结束时，我必须这样做（改变网格（即地图）。但我不能这样做，我到处找，但什么都找不到。你能帮帮我吗？我会很感激的！ 祝你有美好的一天！ 这是我的网格脚本，下面是我的 HTML 网格。

.grid-container {
  display: inline-grid;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  background-color: #778899;
  padding: 0px;
  margin-left:15px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 45px 45px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container" id="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Answer 1

以下是我对您问题的解释，展示了如何接受输入并将数字映射到相关单元格。

document.querySelector('.numinput-btn').addEventListener('click', e => {
  let num = document.querySelector('.numinput').value
  // reset the grid and set the on state for the number given
  document.querySelectorAll('.grid-item').forEach((el, index) => {
    if (index == num - 1) el.classList.add('onstate');
    else el.classList.remove('onstate');
  })
})

.grid-container {
  display: inline-grid;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  background-color: #778899;
  padding: 0px;
  margin-left: 15px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 45px 45px;
  font-size: 30px;
  text-align: center;
}

.onstate {
  background: green;
}

<div align='center'>
  <input type='number' class='numinput' /> <button class='numinput-btn'>find</button>
</div>
<hr>
<div class="grid-container" id="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Answer 2

您可能需要详细说明，因为我不能 100% 确定您要在这里完成什么。您的输入在哪里，它如何与网格交互？

如果你想改变整个网格中的特定网格单元格，你可以在网格中添加一个点击监听器并检查目标是否是一个单元格。

const handleCellClick = (e) => {
  if (e.target.classList.contains('grid-item')) {
    e.target.classList.toggle('grid-item-active');
  }
}

document.querySelector('.grid-container')
  .addEventListener('click', handleCellClick);

.grid-container {
  display: inline-grid;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  background-color: #778899;
  padding: 0px;
  margin-left:15px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 15px 15px;
  font-size: 10px;
  text-align: center;
}
.grid-item-active {
  background: #0F0;
}

<div class="grid-container" id="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>