Visit LEDU token page

How to make educational game about garbage sorting in JS

How to make educational game about garbage sorting in JS

  • English
  • Game Development
  • GameDevGameDev
  • (1980)
  • Project length: 6h 31m

In this tutorial we will create simple educational cross platform game for kids using Javascript ecosystem capabilities. We will use extensively tools such as npm, gulp and babel and a bunch of libraries to speed up the process.


This tutorial will guide you through the design and implementation of a game about sorting garbage. In it, garbage will fall down and you'll need to catch it with proper garbage bins.

What are the requirements?

  • Basic knowledge of html and website structure
  • Experience with Javascript ES6, npm, gulp and babel
  • Familiarity with gulp's scriptable tasks
  • Desire to make games

What is the target audience?

  • You know some js and ready to work without game engine
  • You interested in emerging mobile game market

Project Outline

Session 1: Project setup

Session 1.1:

  • Getting hot reload to work
  • Getting build tasks ready
  • Setting up all the libraries

Session 1.2:

  • Asset load pipeline
  • Picking grahpics Assets

Session 1.3:

  • Picking SFX
  • Picking and integrating webfont

Session 2: Minimal project engine

  • Renderer
  • Stretching
  • Testing graphics, fonts and sfx

Session 3: Core game loop

Session 3.1:

  • Making garbage fall from the sky
  • Making several bins and garbage types

Session 3.2:

  • Making bins draggable

Session 3.3:

  • Catching garbage with bins

Session 4:

  • Lose condition
  • Scoring
  • Making UI for scores

Session 5: Making more UI

  • Begin UI
  • You lost UI

Session 6: Polishing and Wrapping

  • Spinning garbage
  • Progression of difficulty
  • Split garbage and bins into layers
  • Hosting on firebase
  • Share score to twitter


Average rating

4(1980 Reviews)