Fork me on GitHub

Coquette


About

A micro framework for JavaScript games.

Handles collision detection, the game update loop, keyboard input and canvas rendering.

Get the code

Example

A game where you, the valiant player, must find a person of indeterminate gender in distress so you can take them away from all this. Click on the game, then press the up arrow key to play.

An HTML page that includes the Coquette library and the game code:
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="../../coquette.js"></script>
    <script type="text/javascript" src="game.js"></script>
  </head>
  <body><canvas id="canvas"></canvas></body>
</html>
The game code:
var Game = function(canvasId, width, height) {
  var coq = new Coquette(this, canvasId, width, height, "#000");

  coq.entities.create(Person, { pos:{ x:243, y:40 }, color:"#099" }); // paramour
  coq.entities.create(Person, { pos:{ x:249, y:110 }, color:"#f07", // player
    update: function() {
      if (coq.inputter.state(coq.inputter.UP_ARROW)) {
        this.pos.y -= 0.4;
      }
    },
    collision: function(other) {
      other.pos.y = this.pos.y; // follow the player
    }
  });
};

var Person = function(_, settings) {
  for (var i in settings) {
    this[i] = settings[i];
  }
  this.size = { x:9, y:9 };
  this.draw = function(ctx) {
    ctx.fillStyle = settings.color;
    ctx.fillRect(this.pos.x, this.pos.y, this.size.x, this.size.y);
  };
};

window.addEventListener('load', function() {
  new Game("canvas", 500, 150);
});

Demo game

Reference

Getting started

Instantiate Coquette, passing in:

var coquette = new Coquette(game, "canvas", 150, 150, "#000");

Modules

When you instantiate Coquette, you get an object that has five modules. You can use these modules in your game.

Inputter

Handles keyboard input from the player.
Find out if a certain key is pressed
Call coquette.inputter.state(), passing in the key's code, e.g.:
var pressed = coquette.inputter.state(coquette.inputter.LEFT_ARROW);

Ticker

Does a tick - an iteration of the game update loop - sixty times a second. If the main game object or a game entity has an update() function, it will get called on each tick. If the main game object or a game entity has a draw() function, it will get called on each tick.

Renderer

Holds the canvas drawing context. Calls draw() on the main game object and all game entities.

Get the canvas drawing context
var ctx = coquette.renderer.getCtx();
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, 10, 10);
Set the order that entities are drawn

When you create your entities, include some integer zindex attribute in the settings object. An entity with a higher zindex will get drawn on top of an entity with a lower zindex. The default zindex is 0.

coquette.entities.create(BackgroundTile, { zindex: -1 });
coquette.entities.create(Player, { zindex: 1 }); // drawn on top

Entities

Keeps track of all game entities: the player, enemies.

Create an entity

Call coquette.entities.create() with:

var Bubble = function(game, settings) {
  this.game = game;
  this.radius = settings.radius;
};

var myBubble;
coquette.entities.create(Bubble, {
  radius: 60
}, function(bubble) {
  myBubble = bubble;
});

When you create an entity with the Entities module, the entity will not actually get created until the next tick. This avoids logical and collision detection problems that arise from creating an entity mid-tick.

Destroy an entity

Call coquette.entities.destroy() with:

coquette.entities.destroy(bubble, function() {
  console.log("boom");
});

When you destroy an entity, it will not actually get destroyed until the next tick. This avoids logical and collision detection problems that arise from destroying an entity mid-tick.

Get all the entities in the game
var all = coquette.entities.all();
Get all the entities of a certain type
var player = coquette.entities.all(Player)[0];

Collider

Reports when two entities collide.

Entity setup

To make an entity support collisions, put these attributes on it:

And, optionally, these methods:

e.g.:

var Player = function() {
  this.pos = { x: 10, y: 20 };
  this.size = { x: 50, y: 30 };
  this.boundingBox = coquette.collider.CIRCLE;

  this.collision = function(other, type) {
    if (type === coquette.collider.INITIAL) {
      console.log("Ow,", other, "hit me.");
    } else if (type === coquette.collider.SUSTAINED) {
      console.log("Ow,", other, "is still hitting me.");
    }
  };

  this.uncollision = function(other) {
    console.log("Phew,", other, "has stopped hitting me.");
  };
};

Licence

The code is open source, under the MIT licence.