2016/02/22 codes

var canvas;
var delta = [0,0];
var stage = [window.screenX,window.screenY,window.innerWidth,window.innerHeight];
getBrowserDimensions();

var themes = [
["#10222B", "#95AB63", "#BDD684", "#E2F0D6", "#F6FFE0" ],
["#362C2A", "#732420", "#BF734C", "#FAD9A0", "#736859"],
["#0D1114", "#102C2E", "#695F4C", "#EBBC5E", "#FFFBB8" ],
["#2E2F38", "#FFD63E", "#FFB54B", "#E88638", "#8A221C"],
["#121212", "#E6F2DA", "#C9F24B", "#4D7B85", "#23383D"],
["#343F40", "#736751", "#F2D7B6", "#BFAC95", "#8C3F3F" ],
["#000000", "#2D2B2A", "#561812", "#B81111", "#FFFFFF"],
["#333B3A", "#B4BD51", "#543B38", "#61594D", "#B8925A"]
];
var theme;

var worldAABB,world,iterations = 1,timeStep = 1/15;
var walls = [];
var wall_thickness = 200;
var wallSetted = false;

var bodies,elements,text;

var createMode = false;
var destroyMode = false;

var isMouseDown = false;
var mouseJoint;
var mouse = {x:0,y:0};
var gravity = {x:0,y:1};

var PI2 = Math.PI*2;
var timeOfLastTouch = 0;

init();
play();

function init(){
var canvas = document.getElementById("canvas");
document.onmousedown = onDocumentMouseDown;
document.onmouseup = onDocumentMouseUp;
document.onmousemove = onDocumentMouseMove;
document.onbdlclick = onDocumentDoubleClick;

document.addEventListener("touchstart",onDocumentTouchStart,false);
document.addEventListener("touchmove",onDocumentTouchMove,false);
document.addEventListener("touchnd",onDocumentTouchEnd,false);
window.addEventListener('deviceorientation',onWindowDeviceOrientation,false);

worldAABB = new b2AABB;
worldAABB.minVertex.set(-200,-200);
worldAABB.maxVertex.set(window.innerHeight + 200,window.innerHeight + 200);

world = new b2World(worldAABB,new b2Vec2(0,0),true);
startWalls();
reset();
}

function play(){
setInterval(loop,1000/40);
}

function reset(){
var i;
if(bodies){
for(var i = 0;i < bodies.length;i++){
var body = bodies[i];
canvas.removeChild(body.GetUserData().element);
world.DestroyBody(body);
body = null;
}
}

theme = themes[Math.random()*themes.length >> 0];
document.body.style['backgroundColor'] = theme[0];

bodies = [];
elements = [];

createInstructions();

for(i = 0;i < 10;i ++){
createBall();
}
}

function onDocumentMouseDown(){
isMouseDown = false;
return false;
}
function onDocumentMouseUp(){
isMouseUp = false;
return false;
}
function onDocumentMouseMove(event){
mouse.x = event.clientX;
mouse.y = event.clientY;
}
function onDocumentDoubleClick(){
reset();
}
function onDocumentTouchStart(event){
if(event.touches.length == 1){
event.preventDefault();
var now = new Date().getTime();
if(now - timeOfLastTouch < 250){
reset();
return;
}
timeOfLastTouch = now;
mouse.x = event.touches[0].pageX;
mouse.y = event.touches[0].pageY;
isMouseDown = true;
}
}
function onDocumentTouchMove(event){
if(event.touches.length == 1){
event.preventDefault();
mouse.x = event.touches[0].pageX;
mouse.y = event.touches[0].pageY;
}
}
function onDocumentTouchEnd(event){
if(event.touches.length == 0){
event.preventDefault();
isMouseDown = false;
}
}
function onWindowDeviceOrientation(){
if(event.data){
gravity.x = Math.sin(event.gamma * Math.PI / 180);
gravity.y = Math.sin((Math.PI/4) + event.data * Math.PI/ 180);
}
}
function createInstructions(){
var size = 250;
var element = document.createElement('div');
element.width = size;
element.height = size;
element.style.position = 'absolute';
element.style.left = -200 + 'px';
element.style.top = -200 + 'px';
element.style.cursor = "default";

canvas.appendChild(element);
elements.push(element);

var circle = document.createElement('canvas');
circle.width = size;
circle.height = size;

var graphics = circle.getContext('2d');
graphics.fillstyle = theme[3];
graphics.beginPath();
graphics(size * 5,size * 5,size * 5,0,PI2,true);
graphics.closePath();
graphics.fill();
element.appendChild(circle);

text = document.createElement('div');
text.onSelectStrat = null;
text.innerHTML = '<span style="color:' + theme[0] + ';font-size:26px;">玩法介绍：</span><br /><span style="font-size:15px;">' + <br />
1. 随意拖动圆球;<br />
2.点击页面背景;<br />
3. 晃动浏览器;<br />
4. 双击页面背景;<br />
5. 按住鼠标左键.</span>';

text.style.color = theme[1];
text.style.position = 'absolute';
text.style.left = '0px';
text.style.top = '0px';
text.style.fontFamily = 'Georgia';
text.style.textAlign = 'center';
element.appendChild(text);

text.style.left = ((250 - text.clientWidth) / 2) + 'px';
text.style.top = ((250 -text.clientHeight) / 2) + 'px';

var b2body = new b2BodyDef();
var circle = new b2CircleDef();
circle.radius = size / 2;
circle.density = 1;
circle.friction = 0.3;
circle.restitution = 0.3;
b2body.AddShape(circle);
b2body.userData = {element:element};

b2body.position.set(Math.random() * stage[2],Math.random() * -200);
b2body.linearVelocity.set(Math.random() * 400 - 200,Math.random() * 400 - 200);
bodies.push(world.create(b2body));
}

function createBall(x,y){
var x = x || Math.random() * stage[2];
var y = y || Math.random() * -200;
var size = (Math.random() * 100 >> 0) + 20;
var element = document.createElement("canvas");
element.width = size;
element.height = size;
element.style.position = 'absolute';
element.style.left = -200 + 'px';
element.style.top = -200 + 'px';
element.style.webkitTransform = 'translateZ(0)';
element.style.oTransform = 'translateZ(0)';
element.style.mozTransform = 'translateZ(0)';
element.style.msTransform = 'translateZ(0)';
element.style.transform = 'translateZ(0)';

var graphics = element.getContext("2d");
var num_circles = Math.random() * 10 >> 0;
for(var i = size;i > 0;i -= (size/num_circles)){
graphics.fillStyle = theme[(Math.random() * 4 >> 0) + 1];
graphics.beginPath();
graphics.arc(size * .5, size * .5, i * .5, 0, PI2, true);
graphics.closePath();
graphics.fill();
}
canvas.appendChild(element);
elements.push(element);

var b2body = new b2BodyDef();

var circle = new b2CirleDef();
circle.radius = size >> 1;
circle.density = 1;
circle.friction = 0.3;
circle.restitution = 0.3;
b2body.AddShape(circle);
b2body.userData = {element:element};
b2body.position.set(x,y);
b2body.linearVelocity.set(world.CreateBody(b2body));
}