No-code setup, editable code

Browser Game Maker with Live JavaScript Preview

Choose a template, adjust the game, edit the source, and download a runnable project—all in your browser.

● No sign-up● No code upload● Full project download

4 playable templates3 project shapesSandboxed previewLocal draft recovery

Sandboxed preview

Neon Breakout

vanilla

Score0

Lives3

Level1

Device best0

← → or A D · drag on touch

Editable project

Source code

/* JS Breakouts Neon Breakout — original geometry-only canvas implementation */
const CONFIG = {"game":"breakout","framework":"vanilla","difficulty":"normal","controls":"keyboard-touch","theme":"neon","sound":true,"reducedEffects":false,"variant":"classic","palette":"arcade","speed":1,"lives":3,"size":1,"colors":{"bg":"#08111f","panel":"#111e33","primary":"#2ad1c9","secondary":"#8b5cf6","text":"#f4f7ff","danger":"#fb7185"}};
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const W = 800;
const H = 500;
const keys = new Set();
let status = 'ready';
let muted = !CONFIG.sound;
let score = 0;
let lives = CONFIG.lives;
let level = 1;
let last = 0;
let raf = 0;
let pointerStart = null;
let world = {};
let audioContext = null;
const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
let reducedEffects = Boolean(CONFIG.reducedEffects || reducedMotionQuery.matches);
const ui = {
  score: document.getElementById('score'),
  best: document.getElementById('best'),
  lives: document.getElementById('lives'),
  level: document.getElementById('level'),
  status: document.getElementById('status'),
  play: document.getElementById('play'),
  stop: document.getElementById('stop'),
  restart: document.getElementById('restart'),
  mute: document.getElementById('mute')
};
const highScoreKey = 'jsbreakouts:high:' + CONFIG.game;
let highScore = readStoredNumber(highScoreKey);
try { muted = localStorage.getItem('jsbreakouts:muted') === 'true' || !CONFIG.sound; } catch {}

function readStoredNumber(key) {
  try { return Number(localStorage.getItem(key) || 0); } catch { return 0; }
}

function storeValue(key, value) {
  try { localStorage.setItem(key, String(value)); } catch {}
}

function resizeCanvas() {
  const ratio = Math.min(window.devicePixelRatio || 1, 2);
  canvas.width = Math.round(W * ratio);
  canvas.height = Math.round(H * ratio);
  ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
}

function tone(kind) {
  if (muted || !CONFIG.sound) return;
  const AudioCtor = window.AudioContext || window.webkitAudioContext;
  if (!AudioCtor) return;
  audioContext ||= new AudioCtor();
  if (audioContext.state === 'suspended') audioContext.resume();
  const frequencies = { paddle: 220, brick: 520, score: 660, life: 130, hop: 360, gameover: 90 };
  const oscillator = audioContext.createOscillator();
  const gain = audioContext.createGain();
  oscillator.type = kind === 'gameover' ? 'sawtooth' : 'square';
  oscillator.frequency.value = frequencies[kind] || 300;
  gain.gain.setValueAtTime(0.035, audioContext.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + (kind === 'gameover' ? 0.22 : 0.075));
  oscillator.connect(gain);
  gain.connect(audioContext.destination);
  oscillator.start();
  oscillator.stop(audioContext.currentTime + (kind === 'gameover' ? 0.23 : 0.08));
}

function syncUi() {
  if (score > highScore) {
    highScore = score;
    storeValue(highScoreKey, highScore);
  }
  if (ui.score) ui.score.textContent = String(score);
  if (ui.best) ui.best.textContent = String(highScore);
  if (ui.lives) ui.lives.textContent = String(lives);
  if (ui.level) ui.level.textContent = String(level);
  if (ui.status) {
    ui.status.dataset.state = status;
    ui.status.textContent = status === 'ready' ? 'Ready to play' : status === 'playing' ? 'Playing' : status === 'paused' ? 'Paused' : status === 'stopped' ? 'Stopped' : 'Game over';
  }
  if (ui.play) ui.play.textContent = status === 'playing' ? 'Pause' : status === 'paused' ? 'Resume' : status === 'gameover' ? 'Play again' : 'Play';
  if (ui.mute) {
    ui.mute.textContent = muted ? 'Unmute' : 'Mute';
    ui.mute.setAttribute('aria-pressed', String(muted));
  }
}

