如何在CSS中设置.block图片随机X轴位置并实现下落自动重置

需求实现说明 #

为类名为.block的图片设置随机水平初始位置，并在其下落至容器底部后自动重置位置并重新开始下落。

修改后的完整代码 #

JavaScript 代码 #

var player = document.getElementById("player");
var block = document.getElementById("block");
var gameContainer = document.getElementById("game");
// 游戏容器宽度减去方块宽度，得到最大可移动范围
var maxLeft = gameContainer.offsetWidth - block.offsetWidth;

function goleft() {
  player.classList.add("animatel");
  setTimeout(function() {
    player.classList.remove("animatel");
  }, 1000); // 修正定时器时长，匹配动画时长
  console.log("left");
}

function goright() {
  player.classList.add("animater");
  setTimeout(function() {
    player.classList.remove("animater");
  }, 1000); // 修正定时器时长，匹配动画时长
  console.log("right");
}

// 重置方块位置并重新开始下落
function resetBlock() {
  // 设置随机水平位置
  var randomLeft = Math.floor(Math.random() * maxLeft);
  block.style.left = randomLeft + "px";
  // 重置top位置并重新触发动画
  block.style.top = "-50px";
  // 先移除动画类再添加，强制重新播放动画
  block.classList.remove("block-fall");
  void block.offsetWidth; // 触发重绘
  block.classList.add("block-fall");
}

// 页面加载完成后初始化方块位置
window.addEventListener("load", function() {
  resetBlock();
  // 监听动画结束事件，完成后重置方块
  block.addEventListener("animationend", resetBlock);
});

CSS 代码 #

body {
  background-color: lightblue;
}

.player {
  height: 50px;
  width: 50px;
  position: relative;
  top: 450px;
}

.block {
  height: 30px;
  width: 30px;
  position: absolute; /* 改为absolute，基于游戏容器定位 */
  top: -50px;
}

/* 分离下落动画类 */
.block-fall {
  animation: block 1s linear;
}

#game {
  width: 500px;
  height: 500px;
  border: 2px solid black;
  position: relative; /* 设置为相对定位，让子元素absolute基于它定位 */
}

@keyframes block {
  0% {
    top: -50px; /* 添加单位px */
  }
  100% {
    top: 470px; /* 调整为容器底部附近，避免方块超出 */
  }
}

@keyframes gor {
  0% {
    left: 0px;
  }
  50% {
    left: 450px;
  }
  100% {
    left: 0px;
  }
}

@keyframes gol {
  0% {
    right: 450px;
  }
  50% {
    right: 0px;
  }
  100% {
    right: 450px;
  }
}

.animater {
  animation: gor 1s;
  position: relative;
}

.animatel {
  animation: gol 1s;
  position: relative;
}

HTML 代码 #

<body>
  <div id="game">
    <div id="player"><img class="player" src="https://via.placeholder.com/50" alt="player box"></div>
    <div id="block" class="block"><img src="https://via.placeholder.com/80" alt="bogdan"></div>
    <button onclick="goleft()">left</button>
    <button onclick="goright()">right</button>
    <script type="text/javascript" src="script.js"></script>
  </div>
</body>

关键改动点 #

• 定位修正：将.block的定位改为absolute，并把#game设置为relative，确保方块基于游戏容器定位，避免位置混乱。
• 随机位置实现：通过Math.random()计算随机水平位置，范围限制在游戏容器宽度减去方块宽度内，防止方块超出容器。
• 动画重置逻辑：监听animationend事件，方块下落结束后调用resetBlock()函数，重置位置并重新触发动画；通过移除再添加动画类的方式强制重新播放动画。
• 细节修正：为CSS动画中的top值添加单位px，修正原代码中的语法错误；调整玩家动画的定时器时长，匹配动画实际时长。

内容的提问来源于stack exchange，提问作者maslori production