Crafty

JavaScript Game Engine

Game engine
craftyjs/Craftycraftyjs.comcraftyjs

README

# Crafty JS Travis Build Status AppVeyor Build Status Sauce Test Status

Crafty is a JavaScript game library that can help you create games in a structured way…

Key Features:

Entities & Components - A clean and decoupled way to organize game elements. No inheritance needed!
Eventbinding - Event system for custom events that can be triggered whenever, whatever and bound just as easily.
No dom manipulation or custom drawing routines required.

Other Goodies:

Thriving community - Help is readily available in the forum.
Community modules - A growing collection of user-generated code you can use.
Pure JavaScript - No magic. Works in all major browsers and can be combined with your favorite js library.


Using Crafty


A simple game of pong:
  1. ``` js
  2. Crafty.init(600, 300);
  3. Crafty.background('rgb(127,127,127)');

  5. //Paddles
  6. Crafty.e("Paddle, 2D, DOM, Color, Multiway")
  7.     .color('rgb(255,0,0)')
  8.     .attr({ x: 20, y: 100, w: 10, h: 100 })
  9.     .multiway(200, { W: -90, S: 90 });
  10. Crafty.e("Paddle, 2D, DOM, Color, Multiway")
  11.     .color('rgb(0,255,0)')
  12.     .attr({ x: 580, y: 100, w: 10, h: 100 })
  13.     .multiway(200, { UP_ARROW: -90, DOWN_ARROW: 90 });

  15. //Ball
  16. Crafty.e("2D, DOM, Color, Collision")
  17.     .color('rgb(0,0,255)')
  18.     .attr({ x: 300, y: 150, w: 10, h: 10,
  19.             dX: Crafty.math.randomInt(2, 5),
  20.             dY: Crafty.math.randomInt(2, 5) })
  21.     .bind('UpdateFrame', function () {
  22.         //hit floor or roof
  23.         if (this.y <= 0 || this.y >= 290)
  24.             this.dY *= -1;

  26.         // hit left or right boundary
  27.         if (this.x > 600) {
  28.             this.x = 300;
  29.             Crafty("LeftPoints").each(function () {
  30.                 this.text(++this.points + " Points") });
  31.         }
  32.         if (this.x < 10) {
  33.             this.x = 300;
  34.             Crafty("RightPoints").each(function () {
  35.                 this.text(++this.points + " Points") });
  36.         }

  38.         this.x += this.dX;
  39.         this.y += this.dY;
  40.     })
  41.     .onHit('Paddle', function () {
  42.         this.dX *= -1;
  43.     });

  45. //Score boards
  46. Crafty.e("LeftPoints, DOM, 2D, Text")
  47.     .attr({ x: 20, y: 20, w: 100, h: 20, points: 0 })
  48.     .text("0 Points");
  49. Crafty.e("RightPoints, DOM, 2D, Text")
  50.     .attr({ x: 515, y: 20, w: 100, h: 20, points: 0 })
  51.     .text("0 Points");
  52. ```
_Left paddle is controlled by W & S, right paddle by UpArrow & DownArrow._  
Check it out online and try to modify it yourself here.

Developing


If you want to fix a bug, please submit a pull request against the development branch.  Some guides to help you can be found on the wiki

If you would like to make larger contributions please catch us in the forum and we will help you get started. Much appreciated :-)


Quick build instructions


The easiest way to build crafty is to use gruntjs, which requires node and npm.  If you have grunt, node, and npm already installed, then runnpm install from Crafty's root directory.  (This will pull down about 30MB of node packages.)  From then on, just run grunt to build.

You can also use yarn instead of npm.

(Full instructions here.)