physics

by Darby Rathbone

HTML

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

CSS

body { margin: 0; width: 100vw; height: 100vh; overflow: hidden; }

JavaScript

var Engine = Matter.Engine,
  Render = Matter.Render,
  Runner = Matter.Runner,
  Bodies = Matter.Bodies,
  Body = Matter.Body,
  Vertices = Matter.Vertices,
  Constraint = Matter.Constraint,
  Composite = Matter.Composite,
  leftTrigger = false,
  rightTrigger = false;

// create an engine
var engine = Engine.create();

// create a renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: window.innerWidth,
    height: window.innerHeight,
    wireframes: false,
  },
});
//render.setSize(window.innerWidth, window.innerHeight)
// create two boxes and a ground

var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
var paddle = makePaddle(400, 400);
var staticPaddle = makePaddle(200, 200, { isStatic: true });
paddle.position.x += 35;
var con = Constraint.create({
  bodyB: paddle,
  pointB: { x: 0, y: 0 },
  pointA: { x: 435, y: 400 },
  angularStiffness: 0.1,
});

// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground, paddle, con, staticPaddle]);

// run the renderer
Render.run(render);

// create runner
var runner = Runner.create();

// run the engine
Runner.run(runner, engine);
window.addEventListener("resize", (event) => {
  Render.setSize(render, window.innerWidth, window.innerHeight);
  //console.log(Render.setSize);
});
window.addEventListener("mousedown", (event) => {
  // console.log(event);
  var ball = Bodies.circle(event.clientX, event.clientY, 10, {
    density: 0.002,
  });
  Composite.add(engine.world, ball);
});
window.addEventListener("keydown", (event) => {
  // console.log(event);
  switch (event.code) {
    case "ArrowLeft":
      if (leftTrigger)
        break;
      Body.rotate(staticPaddle, (Math.PI / 180) * 5);
      leftTrigger = true;
      break;
    case "ArrowRight":
          if...