Vibe Coding a Dice Game — No Code, Playable Right Here

July 25, 2026

You can build a small program without writing a single line of code. You describe what you want in plain words, and an AI writes the code for you. People call this vibe coding. I used it to make a little dice game, and I dropped it right into this post. Press the button below and it rolls.

Try it first. We’ll get to how it was made right after.

Roll it first

You roll two dice and see the total. Land a 7 and it says lucky seven; two ones is snake eyes; a matching pair is doubles. Your roll count and best total add up next to it.

Press the button to roll the dice.

Total
0Rolls
Best

It looks simple, but the game you just rolled came together without me hand-writing the code. Let me walk through how it got here. If you want the full picture from idea to launch, I laid out the seven steps in an earlier post, Build a Web Game with AI. This one zooms in on the parts where I actually did the work.

Here’s what I told the AI

In vibe coding, your job isn’t to memorize code. It’s to say clearly what you want. I started like this.

“Make a dice game for a web page. Roll two dice, show each face as dots, and print the total underneath. One roll button is enough. Keep it clean, in blue and teal.”

The first try is rarely the final one. My first version showed the dice as plain numbers, which felt flat. So I asked again.

“Draw the dice as real pips instead of numbers, and give them a quick shake when they roll.”

Getting a rough version first and then nudging it works far better than trying to spell out everything at once. At the end I added the fun bits: pop up a note for lucky seven, and for doubles when both dice match. A handful of messages like that, and the game was done.

The code is shorter than you’d think

Nothing to be scared of here. The heart of this game is two lines: the part that rolls one die.

function rollDie() {          // one die: random 1 to 6
  return 1 + Math.floor(Math.random() * 6);
}

function roll() {
  const a = rollDie();
  const b = rollDie();
  showDice(a, b);            // update the two dice
  showTotal(a + b);         // show the total
}

The Math.random() part hands you some number between 0 and 1. Multiply by 6, round down, add 1, and you land on 1 through 6. There’s more code to draw the pips and shake them, so the real thing runs a bit longer, but the piece that makes the roll random really is just that. The AI fills in the rest.

The hard part wasn’t the code — it was running it inside the post

Honestly, the game itself was the easy half. The part that took real work was getting it to run inside a blog post. And there’s a trap here I only learned by running this site.

WordPress strips JavaScript out of your post body. To be precise: when an account that isn’t an administrator saves a post, WordPress quietly removes code like <script> for safety. So if you paste the game’s code straight into a post, it saves fine but never runs. It just disappears.

The fix turns out to be tidy. You keep the game in a small part of its own, and put a single name tag in the post that calls it. In WordPress that name tag is called a shortcode. I put the game in a little plugin named curiogan-dice, and in the post body I wrote just one line.

[curiogan_dice]

What gets saved in the post is that plain text. It isn’t a script, so nothing strips it out. Then, when a reader opens the page, the plugin draws the game in that spot. The “Today’s Random Knowledge” wheel on the right side of this blog works the same way. The dice you rolled up top are what that one name tag pulled in.

A few things that helped when I built it

Here’s what I picked up along the way.

  • Vague asks give you vague results. Instead of “make a game,” name the things you can see: two dice, a roll button, a total.
  • Don’t chase the whole thing in one shot. Get a rough version, then fix it in small passes — “bigger button,” “shorter spin.”
  • When something breaks, describe it exactly. “It doesn’t work” helps no one; “the button doesn’t stop if I tap it twice fast” gets a real fix.
  • Open it on your phone. Most visitors are on one. And for anyone who finds motion uncomfortable, add a setting that turns the animation off.

Wrapping up

There’s no grand technology inside a dice game. Two lines of randomness, plus a small trick to make it run inside a post. What matters isn’t coding skill — it’s saying clearly what you want and checking what comes back. Roll the dice up there a few more times. A game built without a single line of hand-written code is running in your hands right now.