CodeForMe + Canva Pages: Build & Publish a Towers of Hanoi Game in 10 Minutes (No Coding!)

Built a classic logic game in minutes.

Didn’t write a single line of code. Didn’t check the code. Didn’t need to. And yet, everything worked beautifully, even on mobile.

This is the story, and breakdown so you can do it too, of how I used Canva’s new AI toolset, specifically CodeForMe, to build and publish a fully playable, mobile-responsive Towers of Hanoi game… in under 10 minutes.

Oh and did I mention it follow my school’s Branding guidelines! Bonus points!

Scroll to the bottom to find the full prompt I used and feel free to copy and adapt it for your own use.
You will also find a full YouTube walkthrough video here:

Why I Chose the Towers of Hanoi

The Towers of Hanoi puzzle is timeless: logical, visually clear, and conceptually powerful. It introduces recursion, algorithmic thinking, and strategic planning, all under the guise of a simple drag-and-drop game.

But while it’s often used in older key stages or computer science classes, I wanted to bring it into a Key Stage 1 or 2 classroom context, as an open-ended exploration tool that younger learners could use to think logically and reflect on their problem-solving.

So instead of searching for an existing online version (with ads, logins, or clunky interfaces), I decided to create my own.

The Power of Canva + CodeForMe

Here’s how the process unfolded:

I opened Canva and selected the CodeForMe tool (you can access it via the “Canva AI” menu on the left or at the top).
I pasted in my detailed prompt (which you can find below).
Canva generated a clean, complete HTML5 game using only native <canvas> and JavaScript.
I clicked one button, yes, one, to embed it straight into a Canva Page that I could instantly publish and share.
Within minutes, I had a fully responsive, mobile-friendly game, hosted and styled in a way that matched my needs.

No IDE.
No servers.
No deployment headaches.
No reading or debugging code.

And the final product? Polished and playable on all devices.

AI Features That Make This a Game-Changer for Educators

Canva’s AI toolset is evolving quickly, and CodeForMe is proof of just how useful that evolution is becoming, especially for educators, creators, and edtech enthusiasts who want to build learning tools without having to become developers.

Here’s what stood out:

Smart Prompt Interpretation
My prompt included layout details, rules, interactivity logic, visual design, and even mobile-responsiveness. CodeForMe interpreted all of it correctly. Not a single key element was missing.
One-Click Web Publishing
After generation, Canva offers the option to embed the code directly into a Canva Page or slideshow, no copy-pasting needed. This makes the output not only easy to preview, but incredibly fast to deploy. Whether for your students, team, or wider audience.
Clean Design, Intuitive UX
The game just worked. Button interactions were smooth. Discs were colourful and intuitive. Everything looked right across screen sizes. AND I added a follow up prompt to use my School’s branding, which it applied in no time!

The Whole Build Took about 10 Minutes

That is really the time it took to write the code, 20 min if I include the writing of the prompt, generating the game, embedding it into a page, and clicking “publish.”

To be honest, I didn’t even bother checking the code. Not because I didn’t care, but because I didn’t need to. That said, now that I think about it… there’s probably a hidden teaching opportunity there.

💡 Imagine showing students the actual generated HTML5 <canvas> code and asking them to reverse-engineer what each part does. It’s a fantastic way to demystify what AI can generate and to reinforce key computing concepts.

Play the Game Here

👉 https://hanoitowers.my.canva.site/

👉 https://tower-of-hanoi-demo.my.canva.site/ (School Branded version)

And here is my self-hosted version on GitHub Pages: More about how to do this in future blog post: https://sethidc.github.io/TowerOfHanoi/
It’s actually really easy to get your hands on the source code after publishing it through Canva Pages! Look for the Frame Source, and voila! There it is!

Test it on mobile or desktop. Restart the game. Change difficulty levels. Reflect on the logic. Use it in your computing classroom, a logic-themed maths lesson, or even as a starter challenge in a digital skills workshop.

The Full Prompt I Used (Steal This!)

But if you do, why not link people asking about it back to this blog, or ReadySetCompute…it would certainly make us happy!

Create a Towers of Hanoi-style game with difficulty levels.

The game should meet the following specifications:

The game starts with a difficulty selection screen:
- Let the player choose the number of discs (from 2 to 5) using buttons or a dropdown menu.
- After selection, initialize the puzzle with the chosen number of discs stacked on the leftmost peg.

Game mechanics are:
- There are three vertical pegs, evenly spaced across the canvas.
- Discs begin on the leftmost peg, ordered from largest (bottom) to smallest (top).
- Discs must follow standard Towers of Hanoi rules:
  - Only one disc can be moved at a time.
  - A disc can only be placed on an empty peg or on top of a larger disc.

Controls:
- Players interact using the mouse:
  - Click on a peg to pick up the top disc (if any).
  - Click another peg to place the selected disc (if the move is valid).
- Invalid moves should be ignored (e.g., trying to place a larger disc on a smaller one).

Visuals:
- Pegs are drawn as vertical lines.
- Discs are horizontal rectangles:
  - Width corresponds to disc size.
  - All discs have the same height.
  - Use different colors for each disc for clarity.
- Highlight a selected disc or peg during a move.

Game feedback:
- Display the number of moves made.
- Show the minimum number of moves possible for the chosen difficulty (2^n - 1).
- When the puzzle is solved (all discs in order on the rightmost peg):
  - Display a congratulatory message with the player's move count.
  - Also, allow restarting or selecting a new difficulty.

The entire game should be mobile first designed and adjust to work well on both desktop and mobile devices.  
Optionally allow for installing as PWA.

Additional requirements:
- Use only native HTML5, <canvas> elements, and JavaScript.
- All logic, visuals, and interaction should be included in a single HTML file.
- No external libraries, assets, or sounds needed. Keep it simple and focused on gameplay.

Want to Take It Further? Modify the Prompt

Once you’ve built your first version, try evolving it:

Add visual or sound effects or background music.
Introduce a timer or scoring system.
Change the theme; maybe animals, blocks, or space discs?
Include an instruction panel or “How to Play” guide.
Add a classroom scoreboard using local storage.
Turn it into a collaborative challenge where students solve it together and reflect.

Some of my final thoughts on this

This isn’t just a coding shortcut; it’s a mindset shift. As teachers, we can now create custom digital learning experiences using nothing but thoughtful prompts and a few minutes of creativity. That’s powerful.

Whether you’re exploring computing, logic, storytelling, or just want to make your lessons more interactive with tools like CodeForMe and Canva Pages. They offer an incredibly low barrier to entry and high return on creativity.

Let’s not just consume games. Let’s create them: with our learners, for our learners.