Skip to content

Instantly share code, notes, and snippets.

@galaydaroman

galaydaroman/matter-demo.html

Last active January 9, 2016 20:28
Show Gist options
  • Save galaydaroman/285ffb45a4c622609cab to your computer and use it in GitHub Desktop.
Save galaydaroman/285ffb45a4c622609cab to your computer and use it in GitHub Desktop.
Download ZIP
matter-demo.js
Raw
matter-demo.html
<html>
<!-- <head> -->
<!-- <script src="http://wot-stat.com.ua/matter-tools-dev.js" type="text/javascript"></script> -->
<!-- <link rel="stylesheet" type="text/css" href="http://wot-stat.com.ua/matter-tools.css"> -->
<!-- </head> -->
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js" type="text/javascript"></script>
<script src="https://github.com/liabru/matter-js/releases/download/0.8.0-alpha/matter-0.8.0.js" type="text/javascript"></script>
<style type="text/css">
body {
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
}
</style>
<!--h5 class="test-custom-html">Javascript phisics</h5-->
<script>
var Engine = Matter.Engine,
World = Matter.World,
Bodies = Matter.Bodies,
Body = Matter.Body,
Composites = Matter.Composites,
MouseConstraint = Matter.MouseConstraint;
// create a Matter.js engine
var engine = Engine.create({
render: {
element: document.body,
options: {
width: 692,
height: 370,
hasBounds: true,
wireframes: false,
wireframeBackground: '#222',
background: 'transparent'
}
}
});
// add a mouse controlled constraint
var mouseConstraint = MouseConstraint.create(engine);
World.add(engine.world, mouseConstraint);
engine.world.gravity.y = 0.4;
// create two boxes and a ground
var boxesA = [
Bodies.rectangle(270, 120, 50, 50),
Bodies.rectangle(300, 30, 50, 50)
];
var boxesB = [
Bodies.rectangle(266, -90, 30, 40, { render: { fillStyle: '#FF7F50' }, density: 0.004 }),
Bodies.rectangle(280, -140, 40, 40, { render: { fillStyle: '#FF7F50' }, density: 0.005 }),
Bodies.rectangle(245, -220, 60, 60, { render: { fillStyle: '#87CEEB' }, density: 0.015 }),
Bodies.rectangle(330, -200, 70, 70, { render: { fillStyle: '#87CEEB' }, density: 0.018 })
];
var ground = [
Bodies.rectangle(350, 360, 700, 20, { isStatic: true }),
Bodies.rectangle( 10, 0, 20, 1000, { isStatic: true }),
Bodies.rectangle(682, 0, 20, 1000, { isStatic: true })
];
// add all of the bodies to the world
World.add(engine.world, ground);
World.add(engine.world, boxesA);
// run the engine
Engine.run(engine);
// Delay
setTimeout(function() { World.add(engine.world, boxesB); }, 2000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment