diff --git a/examples/example0.html b/examples/example0.html index 353fad9..52c92cd 100644 --- a/examples/example0.html +++ b/examples/example0.html @@ -1,9 +1,10 @@ - + + - Jaws Example #12 - As minimalistic as JawsJS can get + Jaws Example #0 - As minimalistic as JawsJS can get
@@ -17,14 +18,14 @@ player = new jaws.Sprite({image: "plane.png", x: jaws.width/2, y:jaws.height/2, anchor: "center"}) jaws.preventDefaultKeys(["up", "down", "left", "right"]) } - + function update() { if(jaws.pressed("left")) { player.x -= 2 } if(jaws.pressed("right")) { player.x += 2 } if(jaws.pressed("up")) { player.y -= 2 } if(jaws.pressed("down")) { player.y += 2 } } - + function draw() { jaws.clear() player.draw() @@ -32,7 +33,7 @@ // Looks for or
to draw on. Creates if niether is found. // Then load predined-assets, call setup(), then loop update() and draw() in 60 FPS. - jaws.start() + jaws.start() diff --git a/examples/example1.html b/examples/example1.html index db2caab..e779bb7 100644 --- a/examples/example1.html +++ b/examples/example1.html @@ -1,6 +1,7 @@ - + + Jaws Example #1 - Sprite(), pressed(), basic game loop @@ -18,10 +19,10 @@

Basic example

We make our own canvas, instead of having jaws generate one (or several) for us. We get the canvas-tag from the DOM, fetch its context and send it to Sprite. If you for some reason want to have your own canvas tag this is the way to do it. - Add "?debug=1" to the URL and jaws will create a small window with debuginfo: + Add "?debug=1" to the URL and jaws will create a small window with debuginfo: Switch to debug mode | Remove debug window
- + @@ -11,7 +12,7 @@
Editor output will show here.
- +

press SPACE to start editor

** This example is WIP and currently doesn't work as intended ***



@@ -24,15 +25,15 @@

** This example is WIP and currently doesn't work as inte DEL: removes selected items
+: Adds new object (exprimental)

- +

jaws log

- + i Jaws Example #11 - Sprite(), pressed(), basic game loop @@ -18,14 +19,14 @@

jaws.gfx.retroScaleImage() and Literal Notion game state

This will pre-scale player.png using a nearest neighbor algo (blocky retro style). NOTE: Scaling Big images can make browser "hang" for 2-3-4 seconds.
- + Jaws Example #12 - TileMap() and ViewPort() @@ -9,16 +10,16 @@ FPS: . Move with arrow keys. - +

TileMap and ViewPort optimizations

Here we have a Huge game world consisting of 700 x 700 tiles ( ~half a million sprites ). We don't want to draw them all so we use viewport.drawTileMap( tile_map )
- +

jaws log

- + @@ -11,19 +12,19 @@
Editor output will show here.
- +

press SPACE to start editor

- +

jaws log

- + Jaws Example #14 - TileMap pathfinding @@ -8,38 +9,38 @@

FPS: . Click a dirt tile to move. Find the hiding villain.

- +

Example 14: Pathfinding and Line of Sight in a TileMap

- + Jaws Example #2 - on_keydown(), game states - + FPS: . Move with arrows, shoot with space. Select with Return.

Game states

Minimalistic example using all jaws convenience methods and game states. - Game states are an proven and robust way of separating various parts of the game. + Game states are an proven and robust way of separating various parts of the game. For example: An intro, a menu, the actual game play, the high score list. That's 4 different game states right there.

A gamestate is just an normal javascript object with the methods setup(), update() and draw(). @@ -48,7 +49,7 @@

jaws log

if(jaws.pressed("right d")) { player.x += 2 } if(jaws.pressed("up w")) { player.y -= 2 } if(jaws.pressed("down s")) { player.y += 2 } - if(jaws.pressed("space enter")) { + if(jaws.pressed("space enter")) { if(player.can_fire) { bullets.push( new Bullet(player.rect().right, player.y) ) player.can_fire = false @@ -69,8 +70,8 @@

jaws log

/* Simular to example1 but now we're using jaws properties to get width and height of canvas instead */ /* This mainly since we let jaws handle the canvas now */ - function isOutsideCanvas(item) { - return (item.x < 0 || item.y < 0 || item.x > jaws.width || item.y > jaws.height) + function isOutsideCanvas(item) { + return (item.x < 0 || item.y < 0 || item.x > jaws.width || item.y > jaws.height) } function forceInsideCanvas(item) { if(item.x < 0) { item.x = 0 } @@ -116,7 +117,7 @@

jaws log

jaws.context.fillStyle = (i == index) ? "Red" : "Black" jaws.context.strokeStyle = "rgba(200,200,200,0.0)" jaws.context.fillText(items[i], 30, 100 + i * 60) - } + } } } diff --git a/examples/example3.html b/examples/example3.html index 31f56d6..942b669 100644 --- a/examples/example3.html +++ b/examples/example3.html @@ -1,15 +1,16 @@ - + + Jaws Example #3 - Animation - + FPS: . Move with arrow keys. - +

Animations

Showing of a "complex" animation, all cut up from a spritesheet. @@ -18,7 +19,7 @@

Animations

jaws log

- + Jaws Example #4 - Collision detection - + FPS: - +

Sprite collision detection

PLUS / +: Add sprites
@@ -19,10 +20,10 @@

Sprite collision detection

Every Sprite (that has an image) will have a function rect() which will return a Rect-object just embracing the sprite. Then you can sprite.rect.collideRect(rect2) or sprite.rect.collidePoint(x, y)
- +

jaws log

- + Jaws Example #5 - Sprite.anchor() @@ -9,17 +10,17 @@ FPS: - +

Sprite.anchor

Showing off the effects of setting different anchors for different sprites. Set anchor when creating a Sprite: ship = new Sprite({image: "spaceship.png", anchor: "center"})
- +

jaws log

- + Jaws Example #6 - Parallax() @@ -20,7 +21,7 @@

Parallax()

DOMtest @@ -45,7 +46,7 @@

Jaws log

if(jaws.pressed("right")) { player.vx = 4; player.flipped = false; player.angle = 20 } if(jaws.pressed("up")) { player.vy = -4 } if(jaws.pressed("down")) { player.vy = 4 } - if(jaws.pressed("space")) { + if(jaws.pressed("space")) { if(player.can_fire) { var vx = player.flipped ? -10 : 10 bullets.push( new Bullet({x: player.rect().right, y: player.rect().bottom-5, vx: vx, vy: 0}) ) @@ -83,8 +84,8 @@

Jaws log

/* Simular to example1 but now we're using jaws properties to get widthteElement('div'); and height of canvas instead */ /* This mainly since we let jaws handle the canvas now */ - function isOutsideCanvas(item) { - return (item.x < 0 || item.y < 0 || item.x > jaws.width || item.y > jaws.height) + function isOutsideCanvas(item) { + return (item.x < 0 || item.y < 0 || item.x > jaws.width || item.y > jaws.height) } function forceInsideCanvas(item) { if(item.x < 0) { item.x = 0 } @@ -102,9 +103,9 @@

Jaws log

delete options.vy options.image = "bullet.png" jaws.Sprite.call(this, options) - - this.update = function() { - this.x += this.vx + + this.update = function() { + this.x += this.vx this.y += this.vy } } diff --git a/examples/example8.html b/examples/example8.html index 2b2acbf..d702c6e 100644 --- a/examples/example8.html +++ b/examples/example8.html @@ -1,6 +1,7 @@ - + + Jaws Example #8 - TileMap() @@ -9,16 +10,16 @@ FPS: . Move with arrow keys. - +

TileMap

With TileMap() we can fit game objects into a 2D array, we call it cells. You set the size for the cells, default is 32 x 32 pixels. Once we have the objects in our tile map we can lookup game objects very fast.
- +

jaws log

- + Jaws Example #9 - Viewport() @@ -10,15 +11,15 @@ Move with arrow keys.
- +

ViewPort and TileMap

- Viewport() demo. + Viewport() demo.
- +

jaws log

- +