Question

我使用这段代码的最终目标是构建一个“Whack - a - Mole”游戏。

我希望我的痣位于污垢之上。

我用 JS 添加了 6 个痣和 6 个污垢图像，我希望每个痣都位于每个污垢图像的顶部。

在此处查看我的代码：

HTML

    const gameCont = document.getElementById('game-container')
    const points = document.getElementById('points');
    let all = document.getElementsByTagName("img");
    
    for (let i = 0; i < 6; i++) {
        var img = document.createElement('img');
        img.src = '/images/dirt.png'
        img.classList.add("dirt-" + [i])
        gameCont.appendChild(img)
          
    }
        
    for (let i = 0; i < 6; i++) {
        var mole = document.createElement('img');
        mole.src = '/images/mole.png'
        mole.classList.add("mole-" + [i])
        gameCont.appendChild(mole)
    }

        body{
        background-color:#FFC000;
        }
        h1{
            display:flex;
            justify-content:center;
            align-items:center;
            font-size:60px;
        }
        #game-container{
          
        }
        
        .dirt-0,.dirt-1,.dirt-2, .dirt-3,.dirt-4,.dirt-5 {
            height:100px;
            width:160px;
        }
    
        .mole-0,.mole-1,.mole-2, .mole-3,.mole-4,.mole-5{
            z-index:3;
            width:100px;
            height:100px;
        }

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Whack - A - Mole!</title>
    </head>
    <body>
    <h1>Whack - A - Mole!</h1>
    <h1 id="points"></h1>
    <div id="game-container">
    
    </div>
    
    <script src="script.js"></script>
      
    </body>
    </html>

最好的方法是什么？

Answer 1

要将痣放在污垢上方，您需要将它们包裹到具有 position:relative 的 div 中，然后将 position: absolute 添加到痣上。使用 top: 0 将其移动到污垢的顶部，left:0、right:0 和 margin:0 auto 将使其居中。

这也应该有效：

CSS

<style>

body{
  background-color:#FFC000;
}
h1{
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:60px;
}

.dirt-0,.dirt-1,.dirt-2, .dirt-3,.dirt-4,.dirt-5 {
  height:100px;
  width:160px;
}

.mole-0,.mole-1,.mole-2, .mole-3,.mole-4,.mole-5{
  z-index:3;
  width:100px;
  height:100px;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  margin: 0 auto;
}

.dirtContainer{
  width: fit-content;
  width: -moz-fit-content;
  height: fit-content;
  height: -moz-fit-content;
  position:relative;
}

#imagesDiv{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

</style>

HTML

<h1>Whack - A - Mole!</h1>
  <h1 id="points"></h1>
  <div id="game-container">
    <div id="imagesDiv"></div>
  </div>


<script>
  const gameCont = document.getElementById('game-container')
  const points = document.getElementById('points');
  let all = document.getElementsByTagName("img");
  let images = "";

  for (let i = 0; i < 6; i++){
    images += "<div class='dirtContainer'>";
    images += "<img src='./images/dirt.png' class='dirt-" + i + "'>";
    images += "<img src='./images/mole.png' class='mole-" + i + "'>";
    images += "</div>";
  }

  document.getElementById('imagesDiv').innerHTML = images;
</script>

Answer 2

要将一个图像放在另一个图像上，我们可以使用 <?php $d = new DateTime( '2021-02-01' ); echo $d->format( 'Y-m-t' ); ?>。用 div 包裹图像，而不是 2 个 for 循环，一个循环将满足要求。

position: absolute

CSS 部分：

for (let i = 0; i < 6; i++) {
    var div = document.createElement("div");
    div.classList.add('box');
    var img =  document.createElement('img');
    dirt.src = '/images/dirt.png'
    dirt.classList.add("dirt-" + [i])
    div.appendChild(dirt)
    var mole = document.createElement('img');
    mole.src = '/images/mole.png'
    mole.classList.add("mole-" + [i])
    div.appendChild(mole)
    gameCont.appendChild(div)
  }

使用 CSS 在各种图像之上的各种图像

2 个答案: