foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-12-23 13:19:01 -05:00
Code Issues Wiki Activity

added Demo.slingshot

Browse source
This commit is contained in:
liabru 2014-05-09 11:00:07 +01:00
parent b6ed9f04bc
commit 3043baa53c
8 changed files with 59 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -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)

3
demo/dev.html
View file

@ -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>

BIN
demo/img/background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
demo/img/block-2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 468 B

BIN
demo/img/block.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 510 B

BIN
demo/img/rock.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

3
demo/index.html
View file

@ -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>

54
demo/js/Demo.js
View file

@ -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;