Designing Interactive Stories with Claude.ai
In this hands-on session, we'll jump into the world of interactive fiction, its benefits, and how Claude Artifacts or ChatGPT can be used to create immersive and engaging stories. You will explore the concepts of Claude Artifacts and ChatGPT 4o with Canvas, how they work, and how to design interactive stories with images a la Zork. You'll leave with practical strategies and ideas to get started with using AI coding chatbots in your classroom.
Let's get started!
Topics
TCEA Essential Learning Expectations (ELEs)
Game Design: A Creative Process
Game Design Checklist
Demonstration with AI
Sample Game Design Prompt
Sample Game Prompts
ASCII Star Trek Game
Tower Defense Game
More examples
TCEA Prompt Guide Educator (a ChatGPT Custom GPT prompt generator/improvement tool)
Share your game prompts (work alone or in groups to design them).
You can see all my failed attempts, along with successful ones, online. Just save them to your computer or device and open them in a web browser (e.g. Chrome, Firefox, Safari).
AI How To with Claude and ChatGPT
Both Claude AI and ChatGPT now offer coding capabilities. Free users can take advantage of Claude Artifacts, while ChatGPT 4o with Canvas is available only to Plus or Teams users. Here's a set of how-to videos showing both tools off for later reference. You can get the HTML version of both creations and save them to your device to view and play in your web browser.
Aligning Game Design to TCEA ELEs
The TCEA Essential Learning Expectations (ELEs) address the evolving needs of our educational system, preparing our students, teachers, instructional coaches, and school leaders for the challenges and opportunities of today's world.
They provide a comprehensive framework that aligns expectations across different roles in the educational system, promotes meaningful technology and AI integration, emphasizes critical thinking and problem-solving, fosters inclusive learning environments, and encourages data-informed practices.
Creative Process
Checklist
This comprehensive checklist covers nine essential aspects of game development:
Game Concept: Defining the theme and objective of the game.
Grid Setup: Utilizing a simple grid (e.g., 10x10) for easy navigation and understanding.
Player Commands: Including basic actions like move, attack, and defend.
Game Elements: Incorporating characters, obstacles, and goals represented by ASCII symbols.
Feedback Mechanism: Providing real-time updates on score or health status.
Replayability: Designing the game to offer different outcomes or challenges for multiple playthroughs.
HTML Wrapper: Ensuring the game is playable in a web browser.
Text-Based Interface: Using text for player input and game output.
AI Integration: Enhancing gameplay with AI elements such as enemy AI or dynamic obstacles.
It emphasizes simplicity in design while incorporating essential gaming elements and AI features to enhance the player experience.
When I was thirteen years old, I was an avid electronic Bulletin Board System (BBS) user. One of my first encounters in the pre-Internet world? An ASCII based Star Trek game. I spent hours playing this game and never found anything like it again. As a non-programmer, I kept wishing someone would make the code for this game easily available. How hard could it be?
With AI, I decided to give it a shot. After 15 minutes of using Claude AI's Artifacts feature, I had a similar game using rules I half-remember from several decades ago.
About This Creation
I started this game design with Claude but promptly ran into Claude's limitations. So, I took a draft of the code Claude generated, then dropped it into ChatGPT 4o to finish it up.
Tips
Welcome, aspiring AI game designers, to the digital playground where pixels meet possibility! These five golden rules are your secret weapons in crafting captivating virtual worlds that will have players glued to their screens. With these tricks up your sleeve, you're not just designing games—you're architecting dreams and engineering fun!
1. Start Simple. This approach allows you to establish a solid foundation for your game before introducing more intricate elements.
2. Iterate Often. This iterative process ensures continuous refinement and enhancement of the gaming experience.
3. Use Clear Symbols. This tip is particularly important for text-based games, ensuring that players can quickly understand the game's visual elements.
4. Focus on Engagement. Balancing enjoyment and difficulty is crucial for creating a compelling gaming experience that keeps players coming back.
5. Encourage Exploration. This tip promotes player autonomy and adds depth to the gameplay, enhancing replayability and overall satisfaction.
Sample Game Prompt
Design a text-based dungeon adventure where the objective is to explore and find treasures while battling monsters. The game should operate on a flexible grid size, such as 20x20 or larger, to allow for more expansive exploration. Include basic player commands like move, attack, and defend, with characters, obstacles, and goals represented by clear ASCII symbols.
Provide real-time feedback, such as score updates and health status, to keep players engaged. Ensure the game offers replayability with different outcomes or challenges each time.
Wrap the game in HTML so it can be played in a web browser, using a text-based interface for player input and game output. Enhance the gameplay with AI elements, such as enemy behavior or dynamic obstacles.
Sample Game Prompts
Behold, intrepid game designers and AI enthusiasts! Before you lies a treasure trove of creative sparks, a compendium of prompts designed to ignite the fires of imagination and set your game development journey ablaze. Are you ready to answer the call and bring these digital worlds to life?
Basic Adventure Game
Create a text-based adventure where players explore a dungeon, encountering monsters and treasures.
Space Battle Simulation
Design a game where players control a spaceship on a grid, battling alien ships with limited resources.
Puzzle Challenge
Develop a puzzle game where players solve riddles to progress through levels.
Educational Quest
Create a game that teaches basic math concepts through interactive challenges.
Mystery Solver
Design a detective game where players gather clues and solve mysteries using text commands.
Hangman Game
Create a hangman game where the player guesses a word by suggesting letters. The game should display the word with guessed letters filled in and incorrect guesses should draw a part of a hangman's gallows. The game ends when the word is guessed or the gallows is complete
Word Chain
Develop a word chain game where the player and the AI take turns saying a word that starts with the last letter of the previous word. For example, if the player says 'cat', the AI could say 'turtle' because turtle starts with 't', which is the last letter of 'cat'.
ASCII Star Trek Game
Beginning Prompt
Create an ASCII-based Star Trek game where the player controls the USS Enterprise on a 10x10 grid of dots. The Enterprise must fight against Klingon and Romulan ships using text commands. The player can move the Enterprise, fire phasers, fire torpedoes (represented by asterisks), and raise shields.
The grid also contains starbases where the player can restock and repair. Include long-range sensors to allow the player to see enemies beyond the immediate grid. The game should be playable in a web browser with simple text commands to control the Enterprise.
Instructions
Here are the available commands:
w, a, s, d: Move the Enterprise up, left, down, right respectively.
phaser A-J 1-10: Fire phasers at the specified coordinates (e.g., phaser C 5).
torpedo A-J 1-10: Fire a torpedo at the specified coordinates (e.g., torpedo F 8).
shields: Toggle shields on/off.
dock: Attempt to dock at a nearby starbase.
scan: Perform a short-range scan.
lrscan: Perform a long-range scan.
status: Display the Enterprise's current status.
Star Trek Game Citations
Claude. "Create an ASCII-b..." A.I. Archives, 28 August 2024, https://aiarchives.org/id/PbJORsF9rOslGzpoSHEf
ChatGPT. "Could you fine-tu..." A.I. Archives, 28 August 2024, https://aiarchives.org/id/ylB6xFlPhE6TchBWcbYh
Final Version of Code appears at the end of this chat:
ChatGPT. "I need your help ..." A.I. Archives, 28 August 2024, https://aiarchives.org/id/1wsmlMpg1jvxda9vJZco
Tower Defense Game
ASCII Tower Defense Game Creation Prompt
Create a browser-based tower defense game with the following specifications:
1. Use HTML5 Canvas for rendering and JavaScript for game logic.
2. Implement a larger grid size (40x30) to allow for more strategic gameplay.
3. Represent game elements using ASCII characters:
- Goblins (enemies): 'G'
- Arrow Towers: 'A'
- Cannon Towers: 'C'
- Magic Towers: 'M'
4. Generate a random, winding path for enemies to follow, a different one for each wave. Use ^ to indicate mountains, T for trees, ~ for water/rivers, etc. Also, don't change map after towers have been placed for a wave
5. Create three types of towers with different costs, damages, ranges, and attack speeds:
- Arrow Tower: Fast, medium damage, $50
- Cannon Tower: Slow, high damage, $100
- Magic Tower: Very fast, low damage, $150
6. Implement a wave system with progressively harder enemies:
- Increase health and speed of enemies each wave
- Spawn 10 enemies per wave, scaling with the wave number
7. Add a simple UI for:
- Displaying current wave, lives, and coins
- Selecting tower types
- Starting waves manually
8. Include game mechanics such as:
- Earning coins by defeating enemies
- Losing lives when enemies reach the end of the path
- Game over when all lives are lost
9. Implement tower placement logic:
- Allow placing towers on empty grid spaces
- Prevent placing towers on the enemy path
10. Add visual feedback:
- Show tower range when selected
- Display enemy health bars
11. Use a monospace font to maintain the ASCII art style.
12. Ensure the game loops continuously, updating and redrawing the game state.
Combine these elements into a single HTML file that includes the necessary JavaScript and CSS to create a fully functional, retro-style tower defense game playable in a web browser.
Dungeon Adventure Game
Initial Prompt
Design a text-based dungeon adventure where the objective is to explore and find treasures while battling monsters. The game should operate on a flexible grid size, such as 20x20 or larger, to allow for more expansive exploration. Include basic player commands like move, attack, and defend, with characters, obstacles, and goals represented by clear ASCII symbols.
Provide real-time feedback, such as score updates and health status, to keep players engaged. Ensure the game offers replayability with different outcomes or challenges each time.
Wrap the game in HTML so it can be played in a web browser, using a text-based interface for player input and game output. Enhance the gameplay with AI elements, such as enemy behavior or dynamic obstacles.
Citations
Claude. "Dungeon Adventure," 28 August 2024, view transcript
ChatGPT. "Please review the..." A.I. Archives, 28 August 2024, https://aiarchives.org/id/gGIC3APcjmcD1tDWC9wA
Sample Prompt
I would like to develop some interactive games using Claude's Artifacts feature that I can download and save as HTML web browser friendly games. Those games include all the standard ones like Tic Tac Toe, Hangman, Sudoku, Backgammon. I want the game mechanics to reflect one or two player options, include when it makes sense the following:
turn based
action points: you have a limited pool of AP, every action requires a set amount of AP
Auction/Bidding: Players trade different kinds of ressources, competing with each other.
Capture/Destroy
Random: The result of an action is random completely or in part.
Movement: The game involves moving avatars or ressources in a field. (scrolling or not)
Resource Management: Players need one or more ressources to maximize/minimize a result. Or combine ressources to obtain different products.
Tile laying: Tiles are placed on the board, tiles do not move but could be removed. They interact with the environment and adyacent tiles.
Game Modes: The game has several states, the same commands produce different results depending on the current state.
Memory
Pervasive Gaming: Games that keep being played for a long time.
Secret Partnerships:
Avatar: Player controls an avatar.
Asymmetric Cooperation: Each player has different abilities, players must combine their skills to win.
Customization-Creation: Allow the player to create or cuztomize elements of the game. Could be by offering different combinations, strategies... or allowing him to create something totally unique.
Break the fourth wall: interact with the real world.
Modify the environment: Your actions have a permanent effect on the environment.
Change the scale: Alice in wonderland.
Write, draw, make annotations inside the world Collect: Collect objects, cards, pokemon...
Feedback Loops: positive or negative feedback loops.
Competition
Time Manipulation: The player has some way of controlling time: rewind, stop, forward, accelerate, slow-down
Inverted Space: like SHIFT.
Avoider: Avoid enemies trying to crash or shoot at you.
Shoot Stuff
Powerups: Objects that give you a special ability, hard to find or create.
Get to the other side: Move something from point A to point B
Visit every location
Time Limit
Chain Reaction: Your actions can provoke chained reactions.
Encircle: Circle enemy, enemy pieces to destroy him. Encircle an area to win.
Pick card: Player must choose from a deck and pick a card(ressource) without knowing what it is. Chit pull: Randomness is added to the game by pulling ressources from a pool
Speculation: Value of ressoruces varies during game and player must use that in his advantage. Hand management: Player uses a limited amount of cards(ressources), must adapt strategy to his hand.
Hexagonal board
Connections: Must make connections between elements of the board. Connections have strategic value.
Modular board: The board is not fixed, it is built from pieces, following certain rules. Either at the start of the game or as it is played.
Alliances: Preestablished or spontaneous. Public or secret.
Build pattern:
Secret placing: Player places his units but the opponent cant see them.
Set collection: To collect more than one kind of ressources, or balance your resources.
Simulataneous action: Players decide their next move at the same time.
Changing skills: Players skills change as the game progresses.
Could you generate prompts and HTML wrapped browser friendly versions of a game that combines as many elements as possible and use colorful fonts that are ADA friendly?
Results - Cosmic conquest
Version 1 - Simple game per prompt
Version 2 - Added space theme, asked for more drama, and interactivity
Version 3 - Added for enemy attacks, integrated phasers, torpedoes, and animation
This promised to be really interesting but Claude was unable to render the rest of it. It hit its limit. :-(
Objective: Develop interactive, HTML web browser-friendly games using Claude's Artifacts feature. The games should include standard ones like Tic Tac Toe, Hangman, Sudoku, and Backgammon. The game mechanics should offer one or two-player options and incorporate various dynamic features and elements to enhance interactivity, strategy, and engagement.
Game Design Elements to Incorporate:
- Core Mechanics:
Turn-Based: Players take turns to execute their moves.
Action Points (AP): Implement a system where each player has a limited pool of AP, with each action consuming a set amount of AP.
Auction/Bidding: Allow players to trade and compete for resources, enhancing strategic depth.
Capture/Destroy: Integrate mechanics where players can capture or destroy opponent assets.
Randomization: Include elements where the outcome of actions is determined by chance, either fully or partially.
- Movement & Resource Management:
Avatar Control: Enable players to control avatars that move within the game environment.
Resource Management: Players manage resources to optimize outcomes or create new combinations/products.
Tile Laying: Incorporate tiles that interact with the environment and adjacent tiles.
Movement: Implement movement mechanics where avatars or resources are moved across the field, either in a scrolling or fixed manner.
- Advanced Gameplay Features:
Game Modes: Include multiple game states where the same commands have different effects based on the current state.
Memory: Add challenges that require players to recall information or previous game states.
Pervasive Gaming: Design elements that allow the game to be played over an extended period.
Secret Partnerships: Introduce mechanics where players form hidden alliances to achieve objectives.
Asymmetric Cooperation: Each player has unique abilities requiring teamwork to win.
Customization: Allow players to create or customize game elements, such as avatars, strategies, or environments.
Environmental Interaction: Actions in the game have lasting effects on the environment, affecting future gameplay.
Feedback Loops: Integrate positive or negative feedback loops that influence player strategy.
- Creative & Innovative Concepts:
Break the Fourth Wall: Design interactions where the game references or involves the real world.
Time Manipulation: Allow players to control the flow of time, such as rewinding or slowing down.
Inverted Space: Create puzzles or scenarios where the spatial logic is flipped or altered.
Avoidance Mechanics: Include challenges where players must avoid obstacles or enemies.
Power-Ups: Scatter objects throughout the game that grant temporary advantages or abilities.
Chain Reactions: Implement scenarios where actions can trigger cascading effects.
Encirclement: Develop strategies where players can encircle enemies or territories to achieve victory.
- Game Board & Interaction:
Hexagonal/Modular Board: Use hexagonal tiles or a modular board setup that changes dynamically as the game progresses.
Secret Placement: Players place units secretly, adding an element of surprise.
Simultaneous Action: Players make decisions and execute moves simultaneously.
Hand Management: Players must strategize based on a limited set of resources or cards.
Speculation & Alliances: Introduce mechanics where resource values fluctuate, and alliances can be formed or broken.
Technical Requirements:
HTML Output: The game should be downloadable as an HTML file that is compatible with web browsers.
ADA Compliance: Use colorful fonts that are ADA-friendly, ensuring accessibility for players with different needs.
Claude's Generation Limit: Ensure that no game exceeds the content limits that Claude can generate in a single request. Design the scope and length of the game accordingly, focusing on concise and impactful gameplay.
Prompt Generation Example: Generate an HTML-wrapped browser-friendly game that combines turn-based mechanics, resource management, and modular boards. The game should support both single-player and two-player modes, featuring customizable avatars and real-time bidding for resources. Include a time manipulation feature where players can slow down or speed up gameplay. The board should be dynamic, with tiles that interact with one another and the environment. Players can trigger chain reactions by making strategic moves, and power-ups should be hidden across the board, offering temporary advantages.
Execution: Leverage Claude's Artifacts feature to create and fine-tune these game elements. Generate prompts that guide the system to include as many of the listed elements as possible in each game, ensuring that the final output is interactive, engaging, and accessible. Keep the game's length within the limits of what Claude can generate in a single request, ensuring that the games are concise, browser-friendly, and ready for immediate play.
Result - Resource Management Game
- The game board consists of 25 tiles, each representing a different type of resource (farm, factory, bank, store, hospital).
- Players take turns clicking on tiles to activate them and gain resources.
- Each activation costs 1 resource and grants 1-3 resources randomly.
- Players can end their turn using the "End Turn" button.
- The game speed can be toggled between normal and slow using the "Change Speed" button.
AI World Domination Game
The world is a grid of ASCII characters, where:
'D' represents player's data centers
'T' represents player's trees
'U' represents player's upgraded data centers
'd' represents computer's data centers
't' represents computer's trees
'u' represents computer's upgraded data centers
The player can perform four actions: Build (B), Plant (P), Upgrade (U), and Sabotage (S).
The computer randomly chooses actions and positions.
The game runs for a set number of turns, after which the winner is determined based on the score.
Objective: Create an ASCII art-based game where the player competes against the computer for world domination. The theme of the game is to protect the global climate from the negative impacts of AI data centers. The player and the computer each control a network of AI data centers and must strategically manage resources to either protect or exploit the climate. The game should be simple yet strategic, with the outcome determined by the player’s decisions in resource management, environmental protection, and AI deployment.
Gameplay Elements:
Game Setup:
The game is turn-based, with the player and computer taking alternate turns.
The world is represented as a grid of ASCII characters, with each cell representing a region of the planet.
AI data centers are represented by unique ASCII symbols, such as "D" for data centers, "T" for trees (climate protection), and "C" for cities.
Player Actions:
Build Data Centers (D): The player can build a new AI data center in a region, increasing computational power but also increasing carbon emissions.
Plant Trees (T): The player can plant trees in a region to offset carbon emissions and protect the climate.
Upgrade Data Centers: The player can upgrade data centers to more efficient versions that consume less energy and produce less carbon.
Sabotage: The player can attempt to sabotage the computer's data centers, reducing their efficiency.
Computer Actions:
The computer will attempt to build and expand its own network of AI data centers, often at the cost of the environment.
The computer may also counteract the player’s efforts by deforesting regions or upgrading its own centers to be more climate-neutral.
Victory Conditions:
The game ends after a set number of turns or when either the player or the computer dominates the grid.
Victory: The player wins if they successfully protect the majority of the regions from harmful AI data center activities, maintaining a balance between technology and nature.
Defeat: The computer wins if it manages to dominate the world with its AI data centers, leading to catastrophic climate impacts.
Scoring:
Environmental Health: Points are awarded for regions protected by trees or upgraded, eco-friendly data centers.
Technological Dominance: Points are awarded for the number of data centers built and upgraded.
The player must balance between maximizing computational power and protecting the environment.
Example Prompt: "Generate an ASCII art-based turn-based strategy game where the player competes against the computer for world domination by protecting the climate from AI data centers. The player can build data centers, plant trees, upgrade centers to more eco-friendly versions, and sabotage the computer’s efforts. The world is represented as a grid of ASCII characters, and the game ends when either the player or the computer dominates the majority of the grid, with the outcome depending on the balance between environmental health and technological dominance. The game should be simple yet strategic, with a focus on resource management and climate protection."
Execution:
Implement a simple command-based interface where the player inputs their decisions each turn.
Use ASCII art to visualize the world grid, data centers, trees, and other elements.
The computer’s actions should be automated, responding to the player’s moves with strategic counteractions.
This prompt is designed to create a game with a meaningful theme centered on climate protection, using the simplicity and charm of ASCII art to engage the player in a strategic battle against AI-driven climate degradation.