Quick start: your first game in 5 minutes

In five minutes you'll make a tiny game called Dot Dash, add the Twiddle Play SDK, and send it for review. A yellow dot jumps around the screen. Tap it as many times as you can in 15 seconds.

You need a computer with Chrome and a text editor. No installs, no build tools.

1-11. Make the game#

Make a new folder called dot-dash. Inside it, create a file called index.html and paste this in:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dot Dash</title>
  <link rel="icon" href="data:,">
  <style>
    html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1442; }
    body { color: #fff; font: 600 20px system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
    #hud { position: absolute; top: 16px; left: 0; right: 0; text-align: center; }
    #dot { position: absolute; width: 72px; height: 72px; border: 0; border-radius: 50%; background: #ffd23f; touch-action: manipulation; }
    #end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    #end[hidden] { display: none; }
    #again { min-width: 200px; min-height: 52px; border: 0; border-radius: 26px; background: #ffd23f; color: #1b1442; font: 700 18px system-ui, sans-serif; }
  </style>
</head>
<body>
  <div id="hud"></div>
  <button id="dot" aria-label="Tap the dot"></button>
  <div id="end" hidden>
    <p id="result"></p>
    <button id="again">Play again</button>
  </div>

  <script>
    const dot = document.getElementById('dot');
    const hud = document.getElementById('hud');
    const end = document.getElementById('end');
    let score = 0;
    let timeLeft = 15;
    let timer = null;

    function showHud() {
      hud.textContent = 'Score ' + score + ' · ' + timeLeft + ' s';
    }

    function moveDot() {
      dot.style.left = Math.random() * (window.innerWidth - 72) + 'px';
      dot.style.top = 60 + Math.random() * (window.innerHeight - 132) + 'px';
    }

    function start() {
      score = 0;
      timeLeft = 15;
      end.hidden = true;
      dot.hidden = false;
      moveDot();
      showHud();
      timer = setInterval(tick, 1000);
    }

    function tick() {
      timeLeft -= 1;
      showHud();
      if (timeLeft <= 0) finish();
    }

    function finish() {
      clearInterval(timer);
      dot.hidden = true;
      document.getElementById('result').textContent = 'You tapped the dot ' + score + ' times!';
      end.hidden = false;
    }

    dot.addEventListener('pointerdown', function () {
      score += 1;
      showHud();
      moveDot();
    });

    document.getElementById('again').addEventListener('click', start);
    start();
  </script>
</body>
</html>

What it does: the <style> block makes a full-screen purple page and a big round yellow button. The script moves the dot to a random spot each time you tap it, counts down from 15 once a second, and shows your score at the end.

Check it: double-click index.html to open it in Chrome. Tap (or click) the dot. After 15 seconds you should see "You tapped the dot 12 times!" and a Play again button.

1-22. Add the SDK#

The SDK lets your game talk to the Twiddle Play app: ask for ads, and pause when the app tells it to.

1. Download twiddleplay.js and save it in your dot-dash folder as twiddleplay-sdk.js (right-click the link, then "Save link as…").
2. Add these two lines just above your <script> tag:

  <script src="/sdk/v1/twiddleplay.js"></script>
  <script src="twiddleplay-sdk.js"></script>

3. At the bottom of your script, swap the last two lines for these:

    document.getElementById('again').addEventListener('click', async function () {
      await TwiddlePlay.showInterstitial(); // a natural break: the app may show an ad here
      start();
    });

    TwiddlePlay.on('pause', function () { paused = true; });
    TwiddlePlay.on('resume', function () { paused = false; });
    TwiddlePlay.ready().then(start);

4. Make the timer respect paused. Add let paused = false; under let timer = null;, and make the first line of tick() skip a beat while paused:

    function tick() {
      if (paused) return;
      timeLeft -= 1;
      showHud();
      if (timeLeft <= 0) finish();
    }

What it does:

• The first <script> tag loads Twiddle Play's own copy of the SDK. It only exists on Twiddle Play. The second loads your copy, so the game also works on your computer. Whichever loads first wins; the other does nothing.
• TwiddlePlay.ready() waits until the SDK has found the app (or knows it's on your computer), then starts the game.
• showInterstitial() asks for an ad between games, when play has stopped anyway. The app decides whether one actually shows. Either way, the next game starts when the call finishes.
• pause and resume arrive when an ad covers your game or the player switches apps. The timer stops instead of running out behind their back.

1-33. Zip it#

Your folder now holds two files: index.html and twiddleplay-sdk.js. Zip them.

• Windows: right-click the dot-dash folder, then Send to → Compressed (zipped) folder.
• Mac: right-click the dot-dash folder, then Compress "dot-dash".
• Terminal: cd dot-dash && zip -r ../dot-dash.zip .

Zipping the folder itself is fine: when every file sits inside one top folder, Twiddle Play strips that folder for you. What matters is that index.html ends up at the top of your game. More in Packaging and upload.

1-44. Create the game on the website#

1. Sign up with the Start building button at the top of this site. It's free.
2. On your Dashboard, click New game.
3. Fill in Store page basics: a title ("Dot Dash"), a tagline ("Tap the dot. Faster!"), a description of 20 characters or more, a category (Arcade), an age rating (All ages) and an orientation (Portrait).
4. Under Ads, pick Ads on to earn from this game, or Ads off. You can switch later in the game's Settings tab.
5. Click Create game. You land on the game's Versions tab.

1-55. Upload and Test it#

1. In Upload your game, drop dot-dash.zip on the box (or click it to choose the file).
2. Optionally write a note under What's new?. Reviewers read it first.
3. Click Upload v1. You'll see "Checking your zip…", then v1 appears with its upload checks:
   • Size and Files: how big your game is.
   • SDK detected: your files mention TwiddlePlay.
   • Works offline: your files don't link to other websites.
4. Click Test it next to v1. Your game opens in a phone frame, served exactly the way the app will serve it.
   • Switch between Portrait and Landscape at the top.
   • The SDK activity panel lists every call your game makes, like ready() and showInterstitial().
   • In the preview, every ad call plays a 3-second test ad, so you can check your ad moments without waiting. Tick App ad limits to apply the app's real timing instead.

If the upload is refused, the message says exactly what's wrong. Every error message, and how to fix it has the full list.

1-66. Finish the store page and submit#

1. Open the Store page tab and upload an icon: a square PNG, JPG or WebP, 256 to 1024 pixels wide, at most 1 MB. 512×512 looks best.
2. Check your tagline and description, and add up to 6 screenshots if you like (they help players pick your game).
3. Back on Versions, click Submit for review next to v1, check the list in the dialog, and confirm with Submit for review.

That's it. A reviewer plays your game on a phone. If it's approved, it goes live in the app. If not, you get a note saying what to fix; upload a fixed zip as v2 and submit again. See the review guidelines.

Next steps#

• Build a real game step by step: the Firefly Jar tutorial adds a game loop, sound, rounds, a rewarded button and saving.
• Start your own game from the starter template.
• Let a free AI write your next game: Make a game with AI.
• Play private builds on your own phone, straight from GitHub: GitHub + Developer playground.
• Learn where ads earn the most without annoying players: Ads and earnings.