新手练习-关于JS推箱子

最新推荐文章于 2024-05-21 14:15:14 发布

kmgmq

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量68

点赞数 2

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/kmgmq/article/details/137876388

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  li {
    list-style: none
  }

  /* / */
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* 设置最小高度为视口高度 */
    /* background-color: greenyellow; */
  }

  .big {
    flex-wrap: wrap;
    display: flex;
    width: 500px;
    height: 500px;
    background-color: pink;
    position: relative;
  }

  .small {
    width: 20%;
    height: 20%;
    background-color: aqua;
  }

  .player {
    position: absolute;
    top: 0;
    left: 0;
  }

  .black {
    background-color: black;
  }
</style>

<body>
  <!-- 游戏主页面 -->
  <div class="big">
    <!-- 玩家 -->
    <div class="player">
      <img src="./img/小人图(1).png" alt="">
    </div>

  </div>

</body>
<script>
  //渲染25个格子
  const bigbox = document.querySelector('.big')
  for (let i = 1; i < 26; i++) {
    const smallbox = document.createElement('div')
    smallbox.className = `small data-${i}`
    bigbox.appendChild(smallbox)
  }
  //随机生成一个黑格子
  const randomInt = Math.floor(Math.random() * 25) + 1;
  const black = document.querySelector(`.data-${randomInt}`)
  black.classList.add('black')
  //小人移动
  const player = document.querySelector('.player')
  let offsetX = 0;
  let offsetY = 0;
  function move(e) {
    const step = 5; // 移动步长
    switch (e.key) {
      case 'w':
        if (offsetY != 0) {
          offsetY -= step;
        }
        boxmove()
        break;
      case 's':
        if (offsetY != 450) {
          offsetY += step;
        }
        boxmove()
        break;
      case 'a':
        if (offsetX != 0) {
          offsetX -= step;
        }
        boxmove()
        break;
      case 'd':
        if (offsetX != 450) {
          offsetX += step;
        }
        boxmove()
        break;
    }
    player.style.top = offsetY + 'px';
    player.style.left = offsetX + 'px';
  }
  //事件执行
  document.addEventListener("keydown", move)
  //盒子移动判定
  let new_randomInt = randomInt
  function boxmove() {
    const blackbox = document.querySelector(".black");
    //黑方块左边
    if (offsetX + 50 === blackbox.offsetLeft && new_randomInt % 5 !== 0 && offsetY >= blackbox.offsetTop && offsetY + 50 <= blackbox.offsetTop + 100) {
      blackbox.classList.remove('black');
      new_randomInt += 1;
      const newBlack = document.querySelector(`.data-${new_randomInt}`);
      newBlack.classList.add('black');
      console.log("1111");
    }

    //黑方块右边
    if (offsetX === blackbox.offsetLeft + 100 && new_randomInt % 5 !== 1 && offsetY >= blackbox.offsetTop && offsetY + 50 <= blackbox.offsetTop + 100) {
      blackbox.classList.remove('black');
      new_randomInt -= 1;
      const newBlack = document.querySelector(`.data-${new_randomInt}`);
      newBlack.classList.add('black');
      console.log("2222");
    }

    //黑方块上边
    if (offsetY + 50 === blackbox.offsetTop && new_randomInt <= 20 && offsetX >= blackbox.offsetLeft && offsetX + 50 <= blackbox.offsetLeft + 100) {
      blackbox.classList.remove('black');
      new_randomInt += 5;
      const newBlack = document.querySelector(`.data-${new_randomInt}`);
      newBlack.classList.add('black');
      console.log("3333");
    }

    //黑方块下边
    if (offsetY === blackbox.offsetTop + 100 && new_randomInt >= 6 && offsetX >= blackbox.offsetLeft && offsetX + 50 <= blackbox.offsetLeft + 100) {
      blackbox.classList.remove('black');
      new_randomInt -= 5;
      const newBlack = document.querySelector(`.data-${new_randomInt}`);
      newBlack.classList.add('black');
      console.log("4444");
    }

  }

</script>

</html>