1. Workshops
  2. retired
  3. Soccer

Soccer

A simple soccer game

Created by Hack Club staff

Edit

Hack Club logo Computer Science Tutorials

Soccer

A simple soccer game

Created by Hack Club staff

You can find this tutorial online at https://hackclub.com/workshops/soccer


Soccer

This workshop has been retired and is no longer maintained or recommended.


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

How was this workshop?

(your feedback is anonymous + appreciated 💙)

Made something rad?

Share it! 🌟

Spotted an issue?

Edit on GitHub