const send = (type, payload = {}) => {
  if (window.parent !== window) window.parent.postMessage({ source: 'js-breakouts-preview', type, payload }, '*');
};

function resetWorld() {
  score = 0;
  lives = CONFIG.lives;
  level = 1;
  if (CONFIG.game === 'breakout') resetBreakout();
  if (CONFIG.game === 'pong') resetPong();
  if (CONFIG.game === 'snake') resetSnake();
  if (CONFIG.game === 'sky-hopper') resetHopper();
  emitScore();
  draw();
}

function emitScore() {
  syncUi();
  send('SCORE_UPDATE', { score, lives, level });
}

function start() {
  if (status === 'gameover') resetWorld();
  status = 'playing';
  canvas.focus();
  syncUi();
  send('STATE_CHANGE', { status });
}

function pause(reason = 'user') {
  if (status !== 'playing') return;
  status = 'paused';
  syncUi();
  send('STATE_CHANGE', { status, reason });
}

function restart() {
  status = 'ready';
  resetWorld();
  syncUi();
  send('STATE_CHANGE', { status });
}

function stop() {
  status = 'stopped';
  resetWorld();
  status = 'stopped';
  syncUi();
  send('STATE_CHANGE', { status });
}

function gameOver() {
  status = 'gameover';
  tone('gameover');
  syncUi();
  send('GAME_OVER', { score });
  send('STATE_CHANGE', { status });
}

function difficultyScale() {
  return CONFIG.difficulty === 'easy' ? 0.8 : CONFIG.difficulty === 'hard' ? 1.22 : 1;
}

function resetBreakout() {
  const wide = CONFIG.variant === 'wide-paddle' ? 1.35 : 1;
  const fast = CONFIG.variant === 'fast-ball' ? 1.25 : 1;
  world = {
    paddle: { x: W / 2 - 66 * wide, y: H - 42, w: 132 * wide * CONFIG.size, h: 14 },
    ball: { x: W / 2, y: H - 65, r: 9 * CONFIG.size, vx: 250 * CONFIG.speed * fast, vy: -250 * CONFIG.speed * fast },
    bricks: []
  };
  const rows = CONFIG.difficulty === 'hard' ? 7 : 6;
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < 10; col++) {
      world.bricks.push({ x: 34 + col * 74, y: 56 + row * 30, w: 64, h: 18, alive: true, row });
    }
  }
}

function updateBreakout(dt) {
  const p = world.paddle;
  const b = world.ball;
  const move = 430 * dt;
  if (keys.has('arrowleft') || keys.has('a')) p.x -= move;
  if (keys.has('arrowright') || keys.has('d')) p.x += move;
  p.x = Math.max(10, Math.min(W - p.w - 10, p.x));
  b.x += b.vx * dt;
  b.y += b.vy * dt;
  if (b.x < b.r || b.x > W - b.r) { b.vx *= -1; b.x = Math.max(b.r, Math.min(W - b.r, b.x)); }
  if (b.y < b.r) { b.vy = Math.abs(b.vy); }
  if (b.vy > 0 && b.y + b.r >= p.y && b.y - b.r <= p.y + p.h && b.x >= p.x && b.x <= p.x + p.w) {
    b.y = p.y - b.r;
    b.vy = -Math.abs(b.vy);
    b.vx += ((b.x - (p.x + p.w / 2)) / p.w) * 120;
    tone('paddle');
  }
  for (const brick of world.bricks) {
    if (!brick.alive) continue;
    if (b.x + b.r > brick.x && b.x - b.r < brick.x + brick.w && b.y + b.r > brick.y && b.y - b.r < brick.y + brick.h) {
      brick.alive = false;
      b.vy *= -1;
      score += 10;
      tone('brick');
      emitScore();
      break;
    }
  }
  if (world.bricks.every((brick) => !brick.alive)) {
    level += 1;
    const oldScore = score;
    resetBreakout();
    score = oldScore;
    emitScore();
  }
  if (b.y > H + b.r) {
    lives -= 1;
    tone('life');
    emitScore();
    if (lives <= 0) gameOver();
    else {
      b.x = W / 2; b.y = H - 65; b.vy = -Math.abs(b.vy);
      status = 'paused'; syncUi(); send('STATE_CHANGE', { status, reason: 'life-lost' });
    }
  }
}

