added Demo.slingshot

liabru · May 9, 2014 · 3043baa · 3043baa
1 parent b6ed9f0
commit 3043baa
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@
 - [Solid Shapes](http://brm.io/matter-js-demo#mixedSolid)
 - [Newton's Cradle](http://brm.io/matter-js-demo#newtonsCradle)
 - [Wrecking Ball](http://brm.io/matter-js-demo#wreckingBall)
+- [Slingshot Game](http://brm.io/matter-js-demo#slingshot)
 - [Rounded Corners (Chamfering)](http://brm.io/matter-js-demo#rounded)
 - [Views](http://brm.io/matter-js-demo/#views)
 - [Time Scaling](http://brm.io/matter-js-demo/#timescale)

diff --git a/demo/dev.html b/demo/dev.html
@@ -26,13 +26,14 @@
     <body>
         <div class="container">
             <h1>Matter.js Demo (Dev. Build)</h1>
-            <p class="nav"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">&middot;</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">&middot;</span> <a href="https://github.com/liabru/matter-js">GitHub</a></p>
+            <p class="nav"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">&middot;</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">&middot;</span> <a href="https://github.com/liabru/matter-js">GitHub</a> <span class="nav-sep">&middot;</span> <a href="http://twitter.com/liabru">@liabru</a></p>
             <div class="controls-container">
                 <select id="demo-select">
                     <option value="mixed">Mixed Shapes</option>
                     <option value="mixedSolid">Solid Rendering</option>
                     <option value="newtonsCradle">Newton's Cradle</option>
                     <option value="wreckingBall">Wrecking Ball</option>
+                    <option value="slingshot">Slingshot Game</option>
                     <option value="rounded">Rounded Corners (Chamfering)</option>
                     <option value="views">Views</option>
                     <option value="timescale">Time Scaling</option>

diff --git a/demo/img/background.png b/demo/img/background.png
diff --git a/demo/img/block-2.png b/demo/img/block-2.png
diff --git a/demo/img/block.png b/demo/img/block.png
diff --git a/demo/img/rock.png b/demo/img/rock.png
diff --git a/demo/index.html b/demo/index.html
@@ -26,13 +26,14 @@
     <body>
         <div class="container">
             <h1>Matter.js Physics Engine Demo</h1>
-            <p class="nav"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">&middot;</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">&middot;</span> <a href="https://github.com/liabru/matter-js">GitHub</a></p>
+            <p class="nav"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">&middot;</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">&middot;</span> <a href="https://github.com/liabru/matter-js">GitHub</a> <span class="nav-sep">&middot;</span> <a href="http://twitter.com/liabru">@liabru</a></p>
             <div class="controls-container">
                 <select id="demo-select">
                     <option value="mixed">Mixed Shapes</option>
                     <option value="mixedSolid">Solid Rendering</option>
                     <option value="newtonsCradle">Newton's Cradle</option>
                     <option value="wreckingBall">Wrecking Ball</option>
+                    <option value="slingshot">Slingshot Game</option>
                     <option value="rounded">Rounded Corners (Chamfering)</option>
                     <option value="views">Views</option>
                     <option value="timescale">Time Scaling</option>

diff --git a/demo/js/Demo.js b/demo/js/Demo.js
@@ -120,6 +120,60 @@
         var renderOptions = _engine.render.options;
     };
 
+    Demo.slingshot = function() {
+        var _world = _engine.world;
+
+        Demo.reset();
+        _world.bodies = [];
+
+        var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true, render: { visible: false } }),
+            rockOptions = { density: 0.004, render: { sprite: { texture: './img/rock.png' } } },
+            rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
+            anchor = { x: 170, y: 450 },
+            elastic = Constraint.create({ 
+                pointA: anchor, 
+                bodyB: rock, 
+                stiffness: 0.05, 
+                render: { 
+                    lineWidth: 5, 
+                    strokeStyle: '#dfa417' 
+                } 
+            });
+
+        var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y, column, row) {
+            var texture = column % 2 === 0 ? './img/block.png' : './img/block-2.png';
+            return Bodies.rectangle(x, y, 25, 40, { render: { sprite: { texture: texture } } });
+        });
+
+        var ground2 = Bodies.rectangle(610, 250, 200, 20, { 
+            isStatic: true, 
+            render: { 
+                fillStyle: '#edc51e', 
+                strokeStyle: '#b5a91c' 
+            } 
+        });
+
+        var pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y, column, row) {
+            var texture = column % 2 === 0 ? './img/block.png' : './img/block-2.png';
+            return Bodies.rectangle(x, y, 25, 40, { render: { sprite: { texture: texture } } });
+        });
+
+        World.add(_engine.world, [ground, pyramid, ground2, pyramid2, rock, elastic]);
+
+        Events.on(_engine, 'tick', function(event) {
+            if (_engine.input.mouse.button === -1 && (rock.position.x > 190 || rock.position.y < 430)) {
+                rock = Bodies.polygon(170, 450, 7, 20, rockOptions);
+                World.add(_engine.world, rock);
+                elastic.bodyB = rock;
+            }
+        });
+
+        var renderOptions = _engine.render.options;
+        renderOptions.wireframes = false;
+        renderOptions.showAngleIndicator = false;
+        renderOptions.background = './img/background.png';
+    };
+
     Demo.rounded = function() {
         var _world = _engine.world;