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


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() {



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.


Please enter your comment!
Please enter your name here