TRY IT FREE

Paste a codeblock. Preview updates ~1s after you stop typing. No signup, no save.

ENGINE

SOURCE

// hey. this is your game now. mess with it, break it, save it, run it again.
// its a little ship dodging rocks. dumb on purpose. it works.
// once you see it work the rest is just... variations on this.
//
// the engine gives you a few things to call: setCanvas, button, clearScreen,
// drawSprite, drawPlayfield, drawText, setColor, sound.tone, sound.noise,
// collision.*, score, lives, gameOver(), saveHighScore().
// dont worry abt memorizing those. you'll pick em up by stealing from this file.

// these arrays are pictures. 1 = pixel on, 0 = pixel off.
// squint and you can literally see the ship in the binary lol
const SHIP = [
  0b00011000,
  0b00011000,
  0b00111100,
  0b01111110,
  0b11111111,
  0b11011011,
  0b10011001,
  0b00011000,
];
const ROCK = [
  0b00111100,
  0b01111110,
  0b11111111,
  0b11111111,
  0b01111110,
  0b00111100,
];

// all the rocks falling on screen right now. starts empty.
let rocks = [];

// onInit runs ONCE when the game boots. think of it like
// "set the table before dinner."
// the parameter can be named anything — older examples call it \`e\`,
// new code uses \`engine\` because it reads better and doesn't clash
// with JS's catch(e) / event(e) habits. same object either way.
function onInit(engine) {
  // 160x192 is the default screen. you dont have to call this.
  // but its nice to be explicit so future-you knows the size.
  engine.setCanvas({ width: 160, height: 192 });
  engine.state.x = 76;     // ship starts roughly in the middle
  engine.state.y = 168;    // and near the bottom
  engine.state.tick = 0;   // we'll use this as a little internal clock
  rocks = [];
  engine.score = 0;
  engine.lives = 3;
}

// onFrame runs ~60 times a second. forever. this is where the game lives.
function onFrame(engine, input) {
  const s = engine.state;

// ok so this moves the ship left/right.
  // dont touch unless u want them to fly off screen lol
  if (input.left)  s.x = Math.max(0,   s.x - 2);
  if (input.right) s.x = Math.min(152, s.x + 2);

// tick goes up every frame. we use it to time stuff
  // (like "spawn a rock every N frames").
  s.tick++;

// spawn rate gets faster as you score. cute lil difficulty curve.
  const spawn = Math.max(10, 32 - Math.floor(engine.score / 20));
  if (s.tick % spawn === 0) {
    rocks.push({ x: (Math.random() * 152) | 0, y: -8, vy: 1 + Math.random() * 1.4 });
  }

// gravity. or whatever. they fall.
  for (const r of rocks) r.y += r.vy;
  // throw out the ones that left the screen so the list doesnt grow forever
  rocks = rocks.filter(r => r.y < 200);

// wipe + redraw the background every frame.
  // (yes EVERY frame. thats just how this works.)
  engine.clearScreen(0);
  engine.setColor('bg', 0);
  engine.setColor('pf', 82);
  engine.drawPlayfield(0b11111000000000000001, 0b10000000000000000111, false, 192);

// draw the ship
  engine.setColor('player0', 30);
  engine.drawSprite('player0', s.x, s.y, SHIP);

// draw the rocks + crash check
  engine.setColor('player1', 38);
  for (const r of rocks) {
    engine.drawSprite('player1', r.x, r.y | 0, ROCK);
    // change the 7 to like 3 if u want it brutal.
    // change it to like 14 if u want it forgiving.
    if (Math.abs(r.x - s.x) < 7 && Math.abs((r.y | 0) - s.y) < 7) {
      engine.lives--;
      engine.sound.noise(0, 0.18, 0.32);  // little crunch sound
      r.y = 999;                       // boot it offscreen so it stops hitting us
      if (engine.lives <= 0) { engine.gameOver(); return; }
    }
  }

// bump the score every 6 frames so it climbs at a nice pace.
  if (s.tick % 6 === 0) engine.score++;

// HUD. engine.buttonText('fire') is the magic part — it returns the DISPLAY
  // STRING for the current controller and swaps live: SPACE on keyboard, A on
  // xbox, X on playstation, B on switch, FIRE on touch. To check if the button
  // is actually PRESSED, use input.fire (boolean). Never confuse the two.
  engine.drawText(2, 2, 'SCORE ' + engine.score, 14);
  engine.drawText(110, 2, 'LIVES ' + engine.lives, 6);
}

PREVIEW

Like it? Open the game builder to save drafts and mint share links.