原生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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 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

  • javaScript实现网页版的弹球游戏

    利用javeScript对象以及方法实现的网页弹球游戏,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <tilie>呼呼哈嘿的网页弹球</title> </head> <body> <canvas id="canvas"width="400"height="400"></canvas> <scr

  • JS实现简单打砖块弹球小游戏

    本文实例为大家分享了JS实现打砖块弹球小游戏的具体代码,供大家参考,具体内容如下 使用原生JS写的,还有一点瑕疵.代码直接复制到html就能使用 速度随机的 因为设涉及横向和纵向速度,所以显示的小球速度值是他们的和速度(立方和开根号). 按回车或者在滑块上单机左键开始游戏.鼠标滑动或者键盘A(左)或者D(右)控制滑块方向接小球. 这个小demo的意义主要为了锻炼逻辑能力: <!DOCTYPE html> <html> <head> <meta charset=&q

  • 原生JS实现多个小球碰撞反弹效果示例

    本文实例讲述了原生JS实现多个小球碰撞反弹效果.分享给大家供大家参考,具体如下: 实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y值增加,以上的思路可以实现小球的碰壁反弹 小球与小球之间的碰撞,要判断小球在被撞小球的哪个方向,从而判断小球该向哪个方向移动,同样的改变小球的坐标值,来实现小球的反弹 实现代码: <!doctype html> &l

  • JS实现小球的弹性碰撞效果

    一.HTML代码(body部分) <body> <!--只需要做一个大div包裹几个小div即可,你想要几个小球碰撞就在内部做几个div即可,这里我们做了6个小球--> <div id="main"> <div></div> <div></div> <div></div> <div></div> <div></div> <di

  • 非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])&&

随机推荐