Super Mario JS

A browser-based clone of the classic Super Mario Bros (World 1-1), built with vanilla JavaScript, HTML5 Canvas, and retro audio. No build step required — great for playing, learning JS game loops, or deploying to Vercel.

Author: marcos mendes

Features

• World 1-1 with scrolling, enemies, items, pipes, and flagpole
• Keyboard, physical gamepad, or phone as a remote controller
• Title screen with background music
• Back to home button during gameplay
• Static deployment on Vercel

Controls

Input	Action
Arrow keys	Move / crouch / enter pipes
X	Jump
Z	Run / shoot fireball (with power-up)
Gamepad	D-pad + A (jump) + RB (run)
Phone	Same buttons via virtual gamepad (landscape only)

Phone as controller

1. On the title screen, click Use phone as controller
2. Scan the QR code with your phone
3. Rotate your phone to landscape — controls unlock in landscape mode only
4. When you see Connected, go back to the desktop and click Start Game

The connection uses PeerJS (WebRTC). The phone opens controller.html powered by virtual-gamepad-lib.

Test on local network

The QR code tries to use your LAN IP. Desktop and phone must be on the same Wi‑Fi.

cd public
npx --yes serve -l tcp://0.0.0.0:4173 .

Open on desktop: http://localhost:4173

Test outside LAN (ngrok)

If your phone cannot reach the local IP, use a tunnel:

Terminal 1 — server

cd public
npx --yes serve -l tcp://0.0.0.0:4173 .

Terminal 2 — tunnel

ngrok http 4173

Open the https URL from ngrok on your desktop (not localhost), generate the QR code, and scan it on your phone.

Run locally

Requirements: Node.js (only to serve static files; the game itself has no npm dependencies).

git clone https://github.com/iamdevmarcos/supermariojs.git
cd supermariojs/public
npx --yes serve .

Or with Python:

cd public
python3 -m http.server 8080

Open http://localhost:3000 (serve) or http://localhost:8080 (Python).

Opening index.html directly from disk (file://) may break asset loading and ES modules on the controller page. Always use an HTTP server.

Deploy (Vercel)

The project includes vercel.json. The served folder is public/.

1. Connect the repository on Vercel
2. Automatic deploys from the main branch

In production, the remote controller QR code uses your public site URL — no ngrok needed.

Project structure

supermariojs/
├── public/
│   ├── index.html          # Game (host)
│   ├── controller.html     # Phone gamepad
│   ├── js/
│   │   ├── game.js         # Main game loop
│   │   ├── remote-host.js  # PeerJS + QR (desktop)
│   │   ├── remote-controller.js
│   │   └── ...
│   ├── css/
│   ├── sprites/
│   └── sounds/
└── vercel.json

Stack

• Vanilla JavaScript + HTML5 Canvas
• PeerJS — signaling / WebRTC
• virtual-gamepad-lib — touch gamepad on mobile
• qrcodejs — QR code on title screen

License

Personal / educational project. Sprites and audio reference the original Nintendo game; use at your own risk in non-commercial contexts.