Build a game, one step at a time

Game Development.

Choose a game, make its pictures, and learn how the pieces work together.

1. Choose your game

Pick a game you want to make. Then choose its name, characters, and theme.

Game How you play Pictures we can make
Catch Falling Coins Move a basket to catch falling objects. A basket, a coin or other object, and a background.
Dodge the Traffic Steer between lanes to avoid other cars. Your car, another car, and a road background.
Snake Collect food, grow longer, and avoid hitting the walls or your own body. A food picture and a background. The code can draw the snake.
Solo Pong Move a paddle to keep a ball bouncing. A background, with optional pictures for the ball and paddle.
Mini Platformer Run, jump, collect items, and reach the finish. Start on one screen; add side-scrolling in a later version. A character, a collectible, and a background. The code can draw the platforms and finish flag.

2. Get to know the files

A file holds something we save. Its name ending, such as .png, helps us recognize what kind of file it is.

File type What it is How we use it
.txt Plain text. Write the game name, rules, and picture list.
.png An image that can have a transparent background. Create a character, coin, or other object.
.jpg / .jpeg Two filename endings for the same photo format. Save a background or scene picture.
.webp Another image format used by browsers. Keep this ending if it is the format your picture downloads in.
.mp3 / .wav Sound files. Add a short collection or success sound, if time allows.
.html The page the browser opens. Hold the game board, title, score, and buttons.
.css Code for appearance. Set the page colors, layout, and styles.
.js JavaScript code for behavior. Control movement, scoring, and the game rules.

We will start with text and pictures. Sound is optional. For our first game, the HTML, CSS, and JavaScript can stay together in one .html file, with the pictures saved beside it in an assets folder.

3. Create the pieces for your game

The pictures and sounds a game uses are called assets. Today we will make a few useful pieces and practice saving and finding them.

  1. Make a home for your project

    Create a folder for your game, such as Home Lab → My Game on your Desktop. Then create an assets folder inside it.

  2. Write a short plan

    Use Notepad or another text editor to create game-plan.txt. Write the game name, what the player does, and which pictures you need.

  3. Create two or three pictures

    Draw them or ask Copilot to help generate them. Start with the pictures your chosen game needs. Give each picture a clear job, such as the player, an item to collect, or the background.

  4. Save, reopen, and check

    Download or save the pictures in assets. Use clear names and keep their actual file endings. Open each file again to check it, then write its exact filename and purpose in your plan.

Example folder for Mini Platformer
Home Lab/
  My Game/
    game-plan.txt
    assets/
      player.png
      collectible.png
      background.jpg

Your files may have different names or endings. Renaming a .jpg to .png does not convert it. Practice finding your files and explaining what each one will do.

4. Next class: build and play test

Bring your saved plan and assets. We will start putting the pieces together.

We will use Copilot to help write the game code, connect your pictures and any sounds, and open the game in a browser.

  • Build: Make a small first version using your plan and files.
  • Play test: Try the controls, check the score or goal, and see whether Restart works.
  • Improve: Describe what happened, fix a problem, or change one thing and test again.

We will check the AI’s work together and build at a pace that leaves room to understand each step.