foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-11-23 09:26:51 -05:00
Code Issues Wiki Activity

updated demo

Browse source
This commit is contained in:
liabru 2014-03-20 15:05:42 +00:00
parent 3359c1a340
commit 1a152309a0
4 changed files with 14389 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
demo/css/style.css
View file

@ -35,7 +35,22 @@ a, a:link, a:visited, a:active, a:hover {
.container {
max-width: 800px;
margin: 0 auto;
padding: 6% 300px 6% 6%;
padding: 6% 300px 0 6%;
}
.is-mobile .container {
padding: 6% 6% 0 6%;
}
.is-fullscreen #canvas-container {
width: 100%;
height: 100%;
}
.is-fullscreen #canvas-container canvas {
margin: 0;
max-width: 100%;
max-height: 100%;
}
.mobile .container {

6
demo/dev.html
View file

@ -3,7 +3,9 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimal-ui">
<meta name="robots" content="noindex">
<script type="text/javascript" src="./js/lib/pixi.dev.js"></script>
<script type="text/javascript" src="./js/lib/dat.gui.min.js"></script>
<script type="text/javascript" src="./js/lib/resurrect.js"></script>
<script type="text/javascript" src="./js/lib/matter-dev.js"></script>
@ -24,6 +26,8 @@
<option value="pyramid">Pyramid</option>
<option value="car">Car</option>
<option value="newtonsCradle">Newton's Cradle</option>
<option value="wreckingBall">Wrecking Ball</option>
<option value="avalanche">Avalanche</option>
<option value="restitution">Restitution</option>
<option value="friction">Friction</option>
<option value="airFriction">Air Friction</option>
@ -32,8 +36,6 @@
<option value="broadphase">Grid Broadphase</option>
<option value="chains">Chains</option>
<option value="ballPool">Ball Pool</option>
<option value="wreckingBall">Wrecking Ball</option>
<option value="avalanche">Avalanche</option>
<option value="beachBalls">Beach Balls</option>
<option value="events">Events</option>
<option value="sprites">Sprites</option>

135
demo/js/Demo.js
View file

@ -10,26 +10,27 @@
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
RenderPixi = Matter.RenderPixi,
Events = Matter.Events;
var Demo = {};
var _engine,
_gui,
_sceneName;
_sceneName,
_isMobile = /(ipad|iphone|ipod|android)/gi.test(navigator.userAgent);
Demo.init = function() {
var container = document.getElementById('canvas-container');
// engine options - these are the defaults
// engine options
var options = {
positionIterations: 6,
velocityIterations: 4,
enableSleeping: false,
timeScale: 1
enableSleeping: false
};
// create a Matter engine, with the element to insert the canvas into
// create a Matter engine
// NOTE: this is actually Matter.Engine.create(), see the aliases at top of this file
_engine = Engine.create(container, options);
@ -61,8 +62,35 @@
demoReset = document.getElementById('demo-reset');
// create a dat.gui using Matter helper
if (!_isMobile)
_gui = Gui.create(_engine);
// go fullscreen when using a mobile device
if (_isMobile) {
var body = document.body;
body.className += ' is-mobile';
_engine.render.canvas.addEventListener('touchstart', Demo.fullscreen);
var fullscreenChange = function() {
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
// delay fullscreen styles until fullscreen has finished changing
setTimeout(function() {
if (fullscreenEnabled) {
body.className += ' is-fullscreen';
} else {
body.className = body.className.replace('is-fullscreen', '');
}
}, 2000);
};
document.addEventListener('webkitfullscreenchange', fullscreenChange);
document.addEventListener('mozfullscreenchange', fullscreenChange);
document.addEventListener('fullscreenchange', fullscreenChange);
}
// initialise demo selector
demoSelect.value = _sceneName;
demoSelect.addEventListener('change', function(e) {
@ -80,13 +108,32 @@
});
};
Demo.fullscreen = function(){
var _fullscreenElement = _engine.render.canvas;
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
if (_fullscreenElement.requestFullscreen) {
_fullscreenElement.requestFullscreen();
} else if (_fullscreenElement.mozRequestFullScreen) {
_fullscreenElement.mozRequestFullScreen();
} else if (_fullscreenElement.webkitRequestFullscreen) {
_fullscreenElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
};
Demo.reset = function() {
var _world = _engine.world;
World.clear(_world);
Engine.clear(_engine);
if (Events)
// clear scene graph (if defined in controller)
var renderController = _engine.render.controller;
if (renderController.clear)
renderController.clear(_engine.render);
// clear events
Events.clear(_engine);
_engine.enableSleeping = false;
@ -99,7 +146,6 @@
World.addBody(_world, Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }));
var renderOptions = _engine.render.options;
renderOptions.wireframes = true;
renderOptions.showDebug = false;
renderOptions.showBroadphase = false;
@ -112,6 +158,11 @@
renderOptions.showIds = false;
renderOptions.showShadows = false;
renderOptions.background = '#fff';
if (_isMobile) {
renderOptions.showAngleIndicator = false;
renderOptions.showDebug = true;
}
};
// all functions below are for setting up scenes
@ -132,7 +183,7 @@
case 1:
var sides = Math.round(Common.random(1, 8));
// triangles can be a little jittery... so avoid until fixed
// triangles can be a little unstable, so avoid until fixed
// TODO: make triangles more stable
sides = (sides === 3) ? 4 : sides;
@ -426,9 +477,11 @@
bodyB: ball
}));
if (!_isMobile) {
var renderOptions = _engine.render.options;
renderOptions.showCollisions = true;
renderOptions.showVelocity = true;
}
};
Demo.ballPool = function() {
@ -535,14 +588,7 @@
World.addComposite(_world, stack);
//_engine.enableSleeping = true;
// an example of using beforeUpdate event on an engine
Events.on(_engine, 'beforeUpdate', function(event) {
var engine = event.source;
// apply random forces every 5 secs
if (event.timestamp % 5000 < 50) {
var shakeScene = function(engine) {
var bodies = engine.world.bodies;
for (var i = 0; i < bodies.length; i++) {
@ -557,7 +603,15 @@
});
}
}
}
};
// an example of using beforeUpdate event on an engine
Events.on(_engine, 'beforeUpdate', function(event) {
var engine = event.source;
// apply random forces every 5 secs
if (event.timestamp % 5000 < 50)
shakeScene(engine);
});
// an example of using collisionStart event on an engine
@ -596,12 +650,26 @@
}
});
// an example of using mouse events on an engine.input.mouse
Events.on(_engine, 'mousedown', function(event) {
var mousePosition = event.mouse.position;
console.log('mousedown at ' + mousePosition.x + ' ' + mousePosition.y);
_engine.render.options.background = 'cornsilk';
shakeScene(_engine);
});
// an example of using mouse events on an engine.input.mouse
Events.on(_engine, 'mouseup', function(event) {
var mousePosition = event.mouse.position;
_engine.render.options.background = "white";
console.log('mouseup at ' + mousePosition.x + ' ' + mousePosition.y);
});
var renderOptions = _engine.render.options;
renderOptions.wireframes = false;
};
Demo.sprites = function() {
var initScene = function() {
var _world = _engine.world,
offset = 10,
options = {
@ -614,6 +682,7 @@
Demo.reset();
_world.bodies = [];
// these static walls will not be rendered in this sprites example, see options
World.addBody(_world, Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, options));
World.addBody(_world, Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, options));
World.addBody(_world, Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, options));
@ -625,9 +694,7 @@
render: {
strokeStyle: '#ffffff',
sprite: {
image: boxSprite,
width: boxSprite.width,
height: boxSprite.height,
texture: './img/box.png',
xScale: 1,
yScale: 1
}
@ -641,9 +708,7 @@
friction: 0.01,
render: {
sprite: {
image: ballSprite,
width: ballSprite.width,
height: ballSprite.height,
texture: './img/ball.png',
xScale: 1,
yScale: 1
}
@ -655,29 +720,9 @@
World.addComposite(_world, stack);
var renderOptions = _engine.render.options;
renderOptions.background = 'url(./img/wall-bg.jpg) no-repeat';
renderOptions.background = './img/wall-bg.jpg';
renderOptions.showAngleIndicator = false;
renderOptions.wireframes = false;
};
var boxSprite = new Image(),
ballSprite = new Image(),
spriteLoadCount = 0;
// count the sprites loaded until they're all ready
var spriteLoaded = function() {
spriteLoadCount += 1;
// when all sprites loaded, start the scene!
if (spriteLoadCount >= 2)
initScene();
};
boxSprite.onload = spriteLoaded;
ballSprite.onload = spriteLoaded;
// trigger loading of sprites
ballSprite.src = './img/ball.png';
boxSprite.src = './img/box.png';
};
})();

14221
demo/js/lib/pixi.dev.js Normal file
View file

File diff suppressed because it is too large Load diff