function drawBreakout() {
  const p = world.paddle;
  const b = world.ball;
  for (const brick of world.bricks) {
    if (!brick.alive) continue;
    ctx.fillStyle = brick.row % 2 ? CONFIG.colors.secondary : CONFIG.colors.primary;
    ctx.globalAlpha = 0.82 + (brick.row % 3) * 0.06;
    ctx.fillRect(brick.x, brick.y, brick.w, brick.h);
    ctx.globalAlpha = 1;
  }
  ctx.fillStyle = CONFIG.colors.text;
  ctx.fillRect(p.x, p.y, p.w, p.h);
  ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2); ctx.fillStyle = CONFIG.colors.primary; ctx.fill();
}

function resetPong() {
  world = {
    player: { x: 28, y: H / 2 - 55, w: 14, h: 110 * CONFIG.size },
    ai: { x: W - 42, y: H / 2 - 55, w: 14, h: 110 },
    ball: { x: W / 2, y: H / 2, r: 9, vx: 285 * CONFIG.speed, vy: 180 },
    aiScore: 0
  };
}

function updatePong(dt) {
  const p = world.player, ai = world.ai, b = world.ball;
  const move = 430 * dt;
  if (keys.has('arrowup') || keys.has('w')) p.y -= move;
  if (keys.has('arrowdown') || keys.has('s')) p.y += move;
  p.y = Math.max(0, Math.min(H - p.h, p.y));
  const aiScale = CONFIG.variant === 'easy-ai' ? 0.55 : CONFIG.difficulty === 'hard' ? 0.95 : 0.72;
  ai.y += Math.sign(b.y - (ai.y + ai.h / 2)) * 340 * aiScale * dt;
  ai.y = Math.max(0, Math.min(H - ai.h, ai.y));
  b.x += b.vx * dt; b.y += b.vy * dt;
  if (b.y < b.r || b.y > H - b.r) b.vy *= -1;
  const hit = (pad) => b.x + b.r > pad.x && b.x - b.r < pad.x + pad.w && b.y + b.r > pad.y && b.y - b.r < pad.y + pad.h;
  if (b.vx < 0 && hit(p)) { b.vx = Math.abs(b.vx) * 1.025; b.vy += (b.y - (p.y + p.h / 2)) * 3; tone('paddle'); }
  if (b.vx > 0 && hit(ai)) { b.vx = -Math.abs(b.vx) * 1.025; tone('paddle'); }
  if (b.x > W + 20) { score += 1; tone('score'); emitScore(); b.x = W / 2; b.y = H / 2; b.vx = -285 * CONFIG.speed; }
  if (b.x < -20) { world.aiScore += 1; lives = Math.max(0, 5 - world.aiScore); tone('life'); emitScore(); b.x = W / 2; b.y = H / 2; b.vx = 285 * CONFIG.speed; }
  if (score >= 5 || world.aiScore >= 5) gameOver();
}

function drawPong() {
  ctx.setLineDash([12, 14]); ctx.strokeStyle = CONFIG.colors.secondary; ctx.beginPath(); ctx.moveTo(W/2, 18); ctx.lineTo(W/2, H-18); ctx.stroke(); ctx.setLineDash([]);
  ctx.fillStyle = CONFIG.colors.primary; ctx.fillRect(world.player.x, world.player.y, world.player.w, world.player.h);
  ctx.fillStyle = CONFIG.colors.secondary; ctx.fillRect(world.ai.x, world.ai.y, world.ai.w, world.ai.h);
  ctx.beginPath(); ctx.arc(world.ball.x, world.ball.y, world.ball.r, 0, Math.PI*2); ctx.fillStyle = CONFIG.colors.text; ctx.fill();
}

function resetSnake() {
  world = {
    snake: [{ x: 12, y: 10 }, { x: 11, y: 10 }, { x: 10, y: 10 }],
    dir: { x: 1, y: 0 },
    next: { x: 1, y: 0 },
    food: { x: 17, y: 10 },
    timer: 0
  };
}

