Soccer

A simple soccer game. Created by Hack Club staff.

Edit on GitHub

Soccer

RETIRED

This workshop has been retired and is no longer maintained.

Note to leaders running this workshop: we’re replacing Soccer with Dodge. We recommend running this in your clubs instead.


In this tutorial, we’ll walk you through building a single-player soccer game.

bttn play now

bttn view code

From there, the tutorial is designed to have you continue to expand on your game. Here is an example of what you could end up making:

bttn play now bttn view code

How to Use This Tutorial

Don’t feel that you have to follow along step-by-step. Figure out the best way to navigate this tutorial for you. This might look like the following:

If you have never programmed before:

If you have programmed a little:

If you have more experience:

Setup

  1. If you’re more experienced and want to use your own editor, follow these instructions.
  2. If you haven’t already, make sure you have a JS Bin account first. Create one here.
  3. Then open this JS Bin. It has all the starter code we need for this tutorial. Write any new code in this JS Bin. We’ll refer to this JS Bin as your “working bin”.

Some Quick Vocabulary

Each interactive element in the game (the player, ball, and the goal) is called a sprite.

r vocab 1

The entire area on which everything lives is called the canvas:

r vocab 2

Getting Started

The instructions below will walk you through step-by-step of how to build a single player soccer game.

1 mini
1. Initial Setup
2 mini
2. Add Player Sprite

3. Mouse Movement

4. Dribble Ball

5. Add Goal

F.A.Q

What programming languages and libraries are we using?

Listing of Computer Science Concepts