✦ 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. Never coded before? No problem. You copy one block of code, paste it into Notepad, save it, and you have a real game. Play it below, then make your own.

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

Make your own in 3 steps

Never written code before? Perfect. You do not need to understand any of it yet. Just copy, paste and save. The whole game is one block of code, and it already includes everything.

📱 On a tablet, phone or Chromebook? There is no Notepad on those, so skip these steps and use the live editor just below instead. You can build your game and save it right there, no computer needed.

Copy the whole game

Click the button below. It copies every single line, the full page and the game together. Do not leave any of it out.

Paste it into Notepad

Open Notepad (it is free on every Windows PC). Click inside the empty window and paste with Ctrl and V. You will see a wall of code. That is normal.

Save it as a web page, then open it

Click File, then Save As. In the "Save as type" box choose All Files. Name it dotsmash.html and save. Now find that file and double click it. Your game opens in the browser. Play it!

Now change the game, right here

On a tablet, Chromebook or phone? This is your spot, no Notepad needed. Edit the code on the left and your game updates on the right. Try changing the colour, the size, or the timer. Your work saves on this device as you go, and when you are happy, tap 💾 Save my game to keep the file. If it breaks, press Reset. You cannot damage anything.

Your code

Your game (updates as you type)

Try these first: find #6366f1 near the top and type hotpink in its place · find the two 72px values and try 40px for both · find startTime = 15 and try 8. Click into the code, change the value, and the game updates on its own about half a second after you stop typing.

💾 Keeping your game: your changes save on this device automatically, so you can close the tab and come back later. Tap Save my game to download it as dotsmash.html into your Files or Downloads. Open that file any time to play it, or send it to a friend to share.

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.

How it works (the 4 parts inside)

You already have a working game from the steps above. This is just a peek at what the code is doing. Each part lives inside the <script> section of the page you saved. Read it if you are curious, or skip it and go play.

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.

Feeling brave? Type it in yourself

Most people copy the whole game above. But if you want to feel like a real coder, download the empty starter and type the four parts into the <script> section yourself, using the code below as your guide.

👩‍🏫 For teachers & parents

Running this with a group?

Optional extras below: a one-page printable handout and a minute-by-minute lesson plan. Learners can ignore these.

📄 One-page printable handout (steps + quiz)

Build a Game in 15 Minutes

Dot Smash · Notepad Handout · jvdesignstudio.co.uk

Aim: make, save and play your own browser game. By the end you can: (1) create and run your own game file, and (2) name the three ideas behind a game and change one value to make it yours.

Part 1: Get your game running (copy, paste, save)

On the web page, click Copy all the code (it copies the whole game in one go).
Open Notepad (it comes free on every Windows PC) and paste with Ctrl and V.
Click File, then Save As. In the "Save as type" box choose All Files, then name it dotsmash.html.
Double click the saved file. It opens in your browser and your game runs. Play it!
To change it: edit in Notepad, press Ctrl and S to save, then press F5 in the browser to refresh.

Part 2: What the code does (the 4 parts inside)

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;
}

Part 3: Check you have got it

What are the three ingredients in almost every game? (reacting to input, randomness, a timer)
Which ingredient makes the dot jump to a new spot each click? (randomness)
What ends the game? (the timer reaching zero)

Make it yours: change the dot colour (#6366f1), the size (72px), or the start time (15), then save and refresh. Stuck? If it breaks, press Ctrl and Z to undo until it works again.

📋 Minute-by-minute lesson plan & tips

0 to 2 min (Intro)	Welcome, share the aim and the two objectives. Hook: play the finished game on screen. "By the end you will have made this yourself."
2 to 5 min (Core 1)	Change a game. Everyone opens the editor on this page. The game is already running, so they change the colour and size and watch it update live. First win with zero setup.
5 to 8 min (Core 2)	The three ingredients. Point out reacting to input, randomness, and the timer in the running game.
8 to 11 min (Core 3)	Make it yours. Everyone changes one value (colour, dot size, or timer), saves and refreshes.
11 to 14 min (Assess)	Check understanding: the three quick questions below, plus confirm every screen shows a running, edited game.
14 to 15 min (Conclude)	Recap the aim and the three ingredients, invite one word feedback, and thank the group.

On the projector: make every change on the big screen first, wait for the game to update so they see the effect, then let learners do the same in their own editor. Model one change, then set them off.

Inclusion: pair less confident learners with a buddy, keep the printed handout to hand, and offer a genuine "share or pass" when asking questions. A ready made game file is the safety net so a tech hiccup never leaves anyone stuck.

Running short on time? Drop Core 3 (the edit) and go straight to the check questions. 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!