Build Your First Game

Go from zero to a small browser game at your-slug.siliconghetto.com.

Step 1: Sign Up

Visit siliconghetto.com and create an account. Your game gets a subdomain when you publish.

Step 2: Open the Editor

Click “New Game” in your dashboard. You’ll see three files:

  • index.html — page structure
  • game.js — game logic
  • style.css — styling (optional)

Step 3: Write Your Game

Here’s a complete game in 40 lines — a clicker where you catch falling stars:

index.html:

<canvas id="game" width="800" height="600"></canvas>
<script type="module" src="game.js"></script>

game.js:

import sg from 'https://cdn.siliconghetto.com/engine/v0.1/sg.js';

await sg.init('game', 800, 600);

let score = 0;
const stars = [];

// Spawn a star at a random X position
function spawnStar() {
    const star = sg.spawn({
        x: Math.random() * 760 + 20,
        y: -20,
        sprite: { w: 16, h: 16, r: 1, g: 0.9, b: 0.2 },
        collision: { w: 16, h: 16 },
    });
    stars.push(star);
}

// Player (controlled by mouse)
const player = sg.spawn({
    x: 400, y: 550,
    sprite: { w: 48, h: 16, r: 0.2, g: 0.6, b: 1 },
    collision: { w: 48, h: 16 },
});

sg.run({
    update() {
        // Move player to mouse
        sg.setPos(player, sg.mouseX, 550);

        // Spawn stars periodically
        if (sg.frame % 30 === 0) spawnStar();

        // Move stars down + check catches
        for (let i = stars.length - 1; i >= 0; i--) {
            const s = stars[i];
            sg.setPos(s, sg.getX(s), sg.getY(s) + 120 * sg.dt);

            if (sg.checkCollision(player, s)) {
                score++;
                sg.despawn(s);
                stars.splice(i, 1);
            } else if (sg.getY(s) > 620) {
                sg.despawn(s);
                stars.splice(i, 1);
            }
        }
    },
    draw() {
        sg.clear(0.08, 0.05, 0.15);
        sg.drawAll();
        sg.drawText(`Stars: ${score}`, 10, 10, 20, { r: 1, g: 0.9, b: 0.3 });
    },
});

Step 4: Preview

Click the preview button to see your game running in real-time. The engine handles all GPU rendering — your code just defines the logic.

Step 5: Publish

Hit “Publish” and your game goes live at your-slug.siliconghetto.com. Share it with anyone — no downloads, no installs, just click and play.

What Just Happened?

In 40 lines you used:

  • sg.spawn() — created entities with position, size, color, and collision boxes
  • sg.setPos() / sg.getX() — moved things around
  • sg.checkCollision() — detected when the player caught a star
  • sg.drawAll() — rendered everything with GPU acceleration
  • sg.drawText() — drew the score on screen

The engine compiled from Rust to WebAssembly. It uses WebGPU by default and falls back to WebGL2 only when hardware WebGPU is unavailable or unsuitable.

Next Steps