Ajax Loader
HTML 
<script src="http://box2dweb.googlecode.com/svn/trunk/Box2D.js"></script>
1
<script src="http://box2dweb.googlecode.com/svn/trunk/Box2D.js"></script>
2
<script src="http://code.jquery.com/jquery-latest.js"></script>
3
<script class="text/javascript" src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
4
<link href='http://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet' type='text/css'>
5
 
6
<div class="green piece">1<br/></div><div class="blue piece">2<br/></div>
7
<div class="red piece">3<br/></div><div class="black piece">4<br/></div>
8
<br>
9
<div class="rowling piece"></div>
10
<br>
11
<div class="black piece">5<br/></div><div class="red piece">6<br/></div>
12
<div class="blue piece">7<br/></div><div class="black piece">8<br/></div>
13
<br/>
14
<div class="rowling piece"></div>
15
<div class="ground"></div>
16
 
17
<script>
18
  function rewidth(p,w) {
19
    p.animate(
20
      { background: 'white', width: w },
21
      {
22
        step: function(n,f) { p.data('fixture').GetShape().SetAsBox(p.outerWidth() / 2 / 30, p.outerHeight() / 2 / 30); },
23
        duration: 600
24
      }
25
    );
26
  }
27
  $('.rowling.piece').mouseenter(function() { rewidth($(this), '1px'); });
28
  $('.rowling.piece').mouseleave(function() { rewidth($(this), '10%'); });
29
</script>
 
CSS 
html, body {height:100%;}
1
html, body {height:100%;}
2
html {display:table; width:100%;}
3
body {display:table-cell; text-align:center; vertical-align:bottom;}
4
 
5
* {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none; -webkit-user-drag:none;-moz-user-drag:none;-ms-user-drag:none;-o-user-drag:none;user-drag:none;}
6
 
7
.ground {box-sizing:border-box;}
8
 
9
.ground {display:inline-block; width:100%; border:.2em solid; color:#8cc924; border-radius:.15em;}
10
 
11
 
12
/*PIECES*/
13
 
14
.black { color: black; }
15
.green { color: green; }
16
.red   { color: red; }
17
.blue  { color: blue; }
18
.empty { color: rgba(0,0,0,0); }
19
 
20
@pbc: beige;
21
@ph: 40px;
22
@pw: 26px;
23
@pp: 3px;
24
@pm: 1px;
25
@prh: @ph+(@pp+@pm)*2;
26
@prw: @pw+(@pp+@pm)*2;
27
 
28
.piece {
29
  display: inline-block;
30
  background-color: @pbc;
31
  border-radius: 2px;
32
  height: @ph;
33
  width: @pw;
34
  text-align: center;
35
  text-shadow: 1px 1px #FFFFFF;
36
  padding: @pp;
37
  cursor: pointer;
38
  border-radius: @pp;
39
  font-size: 1em;
40
  font-family: 'Archivo Black', 'Arial Black';
41
  margin: @pm;
42
  user-select: none;
43
  user-drag: none;
44
}
45
.piece:after { position: relative; text-align: center; top: -10px; content: "●"; }
46
.empty:after { position: relative; text-align: center; top: -10px; content: "_"; }
47
.empty { text-shadow: 0px 0px rgba(0,0,0,0); }
48
.piece {
49
    border-top: 2px solid white;
50
    border-left: 2px solid white;
51
    border-right: 2px solid gray;
52
    border-bottom: 2px solid gray;
53
}
54
 
55
.piece { border: 1px solid black; }
56
 
57
/**/
58
.rowling {
59
  width: 10%;
60
  height: 10px;
61
  padding: 0px;
62
  border: 1px solid black;
63
  background-color: brown;
64
}
65
.rowling:after { content: "" }
 
JavaScript 
////////////////////////////////////////////////////////////////
1
////////////////////////////////////////////////////////////////
2
// vv https://raw.github.com/gist/1579671/rAF.js
3
////////////////////////////////////////////////////////////////
4
 
5
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
6
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
7
 
8
// requestAnimationFrame polyfill by Erik Möller
9
// fixes from Paul Irish and Tino Zijdel
10
 
11
(function() {
12
    var lastTime = 0;
13
    var vendors = ['ms', 'moz', 'webkit', 'o'];
14
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
15
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
16
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
17
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
18
    }
19
20
    if (!window.requestAnimationFrame)
21
        window.requestAnimationFrame = function(callback, element) {
22
            var currTime = new Date().getTime();
23
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
24
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
25
              timeToCall);
26
            lastTime = currTime + timeToCall;
27
            return id;
28
        };
29
30
    if (!window.cancelAnimationFrame)
31
        window.cancelAnimationFrame = function(id) {
32
            clearTimeout(id);
33
        };
34
}());
35
 
