Smash game

by Boris Šuška

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js"></script>

JavaScript

// Matter.js - http://brm.io/matter-js/

// Matter module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Composites = Matter.Composites,
    Common = Matter.Common,
    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    World = Matter.World,
    Bodies = Matter.Bodies,
    width = 800,
    height = 600,
    rest = 0.5,
    space = 600 / 5;

// create a Matter.js engine
var engine = Engine.create(),
		world = engine.world;
 
// zero gravity
world.gravity.scale = 0;
world.gravity.x = 0;
world.gravity.y = 0;
    
// create renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: width,
    height: height,
    showAngleIndicator: true,
  }
});

Render.run(render);

// create runner
var runner = Runner.create();
Runner.run(runner, engine);

// add a mouse controlled constraint
// add mouse control
var mouse = Mouse.create(render.canvas)
    /* mouseConstraint = MouseConstraint.create(engine, {
      mouse: mouse,
      constraint: {
        stiffness: 0.2,
        render: {
          anchors: true,          
          visible: true
        }
      }
    }); */
;

/* World.add(world, mouseConstraint); */


// fit the render viewport to the scene
Render.lookAt(render, {
  min: { x: 0, y: 0 },
  max: { x: width, y: height }
});


// keep the mouse in sync with rendering
render.mouse = mouse;

// create a load of circle bodies
stack = Composites.stack(20, 20, 20, 5, 0, 0, (x, y, column, row) =>
  Bodies.circle(x, y, Common.random(10, 20), {
    friction: 1,
    restitution: 1,
    density: 1
	}
));

// add circle bodies to the world
World.add(world, stack)

// add some some walls to the world
offset = 5
World.add(world, [
  Bodies.rectangle(width/2, 0, width, 50, { isStatic: true }),
  Bodies.rectangle(width/2, height, width, 50, { isStatic: true }),
  Bodies.rectangle(width, height/2, 50, height, { isStatic: true }),
  Bodies.rectangle(0, height/2, 50,...