JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div class="block large" style="display:none;">
<h1>This is the title of a block</h1>
<p>And this is some paragraph. Cool huh?</p>
</div>
<div class="block medium" style="display:none;">
<h2>This is the title of a block</h2>
<p>And this is some paragraph. Cool huh?</p>
</div>
<div class="block small" style="display:none;">
<h3>This is the title of a block</h3>
<p>And this is some paragraph. Cool huh?</p>
</div>
</div>
CSS
body{width:700px; height:600px; background:#ccc;}
#container
{
width: 960px;
width: 100%;
height: 100%;
margin: 0 auto;
background: #fff;
}
.block
{
background: #ececec;
overflow: hidden;
position: absolute;
}
.block.small
{
width: 100px;
height: 100px;
}
.block.medium
{
width: 150px;
height: 150px;
}
.block.large
{
width: 200px;
height: 200px;
}
JavaScript
var gravity = 9.81 / 10000;
var fps = 60;
var world = new Array();
var blocks = new Array();
var container;
var pastTime;
var counter;
var dt;
var padding = 400;
// Vector
var _vector = function(x,y)
{
this.x = x;
this.y = y;
}
function vector(x,y)
{
return new _vector(x,y);
}
// Point
var _point = function(x,y)
{
this.x = x;
this.y = y;
}
function point(x,y)
{
return new _point(x,y);
}
// Block
var _block = function blox(position, speed, object)
{
this.position = {
x:position.x,
y:position.y
};
this.speed = {
x:speed.x,
y:speed.y
};
this.object = object;
};
_block.prototype =
{
updatePosition : function(dt)
{
this.position.x += this.speed.x * (dt/16);
this.position.y += this.speed.y * (dt/16);
return this;
},
updateSpeed : function(acceleration)
{
this.speed.x += acceleration;
this.speed.y += acceleration;
return this;
}
};
function block(position, speed, object)
{
return new _block(position, speed, object);
}
function init()
{
counter = 0;
world[0] = $('body').innerWidth();
world[1] = $('body').innerHeight();
container.find('.block').each(function(index)
{
// Physics
position = point(Math.random(), Math.random());
speed = vector(Math.random()/50, Math.random()/50);
blocks[index] = block(position, speed, $(this));
blocks[index].object.fadeIn(1000);
/*block.mousedown(function(event)
{
//
});*/
});
setInterval(run, 10);
}
function xToWorldCoordinates(value)
{
x = value * (world[0]);
return x;
}
function yToWorldCoordinates(value)
{
y = value * (world[1]);
return y;
}
function run()
{
console.log(blocks);
for (i=0; i<=blocks.length; i++)
{
timer = new Date().getTime();
...