Crafty JS Tutorial (DX Ball / Breakout)

Mahmoud Adly EzzatviaFirnas Lab
June 30, 2013


This Crafty JS tutorial is part of Alkottab Studio's internship program, to take developers with no previous game development experience in the quickest way to production phase.


  • Previous development experience.
  • The very basics of HTML/CSS/Javascript.
  • Finishing the first part of the Crafty tutorial on its website. [ How Crafty worksDownload and Setup ]

Section 1: Game description:

  • A ball continuously moving and hitting walls and bricks.
  • Bricks are destroyed and points are collected when hit by the ball.
  • User controls a bat and moves it right and left to prevent the ball from hitting the ground.
  • If the ball hits the ground, a life is lost.

Section 2: File Structure:

Before starting the tutorial, it is better to explain how the files are arranged:

  • index file : links to JS files, game div, some simple CSS.
  • js directory: Crafty file and game file.
  • assets directory: images and spritesheets used.

Section 3: Coding considerations:

  • For a cleaner code, some complex game items will be separated as Crafty components to be used later in game scenes.
  • To handle game constants, variables and cross-component calls (like an object wanting to affect the score bar), I will make a simple game manager to contain values and functions connecting between components.

Section 4: Scenes:

  • Loading: A scene only for loading game assets and giving the user a progress indication.
  • Home: Main Menu screen of the game. For now, it will contain only a start button, but it can have more buttons and some graphics representing the game.
  • Game: the scene with the actual play.
  • Total Score: When a user wins or loses, this scene will show the total score.

For the complete tutorial, view the PDF file online (link) or download the PDF + code (link)