Workshop - Kiro Game Night

Overview

A hands-on workshop where participants learn the basics of game design, get introduced to game development, and use Kiro IDE to build their own browser-based game — then ship it to itch.io as a mini game jam.

Duration: 3 hours Skill Level: Beginner-friendly (no prior game dev experience needed) Output: A playable game published on itch.io

Schedule

Time	Duration	Activity
0:00 – 0:20	20 min	Game Design 101 — Talk
0:20 – 0:40	20 min	Game Dev 101 — Talk
0:40 – 1:00	20 min	Kiro Demo — Building a game live
1:00 – 1:10	10 min	Setup & Game Jam kickoff
1:10 – 2:40	90 min	Game Jam — Build your game
2:40 – 2:50	10 min	Deploy to itch.io
2:50 – 3:00	10 min	Play & judge each other’s games

---

Part 1: Game Design 101 (20 min)

A quick talk on thinking about games before writing code.

What Makes a Game?

• Goal — What is the player trying to do?
• Rules — What can and can’t the player do?
• Feedback — How does the player know they’re progressing?
• Fun — Why would someone keep playing?

Game Design Principles

• Start small — A finished simple game beats an unfinished complex one
• Core loop — The thing the player does over and over (jump, shoot, choose, solve)
• Juice — Small details that make the game feel good (screen shake, sounds, animations)
• Constraint breeds creativity — Limited time and tools force interesting decisions

Genres That Work for a Game Jam

• Text-based / Interactive Fiction — Story choices, minimal code
• Clicker / Idle — Simple mechanics, satisfying progression
• Quiz / Trivia — Easy to make, fun to play
• Puzzle — Logic-based, no art needed
• Simple Arcade — Dodge, collect, survive with a timer

Quick Exercise (2 min)

Think of your game idea. Write down:

1. One sentence describing it
2. What the player does (the core loop)
3. What tech you’ll use (Vanilla JS or Python)

---

Part 2: Game Dev 101 (20 min)

The minimum you need to know to build a game.

For Vanilla JS (Browser Games)

The browser gives you everything:

• HTML — Structure (buttons, text, containers)
• CSS — Styling (colors, layout, animations)
• JavaScript — Logic (game state, events, DOM manipulation)
• Canvas API — For graphical games (drawing, sprites, movement)

Simplest game loop:

function gameLoop() {
  update()    // change game state
  render()    // draw to screen
  requestAnimationFrame(gameLoop)
}
gameLoop()

For Python (Text-Based / CLI Games)

• Input/Output — input() and print() for interaction
• Game state — Dictionaries and lists to track everything
• Flask/FastAPI — If you want a web frontend

Simplest game loop:

while game_running:
    show_status()
    action = input("> What do you do? ")
    process_action(action)

Key Concepts

• Game State — Variables that track everything (health, score, position, inventory)
• Player Input — Keyboard events, clicks, or text input
• Game Loop — Update → Render → Repeat
• Win/Lose Condition — When does the game end?

---

Part 3: Kiro Demo (20 min)

Live demo of building a game using Kiro IDE.

Example: “I Am Please” — Text Adventure

A text-based adventure game built with Kiro. Play it at iam-please.neilriego.me.

Demo Flow

1. Create a new project — Open Kiro, create folder
2. Write a spec — Describe the game to Kiro:

   “Create a text-based adventure game where the player explores rooms, collects items, and solves a puzzle to escape. Use vanilla HTML/CSS/JS.”

3. Generate the code — Let Kiro scaffold the project
4. Iterate with prompts — Add features:
   • “Add an inventory system”
   • “Add a health bar”
   • “Make the descriptions more atmospheric”
5. Test locally — Open in browser or use Vite dev server
6. Polish — Ask Kiro to improve styling, add sound effects, fix bugs

Tips for Working with Kiro

• Be specific in your prompts — “Add a score counter in the top-right corner” > “Add scoring”
• Use specs — .kiro/specs files help Kiro understand your game design
• Iterate small — Ask for one feature at a time, test, then ask for the next
• Review the code — Kiro generates it, but you should understand it
• Steering files — Use these to set coding style, framework preferences, etc.

---

Part 4: Game Jam (90 min)

Rules

1. Solo or pairs — Up to 2 people per team
2. Use Kiro — Kiro should be your primary tool (you can still write code manually)
3. Browser-playable — The game must run in a browser
4. Theme is open — Build whatever you want
5. Time limit — 90 minutes to build, then deploy

Suggested Workflow

Time	What to do
First 10 min	Plan your game — what, how, scope it down
Next 60 min	Build with Kiro — spec, generate, iterate
Last 20 min	Polish and bug fix — test it, make it presentable

Starter Prompts for Kiro

If you’re stuck, try one of these:

Text Adventure:

“Create a text adventure game where the player wakes up in a mysterious room and must find clues to escape. Use vanilla HTML/CSS/JS with a retro terminal style.”

Clicker Game:

“Create a cookie clicker-style game where the player clicks to earn points and can buy upgrades. Use vanilla HTML/CSS/JS with satisfying click animations.”

Quiz Game:

“Create a trivia quiz game with 10 questions, a timer, score tracking, and a results screen. Use vanilla HTML/CSS/JS.”

Survival Game:

“Create a simple arcade game where the player moves with arrow keys to dodge falling objects. Track a survival timer as the score. Use HTML Canvas.”

---

Part 5: Deploy to itch.io (10 min)

Steps

1. Build your project (if using Vite):

npm run build

2. Zip the output:

   • For Vite: zip the dist/ folder contents
   • For plain HTML: zip your index.html, style.css, main.js, and any assets

3. Upload to itch.io:

   • Go to itch.io/game/new
   • Fill in the title and description
   • Under Kind of project, select HTML
   • Upload your zip file
   • Check This file will be played in the browser
   • Set the viewport dimensions (800x600 is a safe default)
   • Click Save & view page

4. Share the link with the group

For Python Games

If you built a Python CLI game, you can:

• Wrap it with a simple Flask web server and deploy to Render/Railway
• Or convert the logic to JS for itch.io

---

Part 6: Play & Judge (10 min)

How It Works

1. Everyone shares their itch.io link
2. Play each other’s games (2-3 minutes each)
3. Vote on categories:
   • Most Creative — Unique concept or twist
   • Most Polished — Best looking or feeling
   • Most Fun — The one you kept playing
   • Best Use of Kiro — Clever AI-assisted development

Judging Format

• Each participant gets 3 votes (can’t vote for yourself)
• Quick show of hands or use a shared form
• Winners get bragging rights (and maybe stickers)

---

Resources

• Pre Workshop Reminders — Setup checklist for attendees
• Installing Kiro IDE — Kiro installation guide
• Setting Up Node.js — Node.js setup for JS track
• Setting Up Python — Python setup
• GitHub Setup — Git and GitHub
• Deploying with GitHub Pages — Alternative deployment
• itch.io — Game hosting platform
• iam-please.neilriego.me — Example text adventure built with Kiro