34
0
0

Crafty JS Tutorial (DX Ball / Breakout)

Mahmoud Adly EzzatviaFirnas Lab
June 30, 2013




Introduction:



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.



Prerequisites:

  • 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)
Discussion

-