36
 
37
////////////////////////////////////////////////////////////////
38
// vv https://raw.github.com/gist/3225993/loop.js
39
////////////////////////////////////////////////////////////////
40
 
41
// Generated by CoffeeScript 1.3.3
42
(function() {
43
  var Loop, periodicTimeout,
44
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
45
 
46
  periodicTimeout = function(callback, element, interval) {
47
    return setTimeout(function() {
48
      return callback((new Date).getTime() + interval);
49
    }, interval);
50
  };
51
 
52
  Loop = (function() {
53
 
54
    function Loop(f, interval) {
55
      this.f = f != null ? f : (function() {});
56
      this.interval = interval;
57
      this.stop = __bind(this.stop, this);
58
      this.start = __bind(this.start, this);
59
    }
60
 
61
    Loop.prototype.start = function() {
62
      var animLoop, lastCallAt, method,
63
        _this = this;
64
      if (this.id) {
65
        return;
66
      }
67
      method = this.interval != null ? periodicTimeout : window.requestAnimationFrame;
68
      lastCallAt = void 0;
69
      (animLoop = function(time) {
70
        if (time == null) {
71
          time = (new Date).getTime();
72
        }
73
        if (_this.f(time, lastCallAt) === false) {
74
          return _this.stop();
75
        }
76
        lastCallAt = time;
77
        return _this.id = method(animLoop, void 0, _this.interval);
78
      })();
79
      return this;
80
    };
81
 
82
    Loop.prototype.stop = function() {
83
      var method;
84
      if (this.id == null) {
85
        return;
86
      }
87
      method = this.interval != null ? clearTimeout : cancelAnimationFrame;
88
      method(this.id);
89
      this.id = void 0;
90
      return this;
91
    };
92
 
93
    return Loop;
94
 
95
  })();
96
 
97
  this.Loop = Loop;
98
 
99
  if (typeof module !== "undefined" && module !== null) {
100
    module.exports = this.Loop;
101
  }
102
 
103
}).call(this);
104
 
105
 
106
////////////////////////////////////////////////////////////////
107
// vv http://bl.ocks.org/3411189  (without ball & crates)
108
////////////////////////////////////////////////////////////////
109
 
