Welcome

This course aims to introduce the basics of game development and programming through hands-on interactive projects. Each day is focused on a single programming concept and showcases how that concept is used within the context of a simple game.

Notes and Recommendations:

  • This course is broken up into 6 Jippity projects with the last 2 days reserved for individual capstone projects.
  • No programming experience is necessary for this course.
  • Have students fork each day's template project to save a copy to their own account to enable individual editing and development.
Day 1: Intro to Jippity

The first day is dedicated to introducing students to the basic workflow and functionality of Jippity. If they haven't done so already, have students set up their Jippity account.

Jippity Homepage

Have students type a simple game idea (Flappy Bird, for example) into the input box or select a template project.

Jippity Editor

Once they are at the project screen, briefly discuss the basic workflow on Jippity: Prompt the AI, then apply the code to your project. For this demo, it is highly recommended to keep the prompts very simple at first, things like changing the background color or displaying an emoji on screen. Students can refer to the welcome video if needed.

Day 2: Variables

Today's project is focused on variables. Within the project itself, you will find detailed notes to help guide the students in their introduction to this fundamental programming concept.

Variables Project

This simple game leads students on an interactive journey requiring them to make real edits to the code itself. By the end of this day, students will have a basic understanding of what a variable is and why they are useful.

Variables Editor
Day 3: Functions

Day three's focus is functions - one of the most important concepts in programming. This project is intentionally bare-bones, so much so that initially the character can't even move! This allows the students to understand the importance and power of functions, and reinforces the fact that every single aspect of the functionality of the game is the responsibility of the programmer.

Functions Project

The first goal of the day is to implement a basic movement function. Students should first add simple left and right movement, asking Jippity for help. After basic movement is working, try implementing a jump mechanic by imitating the code used for left and right movement. Did this work as expected? If done correctly, the character will fly away! This is a great time for a discussion on how the code for left and right works, and why the same thing didn't work for jump. Ask Jippity for help with implementing jump correctly and examine the code (This is a great time to make use of the "explain" feature!). Should time allow, discuss the difference between a function definition and a function call, demonstrating with the handleCharacterMovement() being called from the draw() function.

Day 4: Arrays

The topic for day 4 is arrays and their basic functionality. This interactive puzzle game introduces four basic array operations: push, pop, shift and unshift. As the students progress through the game, have a brief discussion on each new operation as they become available.

Arrays Project

In the later levels of the game with all four operations available, pose questions like:

  • Are there multiple ways to solve this puzzle?
  • What is the least number of operations needed to solve this puzzle?

After completing the game, have students design their own level. Start with the initial array and the solution array, then think through the steps required to solve the new level.

Day 5: Loops

Day 5 is all about loops. At this point in the course, we have already seen loops in action, but we will explore them in greater detail today.

Loops Project

Similar to the functions project, this project is fairly bare-bones to give students room to develop the project in whatever direction they choose. First, briefly discuss the concept of a loop in general, using the drawFiredFruits() method as an example. This for loop is written in two different ways that both produce the same result - can you see the difference?

Day 6: Conditionals

Day 6 is dedicated to conditionals. We have seen many instances of the most basic conditional, the "if" statement, already. Briefly discuss the basic if statement using the if statements found in the handleCharacterMovement() function as examples (Do you remember this same thing from the second day?).

Conditionals Project

Then, have students scan through the code and look at some of the other if statements they find. Call on students to discuss a particular if statement with a goal of covering conditionals such as:

  • If - else
  • Nested if statements
  • If statements with multiple conditions
  • ||
  • &&
  • >, < and ===

If time allows, discuss the switch statement found in the drawCharacter() function.

Day 7: Capstone Project

It is now time for students to make their own projects! Before diving in, students should take 5-10 minutes making a loose outline of their project. Once they have an outline, set them off to begin work on their capstone project. As they work, take opportunities as they come to discuss and reinforce the concepts covered throughout the course.

Day 8: Capstone Project

On the last day of this course, students will finalize their capstone project. With the last 10-15 minutes, have students showcase their work and ask questions about the underlying programming concepts that power their projects.