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实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
vue如何批量引入组件、注册和使用详解
May 12 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
You might like
非常重要的php正则表达式详解
2016/01/04 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
javascript模拟枚举的简单实例
2014/03/06 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python连接DB2数据库
2016/08/27 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Python自定义线程池实现方法分析
2018/02/07 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Python requests模块session代码实例
2020/04/14 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
酒店应聘自荐信
2013/11/09 职场文书
工商学院毕业生自荐信
2013/11/12 职场文书
法律专业实习鉴定
2013/12/22 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
Java实现简单小画板
2022/06/10 Java/Android
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技