js实现带积分弹球小游戏

更新时间：2020年07月21日 15:19:27 作者：你你你就你

这篇文章主要为大家详细介绍了js实现带积分弹球小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现带积分的弹球小游戏的具体代码，供大家参考，具体内容如下

注：如果小球与底部方块的角碰撞，积分可能有些许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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
弹球

微信小程序下拉菜单效果的实例代码
这篇文章主要介绍了微信小程序下拉菜单效果的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
JavaScript实现多个物体同时运动
这篇文章主要为大家详细介绍了JavaScript实现多个物体同时运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
JavaScript中Promise的使用方法实例
现在不会用Promise都不好意思说自己是前端,下面这篇文章主要给大家介绍了关于JavaScript中Promise使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
JavaScript this调用规则说明
我希望通过这些来使你们理解各种函数调用方式的不同，让你的JavaScript代码远离bugs。
2010-03-03
UniApp中Scroll-View设置占满下方剩余高度的方法记录
在使用uniapp开发项目过程中有时候会想让一些组件占有屏幕剩余的高度,下面这篇文章主要给大家介绍了关于UniApp中Scroll-View设置占满下方剩余高度的方法,需要的朋友可以参考下
2023-04-04
js跨域资源共享基础篇
这篇文章主要为大家详细介绍了javascript跨域资源共享的相关资料，感兴趣的朋友可以参考一下
2016-07-07
引用外部js乱码问题分析及解决方案
web开发中不可避免会使用js，为了给页面良好的瘦身我们一般都会将js代码放在外部，然后通过src引用，如果web页面与js采用的编码不同一就会产生乱码，接下来与大家分享下解决方法，感兴趣的朋友可以参考下哈
2013-04-04
JavaScript中关于Object.create()的用法
这篇文章主要介绍了JavaScript中关于Object.create()的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
限制只能输入数字的实现代码
下面小编就为大家带来一篇限制只能输入数字的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
2016-05-05
javaScript之split与join的区别(详解)
下面小编就为大家带来一篇javaScript之split与join的区别(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11