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 works , Download 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)
