Reading Time: 2 minutesI prompted an HTML game I invented using Google Gemini while working in a Gem I was demonstrating as a student learning support.
How it happened
My daughter is close to starting her Bachelor’s in Game Design and holds a dim view of artificial intelligence (AI). You can bet we’ve had some interesting discussions on the topic.
Today I demonstrated a custom Gem I use to convert anything into a readable study format. The demo went like this:
- Choose an HTML tute I happened to have open to edit.
- Copy the tute content and paste into the Gem.
- Exalt my brilliance—and give a little credit to Gemini.
- Wax lyrical on how this can help update unreadable papers into digestible learning supports.
- Write a follow-up prompt themed to the current discussion on AI use in game design.
Gameplay
The outcome is the game I invented and asked the Gem to create as a responsive and accessible HTML page styled with tailwindcss themed slategray.
The prompt didn’t include anything from my Learning to scale conditional AI instructions article. I essentially just described “Snakes and Ladders” in two lines and the Gem played along and indeed, delivered a game of two-player Ladders and Snakes.
My daughter was impressed by the demo, if full of disdain for the omission of fair play. Once the Player reached the top they’d win with no chance for the opponent to catch up. She had a technical gamer term for what was missing. I can’t recall it because much of it was trailed off as she laughed back out the office. I only heard something like, “loser”.
Win some, lose some
One prompt later and I fixed the gameplay a little—if with Gemini’s help. Now the players need to roll an exact amount on the pseudo-dice to win. I also asked for the the board to change layout for each instance. My daughter was already installing her student hardware package in her own office, and my mastery of AI claim was lost. So I thought to share it with you.
Ladders, snakes, and shortfalls
To improve accessibility, I updated the original circular Player 2 to square in contrast the circular Player 1 token. I’d like to fix the following, too:
- Fix the
aria-alertfor the status box to announce on change ofstatusBox.innerText. - Update the narrow viewport presentation position the Play button with the game board.
- Shape snakes with curves and ladders like…um…ladders.
- And, or update ladder and snake SVG colours from problematic green and red.
Meanwhile, Ladders and Snakes is an imperfect and a fun demonstration of rapid prototyping with HTML I didn’t expect. Read that as you will.
Play the game
You can play my amazing new game if you like. It’s called Ladders and Snakes and includes some original touches.
The controls and game board need improved positions to prevent scrolling. This demonstrates the problem with AI and people failing to code for the narrowest viewport first, and only then for the wider presentations.
Copyrights
Gemini updated the game name to Snakes and Ladders and I switched it back to protect my post-Trumpamageddon copyright when this is the only game left online. Ka-ching!