JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Super Mario Bros</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Courier New', monospace;
  }
  h1 { color: #e52521; font-size: 22px; margin-bottom: 8px; letter-spacing: 2px; }
  canvas {
    border: 3px solid #e52521;
    border-radius: 4px;
    image-rendering: pixelated;
  }
  .controls { color: #aaa; margin-top: 10px; font-size: 13px; }
</style>
</head>
<body>
<h1>SUPER MARIO BROS</h1>
<canvas id="game" width="800" height="440"></canvas>
<div class="controls">← → / A D to move &nbsp;|&nbsp; SPACE / ↑ to jump &nbsp;|&nbsp; R to restart</div>

<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

const W = 800, H = 440;
const GRAVITY = 0.55;
const FRICTION = 0.82;
const JUMP_VEL = -11.5;
const MOVE_ACC = 0.6;
const MAX_SPEED = 5;

let score, lives, coinsCollected, gameOver, won, camX;
let mario, platforms, coins, goombas, particles, flag;
let keys = {};

function reset() {
  score = 0; lives = 3; coinsCollected = 0; gameOver = false; won = false;
  camX = 0;
  particles = [];
  mario = {
    x: 60, y: 300, w: 24, h: 32,
    vx: 0, vy: 0,
    onGround: false,
    facing: 1,
    invincible: 0,
    dead: false
  };
  buildLevel();
}

function buildLevel() {
  platforms = [];
  coins = [];
  goombas = [];

  const groundY = H - 40;
  const groundSegs = [
    [0, 400], [460, 700], [820, 500], [1400, 600], [2100, 500], [2700, 400]
  ];
  groundSegs.forEach(([x, w]) => {
    platforms.push({ x, y: groundY, w, h: 40, type: 'ground' });
  });

  const floats = [
    [200, 300, 96], [380, 240, 64], [550, 280, 96], [720, 200, 64],
    [900, 260, 96], [1050, 180, 64], [1200, 300, 96], [1350, 220,...