效果如图

代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.wrapper{width: 600px;height: 600px;border: 5px solid black;margin: 0 auto;position: relative;}.wrapper .boll{width: 80px;height: 80px;border-radius: 50%;background-color: red;position: absolute;bottom: 0;left: 0;}.box{text-align: center;}.box button{width: 200px;height: 50px;color:white;font-size: 30px;border: none;background-color: green;}</style></head><body><div class="box"><div class="wrapper"><div class="boll"></div></div><button>开始</button></div><script>//获取容器var _wrapper=document.querySelector(".wrapper");//开始按钮var _button=document.querySelector("button");//小球var _boll=document.querySelector(".boll");_button.onclick=function(){var speedX=1.5;  //x速度var speedY=3;  //y速度var id=setInterval(function(){//获取现有的left和top值//如果到最右边，需要反方向if(_wrapper.clientWidth-_boll.offsetLeft<=_boll.offsetWidth){speedX*=-1;}_boll.style.left=(_boll.offsetLeft+speedX)+"px"//如果到最上边，需要反方向if(_boll.offsetTop<=0){speedY*=-1;}_boll.style.top=(_boll.offsetTop-speedY)+"px"//到最下边，需要反向if(_wrapper.clientHeight-_boll.offsetTop<=_boll.offsetHeight){speedY*=-1;}//到最左边，需要反向if(_boll.offsetLeft<=0){speedX*=-1;}},10)}</script></body>
</html>

js JavaScript实战练习——小球碰撞反弹(详细)相关推荐

Java反弹球两球相撞_java实现小球碰撞反弹
java实现小球碰撞反弹 java实现小球碰撞反弹首先我们要在一个窗口里面显示这个功能,因此引入JFrame类然后创建一个窗口代码如下: JFrame win=new JFrame();//新建窗口 ...
Canvas+Js制作动量守恒的小球碰撞
目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...
javascript 小球碰撞反弹
最近在学习JS,写一个小球弹来弹去的游戏一.HTML部分 <!DOCTYPE html> <html> <head> <meta c ...
js实现多个小球碰撞
实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...
html5使用canvas实现小球碰撞反弹实例
使用 html5 中的 canvas, 实现小球相互碰撞并反弹,反弹算法比较简单. index.html <!DOCTYPE html> <html lang="en&qu ...
java小球反弹_java实现小球碰撞反弹
要实现这个功能做基础的就是要有一个小球,就像人吃饭这句话,少了人这个主角,说什么都是白说.世间所有事物都是对象,具有属性和操作,没有对象就没有一切.就下来我们就来生成一个小球,这里用到Panel类,创 ...
JS实现小球碰撞边界反弹-点击消失（详细解析实现思路）
本篇文章给大家带来的是原生JS实现小球碰到边界就反弹,点击小球时小球被会销毁,并重新创建一个小球,让小球的数量一直保持在初始的数量,按照思路按步骤进行讲解,只需要源码的小伙伴可以定位到文本末尾直接复制 ...
js 小球碰壁反弹and小球碰撞
好像好几天没有更博了呢,最近有点变懒了,这样不好,不好~~我们要做热爱学习的好孩子,嘻嘻,今天下午补上... 我们在学习js的时候,一个很经典的案例就是小球的碰壁反弹效果啦~简单的小球碰壁效果可以慢慢 ...
js实现简单的小球与边框碰撞反弹改变运动方向及颜色，并且继续运动的特效
js实现简单的小球与边框碰撞反弹改变运动方向及颜色,并且继续运动的特效 (代码可以直接复制使用,只需要把body中的div的id换成对应的就行,css中可以设置小球的大小和初始位置,修改小球大小之后需 ...
js小球与边框碰撞反弹_四叉树在碰撞检测中的应用
缘起 <你被追尾了>中预告了加速碰撞检测的算法--四叉树(for 2D),所以本文就来学习一下. 分析首先是为什么要使用四叉树进行优化,其实<你被追尾了>中已经说了,这里简单 ...

js JavaScript实战练习——小球碰撞反弹(详细)

效果如图

js JavaScript实战练习——小球碰撞反弹(详细)相关推荐

最新文章

热门文章