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

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

时间: 2021-09-09

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

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

非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

使用非html5实现js板连连看游戏示例代码

向大家分享一款如何实现js版连连看游戏,如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http

JS中跳出循环的示例代码

1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each使用return true 终止本次循环计入下一个循环,return false终止整个循环.  函数返回值跟此处无关 例: $.extend($.fn.datagrid.methods, { isChecked: function (dg, param) { var flag = false;//是否选中 var allRows = $(dg).datagri

使用Dropzone.js上传的示例代码

本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区 引入Dropzone.js和dropzone.css然后使用表单form定义一个class="dropzone"即可完成 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

动态加载、移除js/css文件的示例代码

本文简单介绍动态加载.移除.替换js/css文件 .有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率.下面贴出代码. <script language="JavaScript"> //动态加载一个js/css文件 function loadjscssfile(filename, filetype){ if (filetype=="js"){ varfileref=document.createE

php实现的网页版剪刀石头布游戏示例

本文实例讲述了php实现的网页版剪刀石头布游戏.分享给大家供大家参考,具体如下: <?php /* * Created on 2016-11-25 * */ if (isset($_POST['sub'])) { $what = $_POST['what']; //需要输入的数组 $my_array = array("剪刀","石头","布"); //获胜规则 $guize = array(array("剪刀",&quo

vue.js实现表格合并示例代码

前言 由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有数据驱动的框架都有效,比如说Angular和React. 最后的实现效果是这样的: 实现思路 原本的正常表格的代码长这样: <tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td

js滚动条平滑移动示例代码

本文实例为大家分享了js滚动条平滑移动相关代码,供大家参考,具体内容如下 html页 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Scripts/JavaScrip

在 Angular 中使用Chart.js 和 ng2-charts的示例代码

Chart.js是一个流行的JavaScript图表库,ng2图表是Angular 2+的包装器,可以轻松地将Chart.js集成到Angular中. 我们来看看基本用法. 安装 首先,在项目中安装 Chart.js 和 ng2-charts: # Yarn: $ yarn add ng2-charts chart.js # or npm $ npm install ng2-charts charts.js --save 当然 ,如果你是使用Angular CLI构建的项目,你也可以很容易的添加

利用原生JS实现data方法示例代码

前言 在开发中经常会在DOM上存储一些自定义数据,我们可以通过setAttribute方法来实现.但是当数据为引用类型时,存储后的数据却无效.这里将用原生的JS对data方法进行实现. 使用setAttribute: <div id="test-data"></div> <p class="test-data-list"></p> <p class="test-data-list">&l