function snakeDirection(x, y) {
  if (x + world.dir.x === 0 && y + world.dir.y === 0) return;
  world.next = { x, y };
}

function updateSnake(dt) {
  world.timer += dt;
  const step = (CONFIG.variant === 'speed-up' ? Math.max(0.065, 0.15 - score * 0.002) : 0.14) / CONFIG.speed / difficultyScale();
  if (world.timer < step) return;
  world.timer = 0; world.dir = world.next;
  const head = { x: world.snake[0].x + world.dir.x, y: world.snake[0].y + world.dir.y };
  const wrap = CONFIG.variant === 'wrap';
  if (wrap) { head.x = (head.x + 25) % 25; head.y = (head.y + 15) % 15; }
  const hitWall = head.x < 0 || head.x >= 25 || head.y < 0 || head.y >= 15;
  const hitSelf = world.snake.some((part) => part.x === head.x && part.y === head.y);
  if (hitWall || hitSelf) { lives = 0; emitScore(); gameOver(); return; }
  world.snake.unshift(head);
  if (head.x === world.food.x && head.y === world.food.y) {
    score += 10; tone('score'); emitScore();
    do { world.food = { x: Math.floor(Math.random()*25), y: Math.floor(Math.random()*15) }; }
    while (world.snake.some((part) => part.x === world.food.x && part.y === world.food.y));
  } else world.snake.pop();
}

function drawSnake() {
  const cellW = W / 25, cellH = H / 15;
  ctx.fillStyle = CONFIG.colors.secondary; ctx.beginPath(); ctx.arc((world.food.x+.5)*cellW, (world.food.y+.5)*cellH, 10, 0, Math.PI*2); ctx.fill();
  world.snake.forEach((part, index) => {
    ctx.fillStyle = index === 0 ? CONFIG.colors.text : CONFIG.colors.primary;
    ctx.fillRect(part.x*cellW+2, part.y*cellH+2, cellW-4, cellH-4);
  });
}

function resetHopper() {
  world = { bird: { x: 190, y: H/2, vy: 0, r: 18 * CONFIG.size }, pipes: [], spawn: 0 };
}

function hop() {
  if (status !== 'playing') start();
  world.bird.vy = -370 / difficultyScale();
  tone('hop');
}

function updateHopper(dt) {
  const bird = world.bird;
  const relaxed = CONFIG.variant === 'relaxed';
  bird.vy += (relaxed ? 760 : 920) * dt * difficultyScale();
  bird.y += bird.vy * dt;
  world.spawn -= dt;
  if (world.spawn <= 0) {
    const gap = relaxed ? 190 : CONFIG.difficulty === 'hard' ? 135 : 165;
    const center = 150 + Math.random() * 200;
    world.pipes.push({ x: W + 40, center, gap, passed: false });
    world.spawn = 1.65 / CONFIG.speed;
  }
  for (const pipe of world.pipes) {
    pipe.x -= (CONFIG.variant === 'fast' ? 250 : 205) * CONFIG.speed * dt;
    if (!pipe.passed && pipe.x < bird.x) { pipe.passed = true; score += 1; tone('score'); emitScore(); }
    const nearX = bird.x + bird.r > pipe.x && bird.x - bird.r < pipe.x + 70;
    if (nearX && (bird.y - bird.r < pipe.center - pipe.gap/2 || bird.y + bird.r > pipe.center + pipe.gap/2)) gameOver();
  }
  world.pipes = world.pipes.filter((pipe) => pipe.x > -80);
  if (bird.y < bird.r || bird.y > H - bird.r) gameOver();
}

function drawHopper() {
  ctx.fillStyle = CONFIG.colors.secondary;
  for (const pipe of world.pipes) {
    ctx.fillRect(pipe.x, 0, 70, pipe.center - pipe.gap/2);
    ctx.fillRect(pipe.x, pipe.center + pipe.gap/2, 70, H);
  }
  const bird = world.bird;
  ctx.fillStyle = CONFIG.colors.primary; ctx.beginPath(); ctx.arc(bird.x, bird.y, bird.r, 0, Math.PI*2); ctx.fill();
  ctx.fillStyle = CONFIG.colors.text; ctx.beginPath(); ctx.arc(bird.x+7, bird.y-5, 4, 0, Math.PI*2); ctx.fill();
}

