如何在 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

您可能需要详细说明，因为我不能 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>

Answer 2

我是这样解释你的问题的，展示了如何获取输入并将数字映射到关联的单元格。

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>

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

How to change one grid in HTML and color one square

html

javascript

css

css-grid