Fire JS Bin - BlocksPhysics

You can jump to the latest bin by adding /latest to your URL

Find

→ ←

⟲

Replace

⊗ All Replace

(function () {

// Zachary Johnson
// http://www.zachstronaut.com
// November 2010ish, Firefox 10+ update in March 2012

var game = {
    width: null,
    height: null,
    framerate: 30
};

var worldAABB;
var world;
var timeStep = 1/game.framerate;

var walls = new Array();
var wall_thickness = 500;

var elements = new Array();
var properties = new Array();
var bodies = new Array();

var mouse_joints = {};

var filter = 0.75;
var acceleration = {x: 0, y: 0, z: 0};

var transformProperty;

var mobile = (typeof window.orientation !== 'undefined');

var supports3D = false;

start();

game.width = window.innerWidth;
    game.height = window.innerHeight;
    
	var selector = '.box.basic, .box.more';
	if (game.width + game.height < 320 + 480 + 200)
	{	    
	    selector = '.box.basic';
	    
	    var mores = document.querySelectorAll('.box.more');
	    for (var j = 0; j < mores.length; j++) {
	        mores[j].style.display = 'none';
	    }
	    
        setTimeout(function () {window.scrollTo(0, 1);}, 0);
        
	}
		
    worldAABB = new b2AABB();
    worldAABB.minVertex.Set(-wall_thickness, -wall_thickness);
    worldAABB.maxVertex.Set(3000 + wall_thickness, 2000 + wall_thickness);

world = new b2World(worldAABB, new b2Vec2(0, 0), true);
    
    world.m_gravity.x = 0;
    world.m_gravity.y = 600;//700;
    
	handleWalls();
    
    elements = document.querySelectorAll(selector);
    
    transformProperty = getTransformProperty(elements[0]);
    
    supports3D = (typeof elements[0].style.WebkitPerspective !== 'undefined' || typeof elements[0].style.MozPerspective !== 'undefined');
    
    var element, x, y, width, height;   
    for (var i = 0; i < elements.length; i++)
    {
        element = elements[i];
        
        width = element.offsetWidth;
        height = element.offsetHeight;
        x = Math.floor(Math.random() * (game.width - width));
        y = Math.floor(Math.random() * 100);

if (supports3D) {
            element.style[transformProperty] = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
        } else {
            element.style[transformProperty] = 'translate(' + x + 'px, ' + y + 'px)';
        }
		element.style.visibility = 'visible';

properties[i] = new Array();
        properties[i][0] = x;
        properties[i][1] = y;
        properties[i][2] = width;
        properties[i][3] = height;
		properties[i][4] = width >> 1;
        properties[i][5] = height >> 1;

bodies[i] = make_box(world, x + width / 2, y + height / 2, width / 2, height / 2, false);     
    }
    
    document.addEventListener('mousedown', mouse_handler, false);
    document.addEventListener('mousemove', mouse_handler, false);
    document.addEventListener('mouseup', mouse_handler, false);
    
    document.addEventListener('touchstart', touch_handler, false);
    document.addEventListener('touchmove', touch_handler, false);
    document.addEventListener('touchend', touch_handler, false);
    
	window.addEventListener(
		'devicemotion',
		function (e)
		{
			acceleration.x = e.accelerationIncludingGravity.x * filter + acceleration.x * (1.0 - filter);
			acceleration.y = e.accelerationIncludingGravity.y * filter + acceleration.y * (1.0 - filter);
			
			//document.getElementById('debug').innerHTML = e.accelerationIncludingGravity.y;
			
			switch (window.orientation)
			{
				case 90:
				world.m_gravity.x = 70 * -acceleration.y;
				world.m_gravity.y = 70 * -acceleration.x;
				break;

case -90:
				world.m_gravity.x = 70 * acceleration.y;
				world.m_gravity.y = 70 * acceleration.x;
				break;

case 180:
				world.m_gravity.x = 70 * -acceleration.x;
				world.m_gravity.y = 70 * acceleration.y;
				break;

default:
				world.m_gravity.x = 70 * acceleration.x;
				world.m_gravity.y = 70 * -acceleration.y;
				break;
			}
		},
		false
	);

setInterval(render, 1000 / game.framerate);
}

function handleWalls() {
    var oldWidth = game.width;
    var oldHeight = game.height;
    
    if (mobile) {
        game.width = window.innerWidth;
        game.height = window.innerHeight - 10;
    } else {
        game.width = window.innerWidth;
        game.height = window.innerHeight - 30;
    }

function touch_handler(e)
{
    if (e.type == 'touchstart')
    {
        for (var i = 0; i < e.changedTouches.length; i++)
        {            
            var body = get_body_at(e.changedTouches[i].pageX, e.changedTouches[i].pageY);

if (body)
            {
                var def = new b2MouseJointDef();
                def.body1 = world.m_groundBody;
                def.body2 = body;
                def.target.Set(e.changedTouches[i].pageX, e.changedTouches[i].pageY);
                def.maxForce = 30000.0 * body.m_mass;
                def.timeStep = timeStep;
                mouse_joints[e.changedTouches[i].identifier] = world.CreateJoint(def);
                body.WakeUp();
            }
        }
    }
    else if (e.type == 'touchmove')
    {
		var touch_i = e.changedTouches.length;
        while(touch_i--)
        {
            if (mouse_joints[e.changedTouches[touch_i].identifier])
            {
                var v = new b2Vec2(e.changedTouches[touch_i].pageX, e.changedTouches[touch_i].pageY);
                mouse_joints[e.changedTouches[touch_i].identifier].SetTarget(v);
            }
        }
    }
    else if (e.type == 'touchend')
    {
        for (var i = 0; i < e.changedTouches.length; i++)
        {
            if (mouse_joints[e.changedTouches[i].identifier])
            {
                world.DestroyJoint(mouse_joints[e.changedTouches[i].identifier]);
                mouse_joints[e.changedTouches[i].identifier] = null;
            }
        }
    }
}

function render()
{
    world.Step(timeStep, 1);

var body, style;
	var x, y, r;
    var render_i = elements.length;
    while(render_i--)
    {
        body = bodies[render_i];

x = (body.m_position0.x - properties[render_i][4]);
		y = (body.m_position0.y - properties[render_i][5]);
		r = body.m_rotation0;
		
		if (supports3D) {
            elements[render_i].style[transformProperty] = 'translate3d(' + x + 'px, ' + y + 'px, 0) rotate(' + r + 'rad)';
        } else {
            elements[render_i].style[transformProperty] = 'translate(' + x + 'px, ' + y + 'px) rotate(' + r + 'rad)';
        }
    }
}

function get_body_at(x, y) {
    var v = new b2Vec2();
    v.Set(x, y);
    
    var aabb = new b2AABB();
    aabb.minVertex.Set(x - 1, y - 1);
    aabb.maxVertex.Set(x + 1, y + 1);

var buid = 0;
function make_box(world, x, y, width, height, fixed)
{

if (typeof fixed == 'undefined')
    {
        fixed = false;
    }

var shape = new b2BoxDef();

if (!fixed)
    {
        shape.density = 1.0;
    }

shape.extents.Set(width, height);

var body = new b2BodyDef();
    body.AddShape(shape);
    body.position.Set(x, y);
    body.userData = buid++;
    
    return world.CreateBody(body);
}

}());

<!DOCTYPE html>
<html x-manifest="x-app.manifest">
<head>

<title>3D CSS3 Blocks Physics - zachstronaut</title>

</head>
<body>

<div id="instructions"><p>Use Your Mouse to Drag and Throw Blocks.</p></div>

</div>

</body>
</html>

html
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body
{
    margin: 0;
    padding: 0;
    background: #000;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
	-webkit-tranform: translateZ(0);
	-moz-user-select: none;
	user-select: none;
	overflow: hidden;
}

#viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
	
	-webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
}