function update(dt) {
  if (CONFIG.game === 'breakout') updateBreakout(dt);
  if (CONFIG.game === 'pong') updatePong(dt);
  if (CONFIG.game === 'snake') updateSnake(dt);
  if (CONFIG.game === 'sky-hopper') updateHopper(dt);
}

function drawOverlay() {
  if (status === 'playing') return;
  ctx.fillStyle = 'rgba(8, 17, 31, .72)'; ctx.fillRect(0, 0, W, H);
  ctx.textAlign = 'center'; ctx.fillStyle = CONFIG.colors.text; ctx.font = '700 30px system-ui';
  const title = status === 'ready' ? 'Ready to play' : status === 'paused' ? 'Paused' : status === 'stopped' ? 'Stopped' : 'Game over';
  ctx.fillText(title, W/2, H/2 - 8);
  ctx.fillStyle = CONFIG.colors.primary; ctx.font = '16px system-ui';
  ctx.fillText(status === 'gameover' ? 'Press Space to play again' : 'Press Space or use Play', W/2, H/2 + 26);
}

function draw() {
  ctx.fillStyle = CONFIG.colors.bg; ctx.fillRect(0, 0, W, H);
  if (!reducedEffects) {
    ctx.strokeStyle = CONFIG.colors.panel; ctx.lineWidth = 1;
    for (let x = 0; x < W; x += 40) { ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,H); ctx.stroke(); }
    for (let y = 0; y < H; y += 40) { ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(W,y); ctx.stroke(); }
  }
  if (CONFIG.game === 'breakout') drawBreakout();
  if (CONFIG.game === 'pong') drawPong();
  if (CONFIG.game === 'snake') drawSnake();
  if (CONFIG.game === 'sky-hopper') drawHopper();
  drawOverlay();
}

function loop(now) {
  const dt = Math.min(0.034, (now - last) / 1000 || 0);
  last = now;
  if (status === 'playing') update(dt);
  draw();
  raf = requestAnimationFrame(loop);
}

canvas.addEventListener('keydown', (event) => {
  if (['ArrowLeft','ArrowRight','ArrowUp','ArrowDown',' ','a','d','w','s'].includes(event.key)) event.preventDefault();
  keys.add(event.key.toLowerCase());
  if (event.key === ' ') CONFIG.game === 'sky-hopper' ? hop() : status === 'playing' ? pause() : start();
  if (CONFIG.game === 'snake') {
    if (event.key === 'ArrowLeft' || event.key.toLowerCase() === 'a') snakeDirection(-1,0);
    if (event.key === 'ArrowRight' || event.key.toLowerCase() === 'd') snakeDirection(1,0);
    if (event.key === 'ArrowUp' || event.key.toLowerCase() === 'w') snakeDirection(0,-1);
    if (event.key === 'ArrowDown' || event.key.toLowerCase() === 's') snakeDirection(0,1);
  }
  if (event.key === 'Escape') canvas.blur();
  if (event.key.toLowerCase() === 'r') restart();
});
canvas.addEventListener('keyup', (event) => keys.delete(event.key.toLowerCase()));
canvas.addEventListener('pointerdown', (event) => {
  pointerStart = { x: event.offsetX, y: event.offsetY };
  canvas.setPointerCapture(event.pointerId);
  if (CONFIG.game === 'sky-hopper') hop();
});
canvas.addEventListener('pointermove', (event) => {
  if (!pointerStart) return;
  const x = event.offsetX * W / canvas.clientWidth;
  const y = event.offsetY * H / canvas.clientHeight;
  if (CONFIG.game === 'breakout') world.paddle.x = x - world.paddle.w/2;
  if (CONFIG.game === 'pong') world.player.y = y - world.player.h/2;
});
canvas.addEventListener('pointerup', (event) => {
  if (CONFIG.game === 'snake' && pointerStart) {
    const dx = event.offsetX - pointerStart.x, dy = event.offsetY - pointerStart.y;
    if (Math.abs(dx) > Math.abs(dy)) snakeDirection(dx > 0 ? 1 : -1, 0);
    else snakeDirection(0, dy > 0 ? 1 : -1);
  }
  pointerStart = null;
});

