Visit LEDU token page

How to create a Dungeon Crawler game in JS

How to create a Dungeon Crawler game in JS

  • English
  • Game Development
  • GameDevGameDev
  • (2490)
  • Project length: 11h 58m

In this tutorial we will focus on prototyping dungeon crawler game using Javascript ecosystem capabilities. We will use extensively tools such as npm, gulp and babel and several libraries (pixi, greensock) to speed up the process.


This tutorial will guide you through main aspects of creation the dungeon crawler. Together we will build game features with small iterations and discuss how different parts could be glued together to make a whole game loop. In the end we will have simple, yet whole prototype of simple crawler game.

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
  • Awareness of pixi rendering engine
  • 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

When are the streaming sessions (streaming schedule)?

Single sitting streaming marathon

Project Outline

Session 1: Setting up project (build/reload)

  • Getting hot reload to work
  • Introducing .env and what to do with it
  • How assets should be placed and digested for the runtime
  • Regular and irregular tasks
  • Making a preloader splash screen with pure html/vanilla js
  • Loading assets with pixi loaders
  • Loading fonts
  • Asset preparation

Session 2: High level logic

Session 2.1:

  • Making rails for the technical game loop update - renderer, simulation, HUD
  • Creating renderer and layering

Session 2.2:

  • Introducing game object entities
  • Working with resources, producing static image and animated sprite

Session 3: Level generation

  • Base architecture of map: isles and tilemap
  • Visually constructing the map pieces and layouting them

Session 4: Simulation, input, tilemap collision

Session 4.1: Basic controls and movement

Session 4.2: Reacting to obstacles and interactive objects

Session 5: Improving tilemap collision with SAT library

Session 5.1: Trigger events and map travel

Session 5.2: Wrapping teleport travel

Session 6: Camera integration

Session 7: Animation system

Session 8 Enemies

Session 9: Polishing and finalizing what we have

  • Dying and restaring
  • Fixing the teleports
  • Fixing the tilemap
  • Populating with ghosts
  • Putting in sfx
  • Publishing on firebase


Average rating

4(2490 Reviews)