HW2: Crossy Road with AI

Due Date: Sun. 9/13 at 8:00 PM
Time Estimate: 30 minutes in class + up to about 4 hours to finish outside of class (if you find yourself going over 4 hours, see instructions for stopping and creating a reflection instead.)
Deliverables: A playable JavaScript game in its own folder in your github.io portfolio repo, with a README.md and a prompt_log.md, plus a link from your portfolio and a Google form submission

Assignment Overview

Goal: Use AI tools strategically to recreate the game Crossy Road in JavaScript, so that it ends up as a playable, in-the-browser project on your portfolio website.

Context: This assignment starts in class with a hard 30-minute time limit, then continues at home with a much softer one. The point of the first half is to see what a tight constraint does to your strategy and your prompting. The point of the second half is to actually finish something you'd be happy to show someone.

Why This Matters: This is a chance to practice prompting AI effectively and thoughtfully to arrive at a desirable result quickly, and then to practice the very different skill of taking a rough AI-generated prototype the rest of the way to something finished and shippable.

Learning Objectives:

Practice choosing and executing a simple prompting strategy that works under time pressure
Practice verifying that your code meets the requirements you have explicitly provided
Practice validating that your code meets the high-level goal of mimicking Crossy Road
Practice prioritizing the most important features before details
Get set up with an agentic AI IDE (Kiro) as one of several tools we'll use this semester
Deploy a playable artifact to your portfolio

Setup: Install Kiro

For this assignment you are required to install and use Kiro, an AI-enabled IDE. We'll install it together at the start of class, and before the 30-minute build.

Download and install Kiro from kiro.dev.
Sign in and start using it. The free tier is completely fine for this assignment.
Optional but recommended: Kiro offers substantially more usage credits to verified students. Sign in and complete the student/education verification using your CMU identity (your @andrew.cmu.edu email / CMU ID).

About the student verification: You do not need to complete this before or during class, and it is not required for HW2. The free tier is enough. Approval can take a few days, so start the process early. It's worth doing, because the extra credits will make later assignments in this course much less painful.

