Let’s make a game — How to use generative AI tools for rapid prototyping
(A collaboration between Max Saltonstall, Dave Stanke, and Google’s Gemini code assistance)
When I get a new idea for a project, a game or a software tool, I want to prototype as fast as possible. But sometimes that means grappling with templates, frameworks, or other frustrations that just slow me down. Today I’ll show you how to use Gemini Code Assist to get to a prototype more rapidly, so you can test out your ideas and play your games.
As with most AI interactions, prompting strategies determine outcomes. So here’s what I tried, and what I got, and what I ended up using. I hope to inspire you to try AI assistance to speed up your development and experimentation.
I started with a simple query:
Write a web game. Users guess a word and try to get the letters right
Resulting in:
<!DOCTYPE html>
<html>
<head>
<title>Word Guess Game</title>
<script>
// The word to be guessed
var word = "secret";
// The number of guesses the user has left
var guesses = 10;
// The letters the user has guessed
var guessedLetters = [];
// The function that starts the game
function startGame() {
// Display the word to be guessed
document.getElementById("word").innerHTML = word;
// Display the number of guesses the user has left
document.getElementById("guesses").innerHTML = guesses;
// Add an event listener to the input field
document.getElementById("letter").addEventListener("keypress", function(event) {
// Get the letter the user pressed
var letter = event.key;
// Check if the letter is in the word
if (word.includes(letter)) {
// If the letter is in the word, add it to the list of guessed letters
guessedLetters.push(letter);
// Update the word to be guessed
word = word.replace(letter, "_");
// Display the updated word
document.getElementById("word").innerHTML = word;
} else {
// If the letter is not in the word, decrement the number of guesses
guesses--;
// Display the updated number of guesses
document.getElementById("guesses").innerHTML = guesses;
}
// Check if the user has won or lost
if (word === "_".repeat(word.length)) {
alert("You win!");
} else if (guesses === 0) {
alert("You lose!");
}
});
}
</script>
</head>
<body>
<h1>Word Guess Game</h1>
<p>Guess the word:</p>
<span id="word"></span>
<p>Guesses left:</p>
<span id="guesses"></span>
<p>Guess a letter:</p>
<input type="text" id="letter">
<button onclick="startGame()">Start Game</button>
</body>
</html>This is the right idea… kind of. It’s a guessing game, but let’s look at how the game starts out:
The game won’t be very fun if it tells you what the secret word is — and if the secret word is hard-coded as “secret!”
This is a decent start, but as Goldilocks would say: ‘Too cold!’
It’s missing quite a bit, as is the prompt, so let’s try again.
Attempt number two, this time with more details:
You are a brilliant online game designer, precise and innovative in equal measure. Make an intuitive, performant game in which participants attempt to discover a secret word through a series of guesses. When people play, they should experience the thrill of discovery and the delicious anxiety of the unknown. The game should become a sensation among users of all ages, all over the world. Include directions and a beautiful UI, and use the best technologies to make a world-class application.
Always good to give the AI a clear role and directive. This prompt includes more descriptors of what we want, and more guidance about how to deliver it. And the result:
Jotto
Introduction
Jotto is a word game in which one player tries to guess a secret word by submitting a series of guesses. After each guess, the other player gives a hint about how many letters in the guess are in the secret word.
Gameplay
To play Jotto, one player thinks of a secret word and the other player tries to guess it. The guesser submits a guess, and the other player gives a hint about how many letters in the guess are in the secret word. The guesser then uses this information to make another guess.
The game continues until the guesser either guesses the secret word or runs out of guesses.
Scoring
The guesser gets one point for each letter in their guess that is in the secret word. The guesser also gets one point for each letter in their guess that is in the correct position in the secret word.
Winning
The guesser wins the game if they guess the secret word before they run out of guesses.
Variations
There are many variations of Jotto. Some common variations include:
Timed Jotto: The guesser has a limited amount of time to guess the secret word.
Multiplayer Jotto: More than two people can play Jotto at the same time.
Online Jotto: Jotto can be played online against other players.
Technology
Jotto is a simple game to implement, but it can be made more challenging and fun by using different technologies. Some common technologies used to implement Jotto include:
Artificial intelligence: AI can be used to generate hints for the guesser.
Natural language processing: NLP can be used to understand the guesser's input.
Machine learning: ML can be used to improve the AI's ability to generate hints.
Conclusion
Jotto is a classic word game that can be enjoyed by people of all ages. It is a simple game to learn, but it can be challenging to master. With the help of technology, Jotto can be made even more challenging and fun.Whoa! That’s an ambitious statement of intent, but, um: where’s the code? This prompt is ‘too hot’ for Goldilocks the web dev. So let’s work on our prompt engineering to get ‘just right’ and try a third time:
You are a skilled Javascript developer. Make a web form that accepts a word as input and compares it to a secret word. Report the number of letters they have in common (in any order).
In this prompt I try a few solid prompt engineering strategies:
- Brief but clear “you are a…”
- Limited scope of request (make a web form)
- Clear statement of logic (letters in common, in any order)
<!DOCTYPE html>
<html>
<head>
<title>Jotto!</title>
</head>
<body>
<h1>Jotto!</h1>
<form>
<input type="text" name="guess">
<input type="submit" value="Submit">
</form>
<div id="message"></div>
</body>
</html>
-----------------------------------------------
const words = ['apple', 'banana', 'cherry', 'durian', 'elderberry'];
const word = words[Math.floor(Math.random() * words.length)];
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const guess = event.target.querySelector('input[name="guess"]').value;
let correctLetters = 0;
for (let i = 0; i < guess.length; i++) {
if (word.includes(guess[i])) {
correctLetters++;
}
}
document.querySelector('#message').innerHTML = `${guess}: ${correctLetters} letters correct`;
});We’re not there yet, but I’ve gotten some useful code that I can expand on to make a playable game. This runs, and with a little help from Goldilocks, I can make this bed ‘just right’ for our player.
Next time we’ll dive back into this code to expand on what we’ve got, using code generation features in our IDE to have Gemini write functions for us with just a comment to define our goals. In the meantime, give it a try yourself, and let us know where it is saving you time. If you want more help with prompt engineering, check out my Prompt Engineering Tidbits newsletter.
