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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
在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
You might like
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
Yii学习总结之安装配置
2015/02/22 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
laravel5.6实现数值转换
2019/10/23 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
layui实现三级联动效果
2019/07/26 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
女性时尚在线:IVRose
2019/02/23 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
婚礼秀策划方案
2014/05/19 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
学生退学证明
2015/06/23 职场文书
结婚典礼主持词
2015/06/29 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
python中 .npy文件的读写操作实例
2022/04/14 Python