js弹球小游戏（带积分）

最新推荐文章于 2025-02-05 11:33:11 发布

原创最新推荐文章于 2025-02-05 11:33:11 发布 · 424 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一个基于HTML5的简单游戏开发案例，重点讲解了使用JavaScript实现小球与底部方块的碰撞检测算法，以及碰撞后的积分累加机制。文章通过具体的代码示例，展示了如何在网页上创建动态元素，并利用定时器控制小球的移动，同时加入了键盘事件监听来控制底部方块的左右移动，增加了游戏的互动性和趣味性。

注：如果小球与底部方块的角碰撞，积分可能有些许bug

<style>
    #box {
      width: 400px;
      height: 400px;
      border: 1px solid #000000;
      margin: 50px auto;
      position: relative;
    }

    #ball {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;
    }

    #block {
      width: 100px;
      height: 20px;
      position: absolute;
      left: 150px;
      bottom: 0;
      background-color: black;
    }

    #count {
      color: #ff0000;
      font-size: 18px;
      position: absolute;
      width: 20px;
      height: 20px;
      left: -20px;
      top: 0;
    }
  </style>

<body>
  <div id="box">
    <div id="count">0</div>
    <div id="ball"></div>
    <div id="block"></div>
  </div>
</body>
<script>
  var oBox = document.querySelector('#box');
  var oBall = document.querySelector('#ball');
  var oBlock = document.querySelector('#block');
  var oCount = document.querySelector('#count');

  var speedBlock = 5;
  var speedX = 5;
  var speedY = 4;

  var maxLeft = oBox.clientWidth - oBall.offsetWidth;
  var maxTop = oBox.clientHeight - oBall.offsetHeight;
  var max = oBox.clientWidth - oBlock.offsetWidth;

  setInterval(function () {
    var left = oBall.offsetLeft;
    var top = oBall.offsetTop;

    left += speedX;
    top += speedY;

    if (left < 0 || left > maxLeft) {
      speedX = -speedX;
    }

    if (top < 0) {
      speedY *= -1;
    }

    var r = oBall.offsetWidth / 2;

    if (left >= oBlock.offsetLeft - r &&  // 左边线碰撞条件
      left <= oBlock.offsetLeft - r + oBlock.offsetWidth &&  // 右边线碰撞条件
      top >= maxTop - oBlock.offsetHeight     // 下边线碰撞条件
    ) {
      // console.log('撞上了');
      speedY = -Math.abs(speedY);
      // speedY *= -1;
      oCount.innerHTML = oCount.innerHTML * 1 + 1;
    }

    if (top > maxTop) {
      left = 0;
      top = 0;
    }

    oBall.style.left = left + 'px';
    oBall.style.top = top + 'px';

  }, 50);

  document.onkeydown = function (e) {
    var ev = event || e;
    var keyCode = ev.keyCode || ev.which;

    var left = oBlock.offsetLeft;

    if (keyCode === 37) {
      left -= speedBlock;
    }
    if (keyCode === 39) {
      left += speedBlock;
    }

    if (left <= 0) {
      left = 0
    }

    if (left >= max) {
      left = max;
    }

    oBlock.style.left = left + 'px';
  }
</script>