HTML 见缝插针小游戏代码示例 - 在线玩针线游戏 - 常规

以下是一个简单的见缝插针小游戏的 HTML 代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>见缝插针小游戏</title>
  <style>
    #board {
      width: 400px;
      height: 400px;
      border: 2px solid black;
      position: relative;
      margin: 20px auto;
    }
    #needle {
      width: 2px;
      height: 100%;
      background-color: red;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      transition: all 0.3s ease;
    }
    #target {
      width: 50px;
      height: 50px;
      background-color: green;
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translate(-50%, 100%);
      transition: all 0.3s ease;
    }
  </style>
</head>
<body>
  <div id="board">
    <div id="needle"></div>
    <div id="target"></div>
  </div>

  <script>
    var board = document.getElementById("board");
    var needle = document.getElementById("needle");
    var target = document.getElementById("target");
    var score = 0;

    board.addEventListener("click", function(e) {
      var boardRect = board.getBoundingClientRect();
      var clickX = e.clientX - boardRect.left;
      var targetX = target.offsetLeft + target.offsetWidth / 2;

      if (clickX > targetX - 20 && clickX < targetX + 20) {
        score++;
        target.style.bottom = score * 10 + "%";
        target.style.left = Math.random() * 80 + "%";
      }
    });
  </script>
</body>
</html>

这个小游戏的基本思路是，玩家需要在针头位于目标的左右 20 像素范围内点击屏幕，以获得分数。每次点击成功后，目标会向上移动，并在水平方向上随机改变位置。