110
(function () {
111
 
112
// Flatten Box2d (ugly but handy!)
113
(function b2(o) {
114
  for (k in o) {
115
    if (o.hasOwnProperty(k)) {
116
      if ($.isPlainObject(o[k])) {
117
        b2(o[k]);
118
      } else if (/^b2/.test(k)) {
119
        window[k] = o[k];
120
      }
121
    }
122
  }
123
}(Box2D));
124
 
125
var world = new b2World(
126
  new b2Vec2(0, 9.81), // gravity
127
  false                 // allow sleep
128
);
129
var SCALE = 30;
130
 
131
//
132
// Ground
133
//
134
 
135
(function ($ground) {
136
  // Fixture
137
  var fixDef = new b2FixtureDef;
138
  fixDef.density = 1;
139
  fixDef.friction = 0.5;
140
  fixDef.restitution = 0.2;
141
 
142
  // Shape
143
  fixDef.shape = new b2PolygonShape;
144
  fixDef.shape.SetAsBox(
145
    $ground.outerWidth() / 2 / SCALE, //half width
146
    $ground.outerHeight() / 2 / SCALE  //half height
147
  );
148
 
149
  // Body
150
  var bodyDef = new b2BodyDef;
151
  bodyDef.type = b2Body.b2_staticBody;
152
  bodyDef.position.x = ($ground.offset().left + $ground.outerWidth() / 2) / SCALE;
153
  bodyDef.position.y = ($ground.offset().top + $ground.outerHeight() / 2) / SCALE;
154
  var body = world.CreateBody(bodyDef);
155
  body.CreateFixture(fixDef);
156
  $ground.data('body', body);
157
}($('.ground')));
158
 
159
//
160
// Pieces
161
//
162
 
163
$('.piece').each(function (i, el) {
164
  var $crate = $(el);
165
 
166
  // Fixture
167
  var fixDef = new b2FixtureDef;
168
  fixDef.density = 1;
169
  fixDef.friction = 0.5;
170
  fixDef.restitution = 0.2;
171
 
172
  // Shape
173
  fixDef.shape = new b2PolygonShape;
174
  fixDef.shape.SetAsBox(
175
    $crate.outerWidth() / 2 / SCALE, //half width
176
    $crate.outerHeight() / 2 / SCALE  //half height
177
  );
178
 
179
  // Body
180
  var bodyDef = new b2BodyDef;
181
  bodyDef.type = b2Body.b2_dynamicBody;
182
  bodyDef.position.x = ($crate.offset().left + $crate.outerWidth() / 2) / SCALE;
183
  bodyDef.position.y = ($crate.offset().top + $crate.outerHeight() / 2) / SCALE;
184
 
185
  var body = world.CreateBody(bodyDef);
186
  var fixture = body.CreateFixture(fixDef);
187
  $crate.data('body', body);
188
  $crate.data('fixture', fixture)
189
});
190
 
191
 
192
 
193
//
194
// MouseJoint
195
//
196
 
197
var mouse = new b2Vec2();
198
$(window).mousemove(function (e) {
199
  mouse.Set(e.pageX / SCALE, e.pageY / SCALE);
200
});
201
window.mouse = mouse;
202
 
203
(function (mouse) {
204
  var mouseJointDef = new b2MouseJointDef();
205
  mouseJointDef.target = mouse;
206
  mouseJointDef.bodyA = world.GetGroundBody();
207
  mouseJointDef.collideConnected = true;
208
 
209
  var mouseJoint;
210
  $('.piece').on({
211
    mousedown: function (e) {
212
 
213
      var body = $(this).data('body'); if (!body) return;
214
 
215
      mouseJointDef.bodyB = body;
216
      mouseJointDef.maxForce = 300 * body.GetMass();
217
 
218
      mouseJoint = world.CreateJoint(mouseJointDef);
219
      mouseJoint.SetTarget(mouse);
220
221
      function mouseup(e) { world.DestroyJoint(mouseJoint); }
222
    
223
      $(window).one('mouseup', mouseup);
224
    }
225
  });
226
}(mouse));
227
 
228
//
229
// Loops
230
//
231
 
232
(function () {
233
  var dt = 60;
234
  new Loop(function () {
235
    world.Step(
236
      1/dt, //frame-rate
237
      10,   //velocity iterations
238
      10    //position iterations
239
    );
240
 
241
    world.ClearForces();
242
 
243
  }, 1000/dt).start();
244
}());
245
 
246
(function () {
247
  var $entities = $('.piece');
248
 
249
  // cache some initial coordinates informations
250
  $entities.each(function (i, el) {
251
    var $el = $(el);
252
    $el.data('origPos', {
253
      left: $el.offset().left,
254
      top: $el.offset().top,
255
      width: $el.outerWidth(),
256
      height: $el.outerHeight()
257
    });
258
  });
259
 
260
261
  new Loop(function (t, t0) {
262
    if (!t0) return;
263
    var dt = t - t0;
264
    if (dt <= 0) return;
265
 
266
    var i = $entities.length
267
    while (i--) {(function () {
268
      var entity = $entities[i];
269
      var $entity = $(entity);
270
 
271
      var body = $entity.data('body');
272
      var pos = body.GetPosition();
273
      var ang = body.GetAngle() * 180 / Math.PI;
274
      var origPos = $entity.data('origPos')
275
 
276
      $entity.css('transform', 'translate3d(' + ~~(pos.x*SCALE - origPos.left  - origPos.width / 2) + 'px, ' + ~~(pos.y*SCALE - origPos.top - origPos.height / 2) + 'px, 0) rotate3d(0,0,1,' + ~~ang + 'deg)');
277
    }());}
278
 
279
  }).start();
280
}());
281
 
282
}(jQuery, Box2D));
 

Untitled

CSSDeck G+