Revisions to Stack Snippets Sandbox (This sandbox is deprecated. Please use the general Formatting Sandbox.) [duplicate]

Fixed some issues that prevented the box from jumping forever.

Source Link

edited Sep 17, 2014 at 9:21

332
1
10

var GRAVITY = 0.08;
var SPEED = 1; //1 is fastest
var dx = [];
var dy = [];
var maxX = window.innerWidth;
var maxY = window.innerHeight;
var all = [];// = document.getElementsByTagName("*:visible");
var positions = [];
var widths = [];
var heights = [];

function drop() {

    $("*").each(function(index) {
        all.push(this);
        positions.push($(this).offset());
        widths.push($(this).width());
        heights.push($(this).height());
    });
  
    for(var i=0; i < all.length; i++) {
        all[i].style.position = "fixed";
        all[i].style.top = positions[i].top+"px";
        all[i].style.left = positions[i].left+"px";
        dx[i] = Math.random() * 4 - 2;
        dy[i] = Math.random() * 1;
    } 
  
    setInterval(mainLoop, SPEED);
}

function mainLoop() {
    for(var i=0; i < all.length; i++) {
        dy[i] += GRAVITY;GRAVITY/2;
        positions[i].top += dy[i];
        positions[i].left += dx[i];
        dy[i] += GRAVITY/2;
        if(positions[i].left < 0) dx[i] *= -1;
        if((positions[i].left + all[i].offsetWidth) > maxX) dx[i] *= -1;
        if(positions[i].top > (maxY - all[i].offsetHeight)) dy[i] *== -1;Math.abs(dy[i]);
        
        all[i].style.left = positions[i].left+"px";
        all[i].style.top = positions[i].top+"px";
    }
}

drop();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
  <body>
<div style="border-style: solid; border-width: 5px; border-color:red;">Test</div>
  </body>
</html>

var GRAVITY = 0.08;
var SPEED = 1; //1 is fastest
var dx = [];
var dy = [];
var maxX = window.innerWidth;
var maxY = window.innerHeight;
var all = [];// = document.getElementsByTagName("*:visible");
var positions = [];
var widths = [];
var heights = [];

function drop() {

    $("*").each(function(index) {
        all.push(this);
        positions.push($(this).offset());
        widths.push($(this).width());
        heights.push($(this).height());
    });
  
    for(var i=0; i < all.length; i++) {
        all[i].style.position = "fixed";
        all[i].style.top = positions[i].top+"px";
        all[i].style.left = positions[i].left+"px";
        dx[i] = Math.random() * 4 - 2;
        dy[i] = Math.random() * 1;
    } 
  
    setInterval(mainLoop, SPEED);
}

function mainLoop() {
    for(var i=0; i < all.length; i++) {
        dy[i] += GRAVITY;
        positions[i].top += dy[i];
        positions[i].left += dx[i];
        if(positions[i].left < 0) dx[i] *= -1;
        if((positions[i].left + all[i].offsetWidth) > maxX) dx[i] *= -1;
        if(positions[i].top > (maxY - all[i].offsetHeight)) dy[i] *= -1;
        
        all[i].style.left = positions[i].left+"px";
        all[i].style.top = positions[i].top+"px";
    }
}

drop();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
  <body>
<div style="border-style: solid; border-width: 5px; border-color:red;">Test</div>
  </body>
</html>

var GRAVITY = 0.08;
var SPEED = 1; //1 is fastest
var dx = [];
var dy = [];
var maxX = window.innerWidth;
var maxY = window.innerHeight;
var all = [];// = document.getElementsByTagName("*:visible");
var positions = [];
var widths = [];
var heights = [];

function drop() {

    $("*").each(function(index) {
        all.push(this);
        positions.push($(this).offset());
        widths.push($(this).width());
        heights.push($(this).height());
    });
  
    for(var i=0; i < all.length; i++) {
        all[i].style.position = "fixed";
        all[i].style.top = positions[i].top+"px";
        all[i].style.left = positions[i].left+"px";
        dx[i] = Math.random() * 4 - 2;
        dy[i] = Math.random() * 1;
    } 
  
    setInterval(mainLoop, SPEED);
}

function mainLoop() {
    for(var i=0; i < all.length; i++) {
        dy[i] += GRAVITY/2;
        positions[i].top += dy[i];
        positions[i].left += dx[i];
        dy[i] += GRAVITY/2;
        if(positions[i].left < 0) dx[i] *= -1;
        if((positions[i].left + all[i].offsetWidth) > maxX) dx[i] *= -1;
        if(positions[i].top > (maxY - all[i].offsetHeight)) dy[i] = -Math.abs(dy[i]);
        
        all[i].style.left = positions[i].left+"px";
        all[i].style.top = positions[i].top+"px";
    }
}

drop();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
  <body>
<div style="border-style: solid; border-width: 5px; border-color:red;">Test</div>
  </body>
</html>

[Edit removed during grace period]

Source Link

edited Sep 16, 2014 at 20:36

mclaassen

135
7

Source Link

created Sep 16, 2014 at 20:30

mclaassen

135
7

var GRAVITY = 0.08;
var SPEED = 1; //1 is fastest
var dx = [];
var dy = [];
var maxX = window.innerWidth;
var maxY = window.innerHeight;
var all = [];// = document.getElementsByTagName("*:visible");
var positions = [];
var widths = [];
var heights = [];

function drop() {

    $("*").each(function(index) {
        all.push(this);
        positions.push($(this).offset());
        widths.push($(this).width());
        heights.push($(this).height());
    });
  
    for(var i=0; i < all.length; i++) {
        all[i].style.position = "fixed";
        all[i].style.top = positions[i].top+"px";
        all[i].style.left = positions[i].left+"px";
        dx[i] = Math.random() * 4 - 2;
        dy[i] = Math.random() * 1;
    } 
  
    setInterval(mainLoop, SPEED);
}

function mainLoop() {
    for(var i=0; i < all.length; i++) {
        dy[i] += GRAVITY;
        positions[i].top += dy[i];
        positions[i].left += dx[i];
        if(positions[i].left < 0) dx[i] *= -1;
        if((positions[i].left + all[i].offsetWidth) > maxX) dx[i] *= -1;
        if(positions[i].top > (maxY - all[i].offsetHeight)) dy[i] *= -1;
        
        all[i].style.left = positions[i].left+"px";
        all[i].style.top = positions[i].top+"px";
    }
}

drop();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
  <body>
<div style="border-style: solid; border-width: 5px; border-color:red;">Test</div>
  </body>
</html>

Post Made Community Wiki by mclaassen

occurred Sep 16, 2014 at 20:30

Stack Exchange Network

Return to Answer