JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pinball Clone (Matter.js Demo)</title>
  <style>
    /* Basic styling to make the body and canvas fill the screen */
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden; /* Prevent scrollbars */
      background: #000; /* Set a black background for the page */
    }
    canvas {
      display: block; /* Remove extra space below the canvas */
      background: #111; /* Set a dark background for the canvas */
    }
    #controls {
      position: absolute;
      top: 10px;
      left: 10px;
      color: #fff;
      font-family: sans-serif;
      z-index: 10; /* Ensure controls are above the canvas */
    }
  </style>
</head>
<body>
  <div id="controls">
    <p>Left flipper: Z or ← Right flipper: / or →</p>
  </div>

  <canvas id="pinballCanvas"></canvas>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/matter.min.js"></script>

  <script>
    // Wait for the DOM to be fully loaded before initializing the game
    document.addEventListener('DOMContentLoaded', () => {
      // Get the canvas element
      const canvas = document.getElementById('pinballCanvas');

      // 1) create engine & renderer
      const engine = Matter.Engine.create();
      const render = Matter.Render.create({
        canvas: canvas, // Use the dedicated canvas element
        engine: engine,
        options: {
          width: window.innerWidth, // Set initial width
          height: window.innerHeight, // Set initial height
          wireframes: false, // Use solid shapes
          background: '#111' // Canvas background color
        }
      });

      // Get the dimensions from the render options
      const width = render.options.width;
      const height = render.options.height;

      // 2) ball
      let ball = Matter.Bodies.circle(width / 2, height / 4, 10, {
        restitution: 0.9, // High...