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实现滚动图片新闻的实例代码
Nov 27 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
JS实现复制功能
Mar 01 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
JS实现星星海特效
Dec 24 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
使用javascript解析二维码的三种方式
Nov 11 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入门基础之php代码写法
2011/12/30 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Python中format()格式输出全解
2019/04/12 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python+logging+yaml实现日志分割
2019/07/22 Python
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
法学院方阵解说词
2014/01/29 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
教师个人自我评价范文
2014/04/13 职场文书
2014年导购员工作总结
2014/11/18 职场文书
可可西里观后感
2015/06/08 职场文书
单位车辆管理制度
2015/08/05 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL