原生js实现弹跳小球
突发奇想，写了个小球来回弹跳的案例，供大家参考，具体内容如下
主要就是利用了margin-left / top 值进行位移，当然，也可以使用定位去做。
本案例所用到的有：
- DOM元素获取
- DOM样式操作
- .offsetWidth 获取元素宽度
- .offsetHeight 获取元素高度
- setInterval() 定时器
上代码
整体使用原生js
<style> //style样式
* {
margin: 0;
padding: 0;
}
#box {
width: 500px;
height: 600px;
background-color: #eee;
box-shadow: 0 0 10px 0 #000;
margin: auto;
overflow: hidden;
position: relative;
margin-top: 50px;
}
#box div {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
position: absolute;
}
</style>
<body>
<div id="box">
<div id="cir"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script>
var box = document.getElementById("box");
var cir = document.getElementById("cir")
var cirs = box.querySelectorAll("div");
collMove(box, cir, 6);
collMove(box, cirs[1], 7);
collMove(box, cirs[2], 8);
collMove(box, cirs[3], 9);
collMove(box, cirs[4], 10);
collMove(box, cirs[5], 10);
collMove(box, cirs[6], 11);
/**
* 元素遇边界弹开
* 弹开的同时改变元素颜色
* @param {容器获取} box
* @param {容器内弹跳元素获取} cir
* @param {弹跳速度} speed
*/
function collMove(box, cir, speed) {//方法封装
var oDiv = box; //获取容器
var oCir = cir; //获取容器内元素
var xMax = oDiv.offsetWidth - oCir.offsetWidth; //容器最大X轴边界
var yMax = oDiv.offsetHeight - oCir.offsetHeight; //容器最大Y轴边界
var motionX = 0; //元素X轴坐标初始化
var motionY = 0; //元素y轴坐标初始化
(() => {
var speedX = speed; //x轴偏移量
var speedY = speed; //y轴偏移量
setInterval(() => {
motionX += speedX; //进行X轴偏移
motionY += speedY; //进行y轴偏移
if (motionX >= xMax) { //检测是否碰到X轴右边界
motionX = xMax; //碰到边界将X轴坐标设为x轴最大右边界
speedX = -speedX; //x轴偏移量反转
randColor(oCir); //改变颜色
} else if (motionX <= 0) { //检测是否碰到X左边界
motionX = 0; //碰到边界将X轴坐标设为 0 即左边界初始位置
speedX = -speedX; //再次反转X轴偏移量
randColor(oCir); //下方上下边界检测同理
}
if (motionY >= yMax) {
motionY = yMax;
speedY = -speedY
randColor(oCir);
} else if (motionY <= 0) {
motionY = 0;
speedY = -speedY;
randColor(oCir);
}
oCir.style.marginLeft = motionX + "px"; //设置元素X轴坐标
oCir.style.marginTop = motionY + "px"; //设置元素Y轴坐标
}, 10);
})();
function randColor(obj) { //封装一个随机色彩，改变颜色直接调用
var op = Math.random() * 7 + 3;
function color() {
return Math.floor(Math.random() * 256);
}
return obj.style.backgroundColor = `rgba(${color()},${color()},${color()},${op})`;
}
}
</script>
整个方法中，最主要的就是理解元素位置与容器边界的检测与判断，这一部分搞懂，剩下的就很简单了。
有个小提示：容器不要设置成标准的正方形，不然会因为角度的原因，小球只能从左上角到右下角来回弹动。
整个方法都已封装，需要用时，只需要复制整个方法或者外链进去 然后直接使用方法名依照对应参数调用即可。一个元素一次调用. 闲麻烦可直接写一个for循环去循环调用。
抛个砖：
for(var i = 1 ; i<=10;i++){
collMove(box,cirs[i],i);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javaScript实现网页版的弹球游戏
利用javeScript对象以及方法实现的网页弹球游戏,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <tilie>呼呼哈嘿的网页弹球</title> </head> <body> <canvas id="canvas"width="400"height="400"></canvas> <scr
-
原生JS实现多个小球碰撞反弹效果示例
本文实例讲述了原生JS实现多个小球碰撞反弹效果.分享给大家供大家参考,具体如下: 实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y值增加,以上的思路可以实现小球的碰壁反弹 小球与小球之间的碰撞,要判断小球在被撞小球的哪个方向,从而判断小球该向哪个方向移动,同样的改变小球的坐标值,来实现小球的反弹 实现代码: <!doctype html> &l
-
js实现带积分弹球小游戏
本文实例为大家分享了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-co
-
JS实现小球的弹性碰撞效果
一.HTML代码(body部分) <body> <!--只需要做一个大div包裹几个小div即可,你想要几个小球碰撞就在内部做几个div即可,这里我们做了6个小球--> <div id="main"> <div></div> <div></div> <div></div> <div></div> <div></div> <di
-
JS实现简单打砖块弹球小游戏
本文实例为大家分享了JS实现打砖块弹球小游戏的具体代码,供大家参考,具体内容如下 使用原生JS写的,还有一点瑕疵.代码直接复制到html就能使用 速度随机的 因为设涉及横向和纵向速度,所以显示的小球速度值是他们的和速度(立方和开根号). 按回车或者在滑块上单机左键开始游戏.鼠标滑动或者键盘A(左)或者D(右)控制滑块方向接小球. 这个小demo的意义主要为了锻炼逻辑能力: <!DOCTYPE html> <html> <head> <meta charset=&q
-
非html5实现js版弹球游戏示例代码
开始前的html页面 开始后的html游戏界面 html页面布局,即index.html文件源码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" co
-
原生js实现弹跳小球
突发奇想,写了个小球来回弹跳的案例,供大家参考,具体内容如下 主要就是利用了margin-left / top 值进行位移,当然,也可以使用定位去做. 本案例所用到的有: DOM元素获取 DOM样式操作 .offsetWidth 获取元素宽度 .offsetHeight 获取元素高度 setInterval() 定时器 上代码 整体使用原生js <style> //style样式 * { margin: 0; padding: 0; } #box { width: 500px; height:
-
原生js实现移动小球（碰撞检测）
本文实例为大家分享了js实现移动小球的具体代码,供大家参考,具体内容如下 </head> <style> *{margin: 0; padding:0;} #main{margin: 0px auto;position: relative;} #main div{overflow: hidden;position: absolute;width: 50px;height: 50px;opacity: 0.5; -moz-border-radius: 50%;-webkit-bord
-
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity.transition.box-shadow这三个属性. 1.opacity CSS3 opacity 属性 实例 设置一个div元素的透明度级别: div { opacity:0.5; } 在此页底部有更多的例子. 浏览器支持 Internet ExplorerFirefoxOpera
-
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
本文实例讲述了原生JS实现的多个彩色小球跟随鼠标移动动画效果.分享给大家供大家参考,具体如下: 实现方法: 每个小球移动都有自己的坐标,小球移动的同时,需要进行坐标传递,将第一个坐标依次传递给最后一个坐标,来实现小球跟着移动的效果 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小球运动</title> <style type
-
原生js实现弹动小球效果
本文实例为大家分享了JavaScript实现弹动小球效果展示的具体代码,供大家参考,具体内容如下 源码展示 <!doctype html> <html> <head> <meta charset="utf-8"> <title>弹弹球(原生js)</title> <style> * { margin:0; padding:0; font-family:Microsoft Ya
-
原生JS控制多个滚动条同步跟随滚动效果
在一些支持用 markdown 写文章的网站,后台写作页面,一般都是支持 markdown 即时预览的,也就是将整个页面分成两部分,左半部分是你输入的 markdown 文字,右半部分则即时输出对应的预览页面,例如下面就是 CSDN 后台写作页面的 markdown 即时预览效果: 本文不是阐述如何从 0 实现这种效果的(后续 很可能 会单出文章,),抛开其他,单看页面主体中左右两个容器元素,即 markdown 输入框元素和预览显示框元素 本文要探讨的是,当这两个容器元素的内容都超出了容器高度
-
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
本文实例讲述了原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=gbk> <title>www.jb51.net 粒子效果演示</title> <meta name="description" content="HTML5/canva
-
原生JS面向对象实现打字小游戏
本文实例为大家分享了JS面向对象实现打字小游戏的具体代码,供大家参考,具体内容如下 Demo介绍 通过键盘点击下落小球所显示的数字,小球刷新再任意位置重新掉落.并且,每五个球后掉落速度加快 小球刷新位置 大小,颜色随机.用面向对象class方法实现 该demo源码可直接使用.赋值到html文件 然后打开就可以使用,可用作学校课设使用 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset
-
原生js封装添加class,删除class的实例
一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ")); for(var i=0;i<arr.length;i++){ for(var k=arr.length-1;k>i;k--){ (arr[k]==="")&&arr.splice(k,1); (arr[i]===arr[k])&&