Visit LEDU token page

Space shoot'em up game in HTML5 and JS

Space shoot'em up game in HTML5 and JS

  • English
  • Game Development
  • GameDevGameDev
  • (4494)
  • Project length: 16h 30m

Modern JavaScript can be quite confusing to a newcomer. What tools and dependencies to use? What flavor of language should be used to write the app? This tutorial offer a simple take on using minimal tools and dependencies for better understanding the core language and its benefits, creating web\mobile web game from scratch.


Project Introduction

This tutorial guide you through the process of making a simple shoot'em up game using modern JavaScript. Together we will build the game and discuss ecosystem. The purpose of the tutorial is to share developer and problem solving skills, using the project as exposition.

What are the requirements?

  • Basic understanding of JS, HTML, CSS
  • Basic experience with developer tools and version control systems
  • Desire to make games

What is the target audience?

  • You want to make games a little harder way
  • Developers who are interested in modern JS as a rising game platform

When are the streaming sessions (streaming schedule)?

Weekly Monday at 2pm EST

Sources to project hosted on github here

Project Outline

Session 1: Setting-up

  • Setting up tools and libraries - nodejs, gulp, pixi.js renderer, and how they fit together
  • Setting up project boilerplate - looking on build process and single page approach

Session 2: Game engine

  • Closures and composition in javascript and how it applies in game development
  • Assets handling with pixi.js
  • Looking on a game loop and how it could be made
  • Encapsulating responsibilities

Session 3: Spawning, Input, Layers

  • Spawning manager
  • Input and endless scrolling
  • Layers in pixi.js

Session 4: Improved controls and hit detection

  • Frame-independent animation
  • Improved controls
  • Extending spawning manager
  • Hit detection
  • Small visual tweaks

Session 5: Collision reaction and player state

  • Introduce dedicated object classes with composition
  • Randomize spawning objects
  • Player state
  • Collision reaction
  • Health bar

Session 6: Bullets

  • Unifying object types
  • Adding Bullets to game as game object and simulating entity
  • Debris objects reaction to bullets

Session 7: Better bullets and Pickups

  • Fixing bugs from previous session
  • Improving bullet system for further use
  • Adding healthpack pickup

Session 8: Sudden refactor

  • Incapsulating update methods for further use

Session 9: Enemies

  • Introduced new object type: simple AI enemies

Session 10: Enemies 2

  • Adding different movement and shooting behaviours

Session 11: Gameplay improvements

  • Powerup: speed
  • Powerup: health
  • Powerup: shooting frequency

Session 12: Gameplay improvements 2

  • Adding missing art
  • Implementing secondary weapon


Average rating

5(4494 Reviews)