You may use other AI IDE tools for the post-class part. Kiro is required in-class so that everyone's on a level field, but you're welcome to also use ChatGPT, Claude, Copilot, or anything else alongside it. (Avoid Codex here just because it separates you too much from your code at this point. We'll get to it later; I promise.) Just make sure to clearly indicate your tools in your prompt log.

The In-Class Challenge (30 minutes)

In class, you'll have exactly 30 minutes to get as close to Crossy Road as you can. When the timer stops, we'll discuss as a group where everyone landed: what you got working, what you didn't, what your first prompt was, and what you'd do differently.

What is Crossy Road?

Crossy Road is an arcade-style game where a character must cross roads, rivers, and other hazards. The goal is to get as far as possible without being hit. We aren't going to list out all the features here, because we don't want you to just paste those as the entirety of your prompt. Instead, watch this short video to get a sense for the game if you haven't played it before.

And a personal note from Mike: Back in MY day we called this FROGGER. For some of you old folks in the room who might not be familiar with Crossy Road, you might remember this, which is the same in its core respects:

Your challenge: In 30 minutes, using Kiro, build something in JavaScript that mimics Crossy Road as closely as you can, inluding the chunky, blocky, pseudo-3D camera angle. That 2.5D look is a big part of what makes Crossy Road feel like Crossy Road, and finding out how hard (or how easy) that is to get out of an AI is part of the exercise.

You may choose to go straight for the 2.5D look and see how far you get, or you could start with a flat top-down grid to nail the core mechanics (movement, lanes, collisions, scoring) and layer in the 2.5D look afterward if time allows. Prioritize whatever you think will get you furthest in 30 minutes, and be ready to explain your reasoning in the group discussion. Caution: If you ask for everything in one go, your first prompt is likely to fail at finishing in 30 minutes.

Later, how you achieve the 2.5D look is up to you. There are several reasonable approaches and libraries, and part of the point is that you and your AI decide. Whatever you pick, it needs to run in a browser.

This 30-minute version is not what you turn in. Nothing you build in class is graded. It's a starting point and a discussion prompt. If it's a mess, that's useful information, and you're free to throw it away and start over at home.

Note: You may work entirely "vibe coded," or you may debug and modify the code manually. Either approach is fine. You are not required to directly edit the code, though making small targeted adjustments may speed you up considerably.

The Assignment: Finish It

After class, your job is to take the game the rest of the way and put it on your portfolio site so that anyone can click a link and play it in their browser.

Core Requirements

It's a playable browser game. Written in JavaScript, running as a static page. Someone visiting the URL should be able to play it without installing anything.
It works on GitHub Pages. That means plain HTML/CSS/JS with no build step and no server. If you use a library, either link to it with a <script src="https://..."> tag pointing at a hosted copy (a "CDN"), or download the library's file and commit it into your folder yourself. (If your project requires npm run build before it works, it will not work on Pages, so fix that before you submit.)
It's recognizably Crossy Road. A character that moves forward across lanes, hazards that can end your run, and a score that goes up the further you get, at minimum.
It lives in its own folder inside your username.github.io repo, with its own README.md.
Your portfolio links to it from your projects section.

Make It Yours

You are free, and encouraged, to customize the game so that it's unique to you and your interests. Reskin the character, change the setting, change the hazards, add a mechanic, change the art style entirely. The 2.5D Crossy Road clone is the target for the in-class sprint; for your final submission, it's a starting point you can take wherever you want. A game that's obviously yours is a much better portfolio piece than a faithful clone.

The 4-hour cap. This assignment should not consume your week. If you find yourself past roughly 4 hours of work, stop. Commit whatever you have, and add a brief REFLECTION.md to your project folder explaining where you got stuck, what you tried, and what you think was going wrong. A half-finished game plus an honest, specific reflection earns full credit. Grinding for eight hours does not earn you extra credit, and we'd genuinely rather you didn't.

What You Must Submit

Your project folder inside your username.github.io repo, containing:
1. The game code: an index.html plus your JS/CSS/assets, so the folder's URL loads the game directly.
2. README.md: in this folder (not just at your repo root). Include:
  - What the game is and how it differs from stock Crossy Road (1–2 sentences). Don't use AI to write this.
  - How to play: the controls, and how scoring/losing works.
  - Which AI model(s) and tool(s) you used, and a sentence on your overall strategy.
  - Anything known to be broken or unfinished.
3. prompt_log.md (or prompt_log.txt), in the same folder as your README, following the same convention as later assignments in this course. It must name the AI model(s)/tool(s) you used and include your important, non-trivial prompts verbatim, not AI-written summaries of them. Include your in-class prompts as well as the ones from finishing at home; it's useful to be able to see the difference.
4. REFLECTION.md, only if you hit the 4-hour cap without finishing. We're just looking for few honest paragraphs on where you got stuck (written by you; don't give us slop please.).
Portfolio entry: Add the project to your portfolio's projects section, with a short description and a link that plays the game. (Note, if your game is super broken, it's fine to omit this, though we hope that you can get to a working game.)
Form submission: Fill out this form with your links.

Suggested layout

username.github.io/
├── index.html          <-- your portfolio, links to the game below
├── styles.css
└── crossy-road/        <-- name this whatever your game is called
    ├── index.html
    ├── game.js
    ├── README.md
    ├── prompt_log.md
    └── REFLECTION.md   (only if you hit the 4-hour cap)

With this layout, your game is live at https://username.github.io/crossy-road/.

Grading

You'll receive full points for this as long as you invest thoughtful effort in the game and submit the required files on time, with the game playable at its URL. We expect your prompt log to show a real development process with several meaningful exchanges. Some prompts take a long time to run on some models, so don't worry about the raw count.

Don't forget the four-hour cap. If you stopped at 4 hours with an unfinished game and wrote a specific, honest REFLECTION.md, that is a full-credit submission. You will not be graded or judged based on whether you had access to an extremely high-powered model. In fact, we'll probably be more impressed if you use a more mid-range model that can't one-shot the whole project.

Next week...

