Web-based Game Development with JavaScript

Getting Started

Cat/Dog

1: Setting Up a Game Window

2: Positioning Elements

4: Random Numbers

5: Selecting Elements & Dynamically Changing CSS

6: Linking to External css and js Files

C1: Click me if you can

Shooting Monkeys

7: Load HTML Elements before Selecting them in JavaScript

8: Hiding the Overflow of an Element

9: Creating a Game Loop

10: Animating with a Game Loop

11: Conditional Statements

12: Using a Variable to Keep Score

12.5: Attention to details

C2: Add Challenge to Shooting Monkeys

Rock Paper Scissors

13: Dynamically Changing the SRC of an IMG Element

14: Passing Variables to Functions

15: Hiding and Showing Elements

16: Nesting If Statements and the Else If

17: Setting up an Intro Screen

18: Creating an End Game Screen with a Replay Button

C3: Adding Screens to Shooting Monkeys Game

Pacman

19: Detecting Keyboard Input with Event Listeners

20: Moving an Element via Keyboard Input

21: Dynamically Adding Classes

22: Dynamically Creating HTML Elements

23: Checking for Collisions: the Hit Test

C4: Adding a Hit Test to the Cat/Dog Project

Pacman Continued

24: Using an Array to Manage a Group of Elements

25: Looping through an Array

C5.1: Adding Walls to Create the Pacman Maze

26: Adding and Moving a Ghost

27: Artificial Intelligence

C5.2: Adding Ghosts

IQ Test

28: Parallel Arrays

31: Randomizing the Order of Problems

C6: Increasing Replayability of the IQ Test

2D Scroller: Mousing Around

32: Parallax Scolling

33: Debugging with the Console

36: Embedding Audio from SoundCloud

37: Audio Files

C7: Shooting Zombies

Hangman

38: A String as an Array of Characters

39: Adding onclick Functionality with JavaScript

40: String Manipulations

41: Removing Children from a Parent Element

Space Invaders

42: Repeating the Background

43: Accessing Child Elements

44: Adding Properties to Objects

45: Radial Collision Detector

46: Nested Loops

Platformer

47: Creating Platforms

48: Improving Platform Behavior

49: Implementing Levels

C10: Usability Testing

51: Animation with Spritesheets

Student Work