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 相关文章推荐
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
angular十大常见问题
Mar 07 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 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
phpmyadmin操作流程
2006/10/09 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
python读取有密码的zip压缩文件实例
2019/02/08 Python
Python GUI编程完整示例
2019/04/04 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
jupyter notebook实现显示行号
2020/04/13 Python
Python发送邮件实现基础解析
2020/08/14 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
翻译学院毕业生自荐书
2014/02/02 职场文书
校园文化建设方案
2014/02/03 职场文书
个人实习生的自我评价
2014/02/16 职场文书
大学开学计划书
2014/04/30 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
教师业务学习材料
2014/12/16 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
小学运动会前导词
2015/07/20 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python