编程 Javascript

js实现带积分弹球小游戏

Posted in Javascript onJuly 21, 2020

本文实例为大家分享了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实现带积分弹球小游戏

- Author -

你你你就你

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery Mobile页面跳转后未加载外部JS原因分析及解决

Mar 18 Javascript

extjs ColumnChart设置不同的颜色实现代码

May 17 Javascript

JQuery插件fancybox无法在弹出层使用左右键的解决办法

Dec 25 Javascript

js数组循环遍历数组内所有元素的方法

Jan 18 Javascript

js用拖动滑块来控制图片大小的方法

Feb 27 Javascript

jQuery简单绑定单个事件的方法示例

Jun 10 jQuery

Node.js学习之地址解析模块URL的使用详解

Sep 28 Javascript

ng-repeat指令在迭代对象时的去重方法

Oct 02 Javascript

vue实现文字横向无缝走马灯组件效果的实例代码

Apr 09 Javascript

详解vue 路由跳转四种方式 (带参数)

Apr 28 Javascript

JavaScript中BOM对象原理与用法分析

Jul 09 Javascript

Vue项目如何引入bootstrap、elementUI、echarts

Nov 26 Vue.js

在vue中created、mounted等方法使用小结

Jul 21 #Javascript

解决vue的touchStart事件及click事件冲突问题

Jul 21 #Javascript

解决Vue 移动端点击出现300毫秒延迟的问题

Jul 21 #Javascript

解决Vue中的生命周期beforeDestory不触发的问题

Jul 21 #Javascript

详解微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）

Jul 21 #Javascript

vue 清空input标签中file的值操作

Jul 21 #Javascript

Vue-resource安装过程及使用方法解析

Jul 21 #Javascript