CrazyGames HTML5 Template

A production-ready starter template for publishing HTML5 games on CrazyGames — with SDK v3, cloud save, ads, and a one-command production build.

     

If this template saves you time, please star the repo and follow me — it helps more developers find it!

---

What's Inside

A fully-wired "Survive 10 Waves" game you can use as a skeleton for any CrazyGames project.

Feature	Status
CrazyGames SDK v3 integration	✅
Cloud save (Data Module) + localStorage fallback	✅
Rewarded ads (free revive)	✅
Midgame (interstitial) ads	✅
User auth listener	✅
Loading screen with progress bar	✅
HUD (score / wave / lives)	✅
Pause, Game Over, Win overlays	✅
Mobile D-Pad controls	✅
One-command production build	✅
Right-click disabled (CrazyGames requirement)	✅

---

Project Structure

crazygameTemplate/
├── index.html        ← Single HTML entry point (all UI, styles, overlays)
├── js/
│   ├── sdk.js        ← CrazyGames SDK v3 wrapper (fallbacks for localhost)
│   ├── data.js       ← Cloud save / load system
│   ├── game.js       ← Core game logic (canvas, entities, waves)
│   └── main.js       ← Boot sequence + button wiring
├── build.js          ← Production bundler (minifies JS + CSS → dist/)
├── package.json
└── .gitignore

Boot Order

SDK.init()        → connects to CrazyGames OR enables local fallback
GameData.load()   → restores progress from cloud / localStorage
Game.init()       → sets up canvas + input listeners
Game.start()      → begins first session

---

Quick Start

Prerequisites

• Node.js 18+
• A modern browser (Chrome / Edge recommended)

1. Clone & Install

git clone https://github.com/Riteshp2001/CrazyGameTemplate.git
cd YOUR_REPO
npm install

2. Run Locally

npm run dev
# Opens at http://localhost:8000

The SDK works on localhost — ads show demo responses, user auth is mocked.

3. Production Build

npm run build
# Output → dist/index.html  (single minified file, ready to zip and upload)

The build script:

• Bundles all JS files in correct load order (sdk.js → data.js → game.js → main.js)
• Minifies JS with Terser (3 passes)
• Minifies CSS with LightningCSS (if a css/ folder exists)
• Inlines everything into one dist/index.html

---

SDK Wrapper (js/sdk.js)

All CrazyGames SDK calls are centralized here. On localhost every method gracefully degrades — no crashes, no missing features.

// Initialize (must be first)
await SDK.init();

// Gameplay signals (required by CrazyGames)
SDK.loadingStart();
SDK.loadingStop();
SDK.gameplayStart();
SDK.gameplayStop();
SDK.happyTime();           // call on exciting moments (level up, win)

// Ads
await SDK.showRewardedAd(onReward, onError);   // user watches → gets reward
await SDK.showMidgameAd();                      // interstitial at breaks

// Cloud save
SDK.setData('key', value);   // auto JSON.stringify
SDK.getData('key');           // auto JSON.parse, returns null if missing

// Auth
const user = await SDK.getUser();   // { username, userId, profilePictureUrl }
await SDK.showLoginPrompt();
SDK.onAuthChange(callback);

---

Save System (js/data.js)

Saved shape (1 MB cloud limit):

{
  "highScore":  0,
  "totalGames": 0,
  "waveRecord": 0,
  "settings":   { "sound": true, "music": true }
}

GameData.load();                        // restore on boot
GameData.save();                        // manual save
GameData.recordGame(score, waves);      // auto-saves if new record
GameData.updateSetting('sound', false); // saves immediately

---

Customizing / Extending

Add new JS files

1. Create js/yourfeature.js
2. Add <script src="js/yourfeature.js"></script> in index.html before main.js
3. The build script picks it up automatically

Add CSS

Create a css/ folder and add .css files — the build bundles them automatically.

Add Audio (Howler.js)

<script src="https://cdn.jsdelivr.net/npm/howler@2.2.4/dist/howler.min.js"></script>

// js/audio.js
const Audio = (() => {
  const sounds = {};
  return {
    load: (name, url) => { sounds[name] = new Howl({ src: [url] }); },
    play: (name)      => { if (GameData.settings.sound) sounds[name]?.play(); },
  };
})();

Add a Leaderboard (Supabase)

import { createClient } from '@supabase/supabase-js';
const supabase = createClient('YOUR_URL', 'YOUR_ANON_KEY');

async function submitScore(score) {
  const user = await SDK.getUser();
  await supabase.from('scores').insert({
    username: user?.username ?? 'Guest',
    score,
  });
}

---

Publishing to CrazyGames

1. Run npm run build
2. Zip the contents of dist/ (not the folder itself)
3. Go to developer.crazygames.com
4. Click Submit a game → upload zip
5. Test in the Preview Environment
6. Submit for review (~1–2 weeks)

Two-phase launch:

• Phase 1 (2 weeks): Limited traffic, no ads, metrics collected
• Phase 2: Full launch with ads if metrics pass

CrazyGames technical limits:

Requirement	Value
Max total size	250 MB compressed
Initial download	≤ 50 MB
Mobile initial	≤ 20 MB
Max files	1,500

---

Local Dev Tips

Command	What it does
npm run dev	Serves on http://localhost:8000
npm run build	Produces dist/index.html

• Use http://localhost — not file:// (SDK won't work over file://)
• All asset paths must be relative (no absolute paths or localhost references in production code)

---

Star History

Watch this repo grow! If you find it useful, star it to help others discover it.

---

Support & Follow

If this template helped you ship your game:

• Star this repo — github.com/Riteshp2001/CrazyGameTemplate
• Follow me on GitHub — github.com/Riteshp2001 for more game dev
• Check out my Portfolio — riteshd2001.vercel.app
• Open an issue if you find a bug or want a feature

---

License

MIT — free to use for personal and commercial projects.

---

Based on CrazyGames SDK v3. For the latest SDK docs: docs.crazygames.com