Jaws HTML5 javascript game lib
Jaws is a 2D game lib powered by HTML5. It started out only doing canvas but is now also supporting ordinary DOM based sprites through the same API.
Game engine highlights
- Sprite() - Onscreen, movable, scalable objects
- Game states - Separate sections of your game for better organized code
- SpriteSheet() and Animation() - Load spritesheets and animate frames
- Assets - Jaws will preload all your images before the game starts
- Documented code and explained examples
- Does Not depend on any other javascript library
- Builds on lessons learned from years of developing Chingu, a Ruby game lib
Design
Jaws uses the module pattern heavily. I won't go into explaining as, other ppl
will do it better.
To be able to split up jaws into smaller source-files we use the "Loose augmentation" pattern from This great article.
To load jaws you link to it with a script-tag. You have some options how to load it:
- jaws.js - includes the whole framework in one easy-to-include file.
- jaws-min.js - same as jaws.js but minified with Googles closure compiler.
- jaws-dynamic.js - dynamically loads all separate jaws files. Useful for debugging errors in Jaws.
You can also load any parts of Jaws you want (and skip the rest), just link to any of the invidual srcfiles and you're set.
Note, core.js always needed. But then you can pick and choose depending on what you need. A rule of thumb is that a file foo.js will include a contructor named Foo().
One global - jaws
Everything you do in Jaws will be through the (only) global object jaws, for example jaws.switchGameState(PlayState), or jaws.canvas.
Jaws will help you with loading assets, drawing and modifying sprites on the screen, handle keyboardinput and keeping your game organized with game states.
We follow this naming pattern:
jaws.oneFunction()
jaws.one_variable = 1
new jaws.OneConstructor()
Jaws have well defined constructors for various tasks but will also provide some "magic" glue to quickly get started (jaws.start() for example).
It will detect your pre-made canvas-tag. But if none exist, it will try to create one for you. The idea is to have detailed control when you need it, but also try to help when you just want to start out quickly.
Jaws doesn't do too many abbreviations. Example: it's jaws.context, not jaws.ctx.
If we do provide "shortcuts" to various data/functions, it will most likely accompanied by a default longer name.
If you grow tired of prefixing everything with jaws. check out the jaws.unpack() command which will put important jaws-functions like Sprite(), switchGameState() and so on in the global namespace.
Classic gameloop
Jaws will take care of keeping the FPS and moving the game forward for you.
What you need to provide is a minimum of 1 method where your gamelogic/drawing will happen.
Recommended is 3 methods like this:
function MyGameState() {
/* Called once. Put your one-time initializing here. */
this.setup = function() { ... }
/* Called each gametick. Put your gamelogic here. */
this.update = function() { ... }
/* Called each gametick after update(). Put your drawing here. */
this.draw = function() { ... }
}
jaws.start(MyGameState)
If you skip setup() and update() it will still work. draw() will be called every gametick with your given FPS. So your gameloop can consist of only 1 method if you want. Though building something over a tiny example, we recommend separating gamelogic into update() and screen-manipulation into draw().
You can also use Object Literal Notion like this:
myGameState = {
setup: function() { ... }, /* Called once */
update: function() { ... }, /* Called each gametick */
draw: function() { ... } /* Called each gametick after update() */
}
jaws.start(myGameState)
Read more about Game states here.
Try out some simple examples
example #2
example #3
example #4
example #5
example #6
example #7
example #8
example #9
example #10
example #11
example #12
Full Jaws games
Unexpeted Outcome - an short low-fi adventure
Unwaivering - short game about true love
Want Your Jawsgame here? Contact me at github
