Fork me on GitHub
HTML5 Powered
The future is here. Let's make some games!

Jaws is a Javascript Game Engine

Download Docs as ZIP

How To Learn JS

Oh hi.

I've been doing a lot of minigames & participated in various game compos.

I've been developing a ruby gamedev lib for a couple of years.

I love making games and is very excited over hardware accelerated JavaScript gfx.



Game engine constructors

This is a walkthrough of the most common classes/constructors in JawsJS. For more detailed information please see the full JawsJS Documentation.


One of the first thing jaws implemented was a decent Sprite-constructor. We want to have a higher abstraction for our heroes, enemies, trolls and ninjas. We want to do have easy accessors as ninja.x, ninja.y and methods like player.move() to move the player. Currently available options: sprite = new jaws.Sprite({image: "player.png", x: 10, y: 10, scale: 4, anchor: "top_left"})


Loads a classic sprite sheet and cuts it up into individual images. sprite_sheet = new jaws.SpriteSheet({image: "droid_11x15.png", frame_size: [11,15] }) sprite_sheet.frames.length // 14 sprite_sheet.frames[0] // returns first frame


Most games needs to work with lists of game objects/sprites. Enter SpriteList(). SpriteList is based on Array() but with some added cheese like draw(), update(), drawIf(function), updateIf(function), deleteIf(function) That enables code like this: enemies = new jaws.SpriteList() enemies.push(new jaws.Sprite{image: "enemy.png", x: 100, y: 100}) enemies.update() enemies.draw() function isOutsideCanvas(item) { return (item.x < 0 || item.y < 0 || item.x > jaws.width || item.y > jaws.height) } enemies.deleteIf(isOutsideCanvas)


Create a new animation that will loop through the given frames, showing each frame 150 milliseconds. anim ={frames: sprite_sheet.frames}, frame_duration: 150}) anim.bounce = true will make animation bounce when it reaches the end of the frames instead of re-starting at the beginning. For anim to be able to update it's internal state (what frame is currently showing and so on) we need to call anim.update() on it. The current frame will always available in anim.currentFrame(). A shorter way of Both calling update() and currentFrame() is to do player.image = See Example#3 source code for a good example.


The idea behind a tile map is to fit object into fixed sized boxes, or as they often are called - cells. Once fitted into those cells we can enjoy some very fast lookups/collision detection (basically at the same speed as reading from an 2D array) Example: var tile_map = new TileMap({size: [10, 10], cell_size: [16,16]}) var sprite = new jaws.Sprite({x: 40, y: 40}) tile_map.push(sprite),10) // nil,40) // sprite tile_map.cell(0,0) // nil tile_map.cell(1,1) // sprite


You might have a huge game world, but the canvas-tag you're drawing in is only 500 x 300 pixels. Enter Viewport.

Show a part of your game world

The idea is that you create a new viewport Then you move that around by manipulating its x and y properties: viewport = new jaws.Viewport({max_x: 1000, max_y: 400}) // Move viewport 10 pixels down, effectively moving all game objects using the viewport 10 pixels up viewport.x += 10 max_x set to 1000 means that the game world is 1000 pixels in width and the viewport can't move outside of that. More correctly, the viewports Right side can't move outside that. Then in draw(): // Instead of player.draw() // You do: viewport.apply( function() { player.draw() }) This will draw all objects in relation to the viewport. If the player is way over at position 1020/100 but the viewport is at 1000/100, the above code will paint the player 20 pixels into the canvas. Often you want the player in the middle of the viewport. You can accomplish this with: viewport.centerAround(player) Which basically is a shortcut for: viewport.x = (player.x - viewport.width / 2) viewport.y = (player.y - viewport.height / 2) Nothing stops you from having several viewports in the same game.