Your first game

Your first game is Zoom Out, the sample game: a photo starts zoomed in six times, pulls back over 15 seconds, and the faster a viewer names it, the more they score. The whole game is about 30 lines, and it runs as-is in the lab.

zoom-out.js

Playcade.game({
  id: 'zoom-out',
  title: 'Zoom Out',
  tagline: 'A photo starts zoomed all the way in. Name it before it pulls back.',
  inputs: ['guess'],
  rounds: 2,
  content: [
    { answer: 'pizza', also: ['pizza slice', 'a pizza'], photo: 'photos/zoom-pizza.jpg' },
    { answer: 'pineapple', also: ['ananas'], photo: 'photos/zoom-pineapple.jpg' },
  ],

  async round({ item, show, chat, phone, house, reveal }) {
    const pic = show.image(Playcade.asset(item.photo), { zoom: 6 })
    phone.prompt({ text: 'What is it?' })
    house.answer(item.answer, { wrong: ['cake', 'flower', 'a planet', 'cheese'] })

    chat.onAnswer((player, text, { at }) => {
      if (text.matches([item.answer, ...item.also])) player.correct(1000 - at * 40)
    })

    await pic.zoomOut({ seconds: 15 })
    await reveal("It's a " + item.answer)
  },
})

What each part does

1. The definition. id, title and inputs are required. content holds one item per round; the runtime shuffles it, and rounds caps how many are played.

2. The picture. show.image() puts the photo in the game area, zoomed in six times, and returns a handle you animate later.

3. Phones and the house. phone.prompt() sets what phone players see. house.answer() lets the house player guess on quiet rounds, using the wrong answers you give it.

4. Scoring. chat.onAnswer() gets every guess from chat and phones. text.matches() checks it loosely, and player.correct() scores it once, here 1000 points minus 40 for every second that passed.

5. The reveal. zoomOut() runs the timer while the picture pulls back, and reveal() closes the round and shows who got it.

When the SDK ships as a package

Today the runtime is a plain script, so the object goes to Playcade.game(). Once the SDK ships as a package, the same object goes to game(), and nothing else changes:

import { game } from '@playcade/sdk'
export default game({ /* the same definition */ })