window.addEventListener('message', (event) => {
  const data = event.data;
  if (!data || data.source !== 'js-breakouts-parent') return;
  if (data.type === 'PLAY') start();
  if (data.type === 'PAUSE') pause();
  if (data.type === 'STOP') stop();
  if (data.type === 'RESTART') restart();
  if (data.type === 'MUTE') { muted = Boolean(data.payload && data.payload.muted); syncUi(); }
});
document.addEventListener('visibilitychange', () => { if (document.hidden) pause('hidden'); });
reducedMotionQuery.addEventListener?.('change', (event) => { reducedEffects = Boolean(CONFIG.reducedEffects || event.matches); });
ui.play?.addEventListener('click', () => status === 'playing' ? pause() : start());
ui.stop?.addEventListener('click', stop);
ui.restart?.addEventListener('click', restart);
ui.mute?.addEventListener('click', () => {
  muted = !muted;
  storeValue('jsbreakouts:muted', muted);
  syncUi();
});
window.addEventListener('error', (event) => send('RUNTIME_ERROR', { message: event.message, line: event.lineno || 0 }));
window.addEventListener('unhandledrejection', (event) => send('RUNTIME_ERROR', { message: String(event.reason || 'Unhandled promise rejection') }));
setInterval(() => send('HEARTBEAT'), 2000);
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
resetWorld();
raf = requestAnimationFrame(loop);
syncUi();
send('READY', { game: CONFIG.game });

What you can build

Four small games, shaped for learning.

Each starts from original geometry and browser APIs. No remote assets, mystery dependencies, or protected game artwork.

Neon Breakout

Bounce the ball, clear the wall, and protect your last life.

← → or A D · drag on touch

Pixel Pong

Hold your side of the court against a compact local opponent.

↑ ↓ or W S · drag on touch

Grid Snake

Collect every spark without crossing your own trail.

Arrow keys or WASD · swipe on touch

Sky Hopper

Time each lift and pass through a moving skyline.

Space, click, or tap

Local by design

Your settings become source files.

The builder applies the visible configuration and assembles a trusted local project. Nothing is sent to a code execution service.

01
Choose settings
Select the game, framework, difficulty, controls, theme, and optional tuning.
02
Build trusted files
HTML, CSS, JavaScript, README, and license are assembled locally.
03
Run in isolation
A restricted iframe loads the preview without network access.
04
Keep the project
Edit the source, recover a working version, or download the complete ZIP.

Complete handoff

Inside every downloaded project

js-breakouts-your-game/Runnable source

◇index.htmlPage entry
#styles.css or src/styles.cssTheme and layout
JSgame.js or src/Framework-matched game source
npmpackage.jsonIncluded for Phaser and PixiJS
MDREADME.mdRun and customize guide
§LICENSEMIT terms
iTHIRD_PARTY_NOTICES.mdSource transparency

Builder FAQ

How the local workspace works

Is this a no-code game maker?

It can be used without writing code, but the result remains editable source. Settings cover the supported MVP variations.

Can I edit the generated JavaScript?

Yes. Edit any displayed file, run the change in the sandbox, and restore the last working version if it fails.

Can I use Phaser or PixiJS?

Yes. The downloaded projects use native Phaser or PixiJS rendering APIs and include their npm dependencies. The sandboxed on-page preview stays network-free.

How is the preview isolated?

Game code runs in a sandboxed iframe without same-origin, network, form, popup, storage, or parent-page permissions.

Can I download the project?

Yes. The browser creates a ZIP from the current files, including README, license, and third-party notices.

Is my draft saved?

The latest draft and working snapshot are saved in IndexedDB when browser storage is available.

Browser Game Maker with Live JavaScript Preview

Neon Breakout

Source code

Four small games, shaped for learning.

Neon Breakout

Pixel Pong

Grid Snake

Sky Hopper

Your settings become source files.

Choose settings

Build trusted files

Run in isolation

Keep the project

Inside every downloaded project

How the local workspace works