We'll share some of the submissions and compare approaches, both what people managed in the 30-minute sprint and how the finished versions turned out. We'll focus on which prompting strategies worked best for a given AI model or tool, and on where the sprint version and the finished version diverged.

Detailed Instructions

Step 0: Before class

Install Kiro from kiro.dev and sign in.
Optionally start the student verification with your CMU ID (it may take a few days, and you don't need it for this assignment).
Watch the Crossy Road video above if you've never played it.

Step 1: The in-class sprint (30 minutes)

Decide on your prompting strategy before you start typing (for example, one of the strategies from lecture).
Set a timer for 30 minutes and build in Kiro. Target the full Crossy Road experience, 2.5D graphics included.
Keep your prompts. Kiro logs them for you, but save anything you type elsewhere.
Stop when the timer runs out, even mid-feature. Then we'll discuss where everyone got to.

Step 2: Finish the game (up to ~4 hours, at home)

Decide whether to build on your in-class code or restart with what you learned. Both are legitimate; say which you chose in your README.
Get the core loop solid first: movement, hazards, collision, score, restart.
Then customize it: make it yours.
Test it by opening your index.html in a browser, and watch the browser console for errors (right-click → Inspect → Console).
Watch the clock. At ~4 hours, stop and write REFLECTION.md instead of pushing on.

Step 3: Write your README and prompt log

Create README.md and prompt_log.md inside your game's folder.
Paste your actual prompts into the log, verbatim. Don't ask AI to summarize your session for you; the verbatim prompts are the point.
Note which AI model(s) and tool(s) you used, including anything you used alongside Kiro.

Step 4: Publish and link it

Put the folder in your username.github.io repo, commit, and push.
Visit https://username.github.io/your-folder/ and actually play it. Pages can take a minute or two to update.
Add the project to your portfolio's projects section with a link and a short description.
Submit the form.

The most common way to fail this assignment is a game that works when you open the file locally but breaks on GitHub Pages. Usually it's a capitalization mismatch in a filename (Pages is case-sensitive, your laptop probably isn't), an absolute path like /game.js instead of game.js, or a library you loaded from node_modules. Test locally, but before you consider yourself done, check the live URL and make sure it works.

Tips

Choosing Your Scope

Think strategically about what to build. Here are some scope options, from minimal to ambitious:

Minimal (MVP): Character hopping forward on a grid; one type of hazard; collision detection; score; restart
Moderate: Multiple hazard types (cars, logs/rivers, trains); endless scrolling terrain; increasing difficulty; the 2.5D camera
Ambitious: Animation and easing on the hops; sound effects; a high score saved in the browser; a custom theme that's entirely your own

Hint: Start with the core mechanics and add features if you have time. A working simple game is better than a broken complex one, especially since this one is going on your portfolio where people will actually click it.

Prompting ideas

Some of these tips and partial strategies may help, but this is all up to you.

Be specific in your requests!
Understand the plan: You might consider asking for a plan first, or providing a detailed plan that you wrote, or just asking the AI to explain key decisions.
Ask for structure first: You might start with the main game loop and overall structure, then fill in details
Request incrementally: "Add collision detection for cars" is better than asking for the whole game at once
Use follow-ups: "That's great, now make the cars move faster" or "Add a score display"
Say where it's going: Telling your AI up front that this must be a static site on GitHub Pages with no build step will save you a rewrite later

Pitfalls to Avoid

Tunnel vision: Don't get absorbed in minor aesthetic bugs. Get the game playable end to end first.
Blowing past the cap: Four hours, then stop and reflect. This is a real instruction, not a polite suggestion.
Letting the code get wild or disorganized: Sometimes small bugs are easier to fix yourself, but this is only possible if you understand the code enough to modify and debug it
Forgetting the prompt history: Save this before you close the session! (You can probably get it back if you do close it, but don't risk it.)
Not testing on the live site: "It worked on my laptop" is not a submission. Play it at the real URL before the deadline.

Questions? Ask in Ed, come to office hours, or email Mike. This is meant to be a fun assignment that you can hand to a friend and say "here, play this."