A micro framework for JavaScript games.
Handles collision detection, the game update loop, keyboard input and canvas rendering.
$ npm install coquette
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); });
Instantiate Coquette, passing in:
"canvas"
."#000"
.var coquette = new Coquette(game, "canvas", 150, 150, "#000");
When you instantiate Coquette, you get an object that has five modules. You can use these modules in your game.
Handles keyboard input from the player.
Call coquette.inputter.state()
, passing in the key's code, e.g.:
var pressed = coquette.inputter.state(coquette.inputter.LEFT_ARROW);
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.
Holds the canvas drawing context. Calls draw()
on the main game object and all game entities.
var ctx = coquette.renderer.getCtx(); ctx.fillStyle = "#f00"; ctx.fillRect(0, 0, 10, 10);
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
Keeps track of all game entities: the player, enemies.
Call coquette.entities.create()
with:
Bubble
. When this constructor is called, it will get passed the main game object and a settings object.{ radius: 60 }
.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.
Call coquette.entities.destroy()
with:
bubble
.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.
var all = coquette.entities.all();
var player = coquette.entities.all(Player)[0];
Reports when two entities collide.
To make an entity support collisions, put these attributes on it:
pos
: the top left corner of the entity, e.g.: { x: 10, y: 20 }
.size
: the size of the entity, e.g.: { x: 50, y: 30 }
.boundingBox
: the shape that best approximates the shape of the entity, either coquette.collider.RECTANGLE
or coquette.collider.CIRCLE
.And, optionally, these methods:
collision(other, type)
: called when the entity collides with another entity. Takes other
, the other entity involved in the collision. Takes type
, which will be coquette.collider.INITIAL
if the entities were not colliding in the previous tick, or coquette.collider.SUSTAINED
if the entities were colliding in the previous tick.uncollision(other)
: called when the entity was colliding with other
in the last tick, but is no longer.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."); }; };
The code is open source, under the MIT licence.