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的版本实现执行不同的代码
May 11 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
js实现一个简易计算器
Mar 30 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字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
学习jquery之一
2007/04/27 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
python字典的常用操作方法小结
2016/05/16 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
详解python3中的真值测试
2018/08/13 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
汽车驾驶求职信
2013/10/25 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
大足石刻导游词
2015/02/02 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
详解Python小数据池和代码块缓存机制
2021/04/07 Python
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS
MySQL数据库表约束讲解
2022/06/21 MySQL