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基础的动画教程,直观易懂
Jan 10 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
javascript表单验证大全
Aug 12 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
小程序绑定用户方案优化小结
May 15 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维护文件系统
2006/10/09 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
Prototype Date对象 学习
2009/07/12 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Python发送邮件实现基础解析
2020/08/14 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
消防器材管理制度
2014/01/28 职场文书
安全技术说明书
2014/05/09 职场文书
北京奥运会口号
2014/06/21 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
素质教育学习心得体会
2016/01/19 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python