✦ 15-Minute Build · No Sign-Up · Total Beginners

Build a Game in 15 Minutes

Meet Dot Smash: click the dot for points, it runs away, beat the clock. You'll build the whole thing from four short steps of code, no experience needed. Play it below, then scroll down and make your own.

👆 This is the finished game, so go on, play a round.

Three ideas make almost every game

You don't need to memorise anything today. Every game, from Pong to the biggest blockbuster, leans on the same three moves. Dot Smash uses all three.

👆

Reacting to input

The program listens for the player, a click, a key or a tap, then responds.

🎲

Randomness

Math.random() is the surprise behind enemies, dice rolls and loot drops.

⏱️

A timer

A ticking clock creates pressure, and gives your game a start, middle and end.

Build it in 4 steps

Open the starter file, then type each step between the <script> tags. Save, refresh, and watch what changed. Each step runs on its own.

STEP 1

It reacts to you

Grab the dot and count clicks. This is the heart of every game, a program responding to a player.

let score = 0;
const dot = document.getElementById("dot");

dot.onclick = function () {
  score = score + 1;
  document.getElementById("score").textContent = score;
};

💡 Try it: click the dot and the score climbs. That's it. You've made something interactive.

STEP 2

The dot runs away

Add a moveDot() function, then call it inside the click. Now the dot leaps to a random spot every time, so suddenly it's a challenge.

// add this new function
function moveDot() {
  dot.style.left = Math.random() * (window.innerWidth - 72) + "px";
  dot.style.top  = Math.random() * (window.innerHeight - 72) + "px";
}

// add this ONE line inside the click, after the score line:
  moveDot();

💡 The trick: Math.random() just means "pick a surprise number." It's how nearly every game does the unexpected.

STEP 3

A countdown clock

Games need pressure and an ending. This ticks from 15 down to 0, once per second.

let time = 15;
const timer = setInterval(function () {
  time = time - 1;
  document.getElementById("time").textContent = time;
  if (time === 0) endGame();
}, 1000);

💡 Heartbeat: setInterval means "do this every 1 second." That ticking is what makes a game feel urgent.

STEP 4

Game over

When the clock hits zero, hide the dot and show the final score. Start, play, finish. A complete game.

function endGame() {
  clearInterval(timer);
  dot.style.display = "none";
  const over = document.getElementById("over");
  over.style.display = "block";
  over.textContent = "Game over! Score: " + score;
}

🎉 Done. Play a full round. You just wrote every line of a working game.

Grab the starter & build along

The starter has the page and styling done for you, with an empty <script> waiting. Download it, open it in your browser to see the dot, then edit it in any text editor (Notepad works) and refresh.

Build a Game in 15 Minutes

Dot Smash · Notepad Handout · jvdesignstudio.co.uk

Part 1: Get set up with Notepad

Open Notepad (it comes free on every Windows PC).
Paste in the starter code (use the Download button above, or copy it from the screen).
Click File, then Save As. In the "Save as type" box choose All Files, then name it dot-smash.html.
Double click the saved file. It opens in your web browser and you see the dot.
To change the game: edit in Notepad, press Ctrl and S to save, then press F5 in the browser to refresh and see it update.

Part 2: Type these 4 steps between the <script> tags

Step 1: count the clicks

let score = 0;
const dot = document.getElementById("dot");

dot.onclick = function () {
  score = score + 1;
  document.getElementById("score").textContent = score;
};

Step 2: make the dot run away

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

// then add this line inside the click:
  moveDot();

Step 3: the countdown clock

let time = 15;
const timer = setInterval(function () {
  time = time - 1;
  document.getElementById("time").textContent = time;
  if (time === 0) endGame();
}, 1000);

Step 4: game over

function endGame() {
  clearInterval(timer);
  dot.style.display = "none";
  const over = document.getElementById("over");
  over.style.display = "block";
  over.textContent = "Game over! Score: " + score;
}

Stuck? The code must sit between <script> and </script>, and the names must match exactly: dot, score, time, over. If it breaks, press Ctrl and Z to undo until it works again.

Running this as a class? Facilitator timing & tips

0 to 2 min	Show the finished demo. "By the end, you'll have built this from nothing."
2 to 5 min	Step 1. Count clicks. First win: the score reacts to you.
5 to 8 min	Step 2. The dot runs away. This is the "now it's fun" moment.
8 to 11 min	Step 3. The countdown timer adds pressure.
11 to 13 min	Step 4. Game over screen. A complete game.
13 to 15 min	Everyone plays and changes one thing: dot size, start time, or colour.

If something breaks: the code must sit between the <script> and </script> tags, and names must match exactly (dot, score, time, over). Golden rule for the room: "if it breaks, undo with Ctrl/Cmd+Z until it works."

Running short on time? Skip typing Steps 3 and 4 and paste the finished code, then spend the saved minutes letting everyone play and tweak. Finishing with a working game beats running over.

Hungry for more?

Build a whole game with our free step-by-step workshops.

🔧 Browse Workshops →

Copied!