¶ ↑
Jaws - HTML5 Javascript web game development libraryDepends on JavaScript Edition 5. Works with Chrome 9+, Firefox 3.6+, Safari 5+ & IE9.
Licensed under LGPL so you’re free to use it for commercial projects.
¶ ↑
Highlights-
Animation(), Sprite(), SpriteSheet(), TileMap(), Assets() and other useful constructors
-
Easy and robust game state system to switch between menus, play, high score lists and settings
-
JSDOC Documentation & commented examples
Jaws also:
-
Does <canvas>-sprites and exprimental HTML-based sprites
-
Does not depend on any other JavaScript library
-
Doesn’t try to force a certain “JS class pattern” on you, just pure JavaScript as mother nature intended it
-
Tries to make assets (images, music, json data) in webgames as easy as possible
-
Often does object literals as arguments for readabillity (ie. new Sprite({image: “player.png”, x: 100, y: 100})
-
Builds on lessons learned from years of developing github.com/ippa/chingu (Ruby game lib)
¶ ↑
Learn more-
jawsjs.com/docs/index.html - Jaws documentation
-
jawsjs.com/ - Official Jaws homepage. Overview and design choices.
-
jawsjs.com/jawsjs/test/index.html - Jaws testsuite (QUnit)
¶ ↑
Jaws is still beta… So don’t base your commercial projects on it. APIs has started to settle down, but there will still be changes ahead.
¶ ↑
Simple examples demonstrating certain featuresCheck out the sourcecode for comments and explanations:
-
jawsjs.com/jawsjs/examples/example0.html - get a Jaws-app working with as little code as possible
-
jawsjs.com/jawsjs/examples/example1.html - basic example with manual setup of canvas
-
jawsjs.com/jawsjs/examples/example2.html - jaws game states
-
jawsjs.com/jawsjs/examples/example3.html - jaws.Animation
-
jawsjs.com/jawsjs/examples/example4.html - jaws.Rect based collision detection
-
jawsjs.com/jawsjs/examples/example5.html - the jaws.Sprite({anchor: “…”}) parameter
-
jawsjs.com/jawsjs/examples/example6.html - jaws.Parallax
-
jawsjs.com/jawsjs/examples/example7.html - simple DOM-based sprite
-
jawsjs.com/jawsjs/examples/example8.html - jaws.TileMap
-
jawsjs.com/jawsjs/examples/example9.html - jaws.Viewport (The basics for a sidescrolling platformer right here)
-
jawsjs.com/jawsjs/examples/example10.html - jaws.game_states.Edit, a simple map editor
-
jawsjs.com/jawsjs/examples/example11.html - jaws.gfx.retroScaleImage and Literal Notion game state
-
jawsjs.com/jawsjs/examples/example12.html - jaws.viewport.drawTileMap() - optimized tile map drawing
¶ ↑
Games using Jaws-
ippa.se/webgames/the_escape/index.html - “The Escape” - My Ludum Dare #21 entry. Adventure/Puzzle.
-
ippa.se/webgames/unexpected_outcome/index.html - A 10-minute adventure game with pixel-perfect collisions
-
ippa.se/webgames/unwaivering/index.html - A Jaws-game for www.ludumdare.com/compo/2011/01/25/minild-24/
… missing your game here? Msg me on github!
¶ ↑
Loading Jaws-
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. This is probably what you want to include in your project.
-
jaws-dynamic.js - dynamically loads all separate jaws files. Useful for debugging errors in Jaws. Warning, jaws-dynamic.js loads all jaws source-files asynchronously meaning Jaws might not be fully loaded before the browser
-
reaches your game.js or likewise. Jaws tries to solve this issue by calling jaws.onload() when all files are loaded.
You can also link to invidual files in your HTML:
<script src="/jawsjs/src/core.js"></script> <script src="/jawsjs/src/sprite.js"></script>
NOTE: core.js is always needed but after that you can pick and choose depending on what you need. A rule of thumb is that a file named “foo.js” will include a contructor named Foo().
¶ ↑
ContributeJaws accepts contributions, some simple guidelines:
-
Formatting: oneFunction(), OneConstrutor() and one_variable
-
Don’t patch jaws.js or jaws-min.js
-
Please bundle tests with non-trivial patches
-
Naming shouldn’t consist of abbreviations, let’s use “context”, not “ctx”
Jaws has gotten contributions from: github.com/gregmax17 - viewport related stuff
¶ ↑
Example/* * Jaws will provide powerful functions like jaws.start() to quickly get a robust gameloop running. * It's also possible to do it more manually, fetch your own canvas context and sent it to new Sprite() for example. * Nothing stops you from using jaws.assets or other jaws.helpers with your own game loop either. * * Below code shows the preferred way, letting jaws worry about most of the boring setup stuff * so we can get straight to get game logic. */ <html> <script src="jaws.js"></script> <body> <canvas width=500 height=300></canvas> <!-- don't set width/height of canvas with CSS --> <script> /* * Jaws encourages the use of game states to separate various parts of your game. * We send MyGameState to jaws.start() to start with. * You can later switch to another game state with jaws.switchGameState(OtherGameState) */ function MyGameState() { var player; var robot; /* Put your one-time initializing here. Will get called once each time this game state is activated. */ this.setup = function() { /* * Make a sprite, place it at position 10/200 * The string "player.png" will resolve to a previously fetched resource * We let jaws worry about what canvas to paint to here. * If we want we could simple pass {context: my_canvas_context} to Sprite constructor */ player = new jaws.Sprite({image: "player.png", x: 10, y: 200}); /* Let's create an animated robot sprite */ robot = new jaws.Sprite({x: 200, y: 200}); robot.animation = new jaws.Animation({sprite_sheet: "images/droid_11x15.png", frame_size: [11,15], frame_duration: 120}); } /* update() is called each gametick with given FPS. Put your game logic here. */ this.update = function() { if(jaws.pressed("left")) { player.x--; } if(jaws.pressed("right")) { player.x++; } robot.image = robot.animation.next(); } /* draw() is called each gametick just after update() is done. Put your drawing/canvas stuff here. */ this.draw = function() { player.draw(); robot.draw(); } } /* * jaws.start(YourGameState) is the easiest way to get something up and running. It will in this order: * * 1) Call jaws.init() that will detect <canvas> (or create one for you) and set up the 2D context * - then available in jaws.canvas and jaws.context * * 2) Pre-load all assets * - player.png image is then available with jaws.assets.get("player.png") * * 3) Create an instance of YourGameState and call setup() on that instance * - in setup() you usually create your gameobjects, sprites and so forth * * 4) Loop calls to update() and draw() with given FPS (default 60) until game ends or another game state is activated */ window.onload = function() { /* * Add to jaws internal list of assets. * You can then either: * - have jaws.start() load them automatically for you * - or load them manually with jaws.assets.loadAll({loaded: myAssetsAreReadyCall}) */ jaws.assets.add("images/droid_11x15.png"); jaws.assets.add("images/player.png"); /* * ... or nicer when you have a lot of assets: * jaws.assets.path = "images/" * jaws.assets.add(["droid_11x15.png", "player.png"]) */ jaws.start(MyGameState); } </script> </body> </html>