欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)帶積分彈球小游戲

 更新時(shí)間：2020年07月21日 15:19:27   作者：你你你就你  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶積分彈球小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)帶積分的彈球小游戲的具體代碼，供大家參考，具體內(nèi)容如下

注：如果小球與底部方塊的角碰撞，積分可能有些許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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論