#container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/*#debug
{
    color: #ff0;
}*/

#instructions
{
	color: #fff;
	text-align: center;
	font-family: sans-serif;
	position: absolute;
	width: 100%;
	left: 0;
	top: 284px;
	font-size: 25px;
	z-index: 2;
	-webkit-transition: opacity 3s linear;
	-moz-transition: opacity 3s linear;
	transition: opacity 3s linear;
}

.appstore
{
	position: absolute;
	right: 20px;
	top: 20px;
    width: 134px;
    height: 51px;
    padding: 0;
    margin: 20px;
}

.appstore a
{
    display: block;
    height: 100%;
    text-indent: -9999px;
    background: url(/images/appstore.gif);
}

@media (max-device-width: 480px) {
	#instructions {
		top: 125px;
		font-size: 10px;
	}
	
	.appstore {
		display: none;
	}
}

.box
{
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.front
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #f90;
}

/*
.back
{
    position: absolute;
    left: 0;
    top: 0;
    width: 320px;
    height: 480px;
    background: #777;
    -webkit-transform: translate3d(0, 0, -320px);
}
*/

.top
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #b50;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: 0% 0%;
    -moz-transform: rotateX(-90deg);
    -moz-transform-origin: 0% 0%;
}

.right
{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #d70;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-origin: 100% 0%;
    -moz-transform: rotateY(-90deg);
    -moz-transform-origin: 100% 0%;
}

.bottom
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #b50;
    -webkit-transform: rotateX(90deg);
    -webkit-transform-origin: 0% 100%;
    -moz-transform: rotateX(90deg);
    -moz-transform-origin: 0% 100%;
}

.left
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #d70;
    -webkit-transform: rotateY(90deg);
    -webkit-transform-origin: 0% 0%;
    -moz-transform: rotateY(90deg);
    -moz-transform-origin: 0% 0%;
}

.large
{
    width: 75px;
    height: 75px;
}

.small
{
    width: 25px;
    height: 25px;
}

.long
{
    width: 200px;
}

.longer
{
    width: 300px;
}

.long .left,
.long .right,
.longer .left,
.longer .right
{
    width: 50px;
}

Pop out