Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section id="container" class="playground">
	<ul class="menu">
		<li class="menu__item">
			<a href="#1" class="menu__link">
				Music
			</a>
		</li>
		<li class="menu__item">
			<a href="#2" class="menu__link">
				Films
			</a>
		</li>
		<li class="menu__item">
			<a href="#3" class="menu__link">
				Theatre
			</a>
		</li>
		<li class="menu__item">
			<a href="#4" class="menu__link">
				Exhibitions
			</a>
		</li>
		<li class="menu__item">
			<a href="#5" class="menu__link">
				Talks
			</a>
		</li>
		<li class="menu__item">
			<a href="#6" class="menu__link">
				Performance
			</a>
		</li>
		<li class="menu__item">
			<a href="#7" class="menu__link">
				Workshops
			</a>
		</li>
		<li class="menu__item">
			<a href="#8" class="menu__link">
				Dance
			</a>
		</li>
		<li class="menu__item">
			<a href="#9" class="menu__link">
				Comedy
			</a>
		</li>
		<li class="menu__item">
			<a href="#10" class="menu__link">
				Contest
			</a>
		</li>
		<li class="menu__item">
			<a href="#11" class="menu__link">
				Food
			</a>
		</li>
	</ul>
</section>

console.log("Event Fired")
(function () {
	const WALL_THICKNESS = 80;
	// The helper needs to be the size of the container
	const MATTER_CONTAINER = document.querySelector("#container");
	const MATTER_HELPER = document.querySelector("#helper");

let Engine = Matter.Engine,
		Render = Matter.Render,
		Runner = Matter.Runner,
		Bodies = Matter.Bodies,
		World = Matter.World,
		Composite = Matter.Composite;

let engine = Engine.create();
	let render = Render.create({
		element: MATTER_HELPER,
		engine: engine,
		background: "black",
		options: {
			width: MATTER_CONTAINER.offsetWidth,
			height: MATTER_CONTAINER.offsetHeight
		}
	});

let domBodies = document.querySelectorAll(".menu__item");
	let matterBodies = {};
	let runner;
	let leftWall, rightWall, ground;

init();

function init() {
		createBounds();
		// Add all the bounds to the world
		Composite.add(engine.world, [leftWall, rightWall, ground]);
		// run the renderer
		Render.run(render);
		// create runner
		runner = Runner.create();
		// run the engine
		Runner.run(runner, engine);
		// Add visual duplicates of the html elements to the helper canvas
		creatMatterBodies();
		World.add(engine.world, Object.values(matterBodies));
		window.requestAnimationFrame(updateElementPositions);
		window.addEventListener("resize", () => handleResize());
	}

function createBounds() {
		ground = Bodies.rectangle(
			MATTER_CONTAINER.offsetWidth / 2,
			MATTER_CONTAINER.offsetHeight + WALL_THICKNESS / 2,
			6000,
			WALL_THICKNESS,
			{ isStatic: true }
		);

leftWall = Bodies.rectangle(
			0 - WALL_THICKNESS / 2,
			MATTER_CONTAINER.offsetHeight / 2,
			WALL_THICKNESS,
			MATTER_CONTAINER.offsetHeight * 5,
			{ isStatic: true }
		);

rightWall = Bodies.rectangle(
			MATTER_CONTAINER.offsetWidth + WALL_THICKNESS / 2,
			MATTER_CONTAINER.offsetHeight / 2,
			WALL_THICKNESS,
			MATTER_CONTAINER.offsetHeight * 5,
			{ isStatic: true }
		);
	}

function updateElementPositions() {
		domBodies.forEach((domBody, index) => {
			let matterBody = matterBodies[domBody.id];

if (matterBody) {
				domBody.style.transform =
					"translate( " +
					(-domBody.offsetWidth + matterBody.position.x + domBody.offsetWidth / 2) +
					"px, " +
					(-domBody.offsetHeight +
						matterBody.position.y +
						domBody.offsetHeight / 2) +
					"px )";
				domBody.style.transform += "rotate( " + matterBody.angle + "rad )";
			}
		});

window.requestAnimationFrame(updateElementPositions);
	}

function handleResize() {
		render.canvas.width = MATTER_CONTAINER.offsetWidth;
		render.canvas.height = MATTER_CONTAINER.offsetHeight;

Matter.Render.setPixelRatio(render, window.devicePixelRatio);

Matter.Body.setPosition(
			ground,
			Matter.Vector.create(
				MATTER_CONTAINER.offsetWidth / 2,
				MATTER_CONTAINER.offsetHeight + WALL_THICKNESS / 2
			)
		);

Matter.Body.setPosition(
			leftWall,
			Matter.Vector.create(
				0 - WALL_THICKNESS / 2,
				MATTER_CONTAINER.offsetHeight / 2
			)
		);

Matter.Body.setPosition(
			rightWall,
			Matter.Vector.create(
				MATTER_CONTAINER.offsetWidth + WALL_THICKNESS / 2,
				MATTER_CONTAINER.offsetHeight / 2
			)
		);
	}
})();

Frontend Forever App