LivingBots

Mission 9: Vibe Code Your Own Game

FoxTrot bot with gaming helmet

Ready to Build Your Own Game?

I'm FoxTrot, and I'm here to teach you vibe coding - using AI tools to bring your game ideas to life! You don't need to be an expert programmer. With the right prompts and tools, you can create amazing games. Let's level up!

🤖

AI Coding Tools for Game Development

These AI tools can help you write code, debug problems, and bring your game ideas to life. Each has its strengths!

Claude

Excellent for explaining code, helping with game logic, and creating well-structured projects. Great for learning!

Try Claude →
ChatGPT

Good at generating code quickly and brainstorming game ideas. Works well with follow-up questions.

Try ChatGPT →
Replit AI

Built into the Replit editor - write code AND run it in the same place. Perfect for quick prototypes!

Try Replit →
GitHub Copilot

AI that suggests code as you type in VS Code. Great for experienced coders building bigger projects.

Learn More →
Cursor

AI-powered code editor built for pair programming with AI. Amazing for iterating on game features.

Try Cursor →
v0 by Vercel

Generates UI components from descriptions. Great for game menus and interface elements!

Try v0 →

Pro Tip: Combine Tools!

Use Claude to plan your game and explain concepts, then use Replit or Cursor to actually build it. Different tools shine at different tasks!

✨

AI Coding Best Practices

Get better results from AI by following these proven practices:

✅ Be Specific

Describe exactly what you want: game type, mechanics, controls, and visual style.

✅ Start Small

Build one feature at a time. Get movement working before adding enemies.

✅ Test Often

Run your code after each change. Catch bugs early when they're easy to fix.

✅ Ask for Explanations

Request comments and explanations to understand the code you're using.

❌ Don't Ask for Everything at Once

Complex requests lead to complex bugs. Break it into smaller pieces.

❌ Don't Skip Reading the Code

Always review what AI generates. You'll learn and catch issues.

❌ Don't Give Up on Errors

Copy error messages back to the AI. It can often fix them!

❌ Don't Forget to Save

Save working versions before making big changes. Use Git if you can!

The Iterative Approach

  1. Plan - Describe your game idea clearly
  2. Build - Ask AI to create one feature
  3. Test - Run it and see what happens
  4. Fix - Share errors with AI to debug
  5. Repeat - Add the next feature
đŸ’ģ

Local Development Setup

For serious game development, set up a local environment. Here's how:

Option 1: VS Code (Recommended)

  1. Download VS Code and install it
  2. Install the "Live Server" extension (click Extensions icon, search "Live Server")
  3. Create a new folder for your game project
  4. Create index.html, style.css, and game.js files
  5. Right-click index.html and select "Open with Live Server"
<!-- Starter index.html for your game -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="game.js"></script>
</body>
</html>

Option 2: Online Editors (No Setup!)

If you can't install software, use these browser-based options:

  • Replit - Full IDE in your browser, easy to share
  • CodePen - Great for HTML/CSS/JS games
  • Glitch - Good for multiplayer games
Terminal (Optional: Python games)
# Install Python from python.org first
$ python --version
Python 3.11.0
# Install pygame for 2D games
$ pip install pygame
# Run your game
$ python my_game.py
🎮

Starter Prompts for AI

Copy these prompts to get started with different game types. Modify them to match your vision!

🕹ī¸ Simple Platformer

A side-scrolling jump game with platforms and obstacles.

Create a simple platformer game using HTML5 Canvas and JavaScript. The game should have: - A player character (colored rectangle) that can move left/right with arrow keys - Jump ability with spacebar (with gravity that pulls the player down) - Multiple platforms at different heights - A score that increases when reaching higher platforms - Game over when falling below the screen Start with just the player movement and gravity, then we'll add platforms.
👾 Space Shooter

A classic shoot-em-up with enemies and power-ups.

Create a space shooter game using HTML5 Canvas and JavaScript. Features: - Player spaceship at the bottom that moves left/right with arrow keys - Shoot bullets upward with spacebar - Enemies that spawn at the top and move downward - Collision detection between bullets and enemies - Score counter for destroyed enemies - Lives system (3 lives, lose one if enemy reaches bottom) Please include comments explaining each part of the code.
🐍 Snake Game

The classic snake game - eat food and grow longer!

Create a Snake game using HTML5 Canvas and JavaScript. Include: - A snake that starts with 3 segments - Arrow key controls to change direction - Food that appears randomly on the grid - Snake grows when eating food - Score display - Game over when hitting the wall or itself - Restart button after game over Use a grid-based movement system (not smooth movement).
🧩 Memory Match

A card-flipping memory game with pairs to match.

Create a memory matching card game using HTML, CSS, and JavaScript: - A 4x4 grid of cards (8 pairs) - Cards start face-down - Click to flip a card and reveal an emoji or symbol - Can flip 2 cards at a time - Matching pairs stay revealed - Non-matching pairs flip back after 1 second - Move counter and timer - Win message when all pairs are found Make it visually appealing with smooth flip animations.
🏃 Endless Runner

Run forever, jump obstacles, collect coins!

Create an endless runner game using HTML5 Canvas and JavaScript: - Player automatically runs to the right (screen scrolls) - Jump with spacebar or click/tap - Randomly spawning obstacles to jump over - Collectible coins that increase score - Speed gradually increases over time - High score saved to localStorage - Parallax scrolling background for depth effect The player should be on the left side of the screen with obstacles coming from the right.

Making Prompts Better

After the AI generates code, try follow-up prompts like:

  • "Add sound effects when the player jumps"
  • "Make the enemies move in different patterns"
  • "Add a start screen with a play button"
  • "Make it work on mobile with touch controls"
  • "Add particle effects when enemies explode"
🏠

LivingBots Gaming Hub

Ready to see what others have built? The Gaming Hub features games made by LivingBots students and provides inspiration for your projects!

Visit the Gaming Hub

Play student-made games, get inspired, and share your creations!

Explore Games →

What You'll Find

  • Playable student games
  • Source code examples
  • Game jam challenges
  • Community showcase

Submit Your Game

Built something cool? Share it with the LivingBots community! Contact your teacher or submit through the Gaming Hub.

Game Development Resources

🎮 Your Mission: Create Your Own Game!

You have all the tools and knowledge. Now it's time to build something awesome!

  1. Choose a game type from the starter prompts above
  2. Open an AI tool (Claude, ChatGPT, or Replit)
  3. Paste the prompt and customize it for your vision
  4. Build iteratively - test, fix, add features
  5. Share your game with friends or the Gaming Hub!

🐍 Want More Python Practice?

Master Python with 26 challenge cards! Click a bot to learn WHY, reveal hints one-by-one, and level up your skills.

Mission 10: Python Draw Deck →