fixes

ippa · Jan 19, 2013 · 004dcf3 · 004dcf3
2 parents 750327f + 3eb2406
commit 004dcf3
Show file tree

Hide file tree

Showing 7 changed files with 628 additions and 71 deletions.
diff --git a/examples/example14.html b/examples/example14.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html> 
+<html>
+  <head>
+    <script src="../jaws.js"></script>
+    <title>Jaws Example #14 - TileMap pathfinding</title>
+  </head>
+<body style="background:black; color:white;">
+
+  <canvas width="320" height="320" style="background:white;"></canvas>
+  <p>FPS: <span id="fps"></span>. Click a dirt tile to move. Find the hiding villain.</p>
+
+  <div id="info">
+    <h1>Example 14: Pathfinding and Line of Sight in a TileMap</h1>
+  </div>
+
+  <script>
+    function Rouge() {
+      var player, evil_player
+      var walls
+      var fps
+
+      var floor
+
+      var sprite_sheet
+
+      /* Called once when a game state is activated. Use it for one-time setup code. */
+      this.setup = function() {
+        fps = document.getElementById("fps")
+
+        sprite_sheet = new jaws.SpriteSheet({image: "example14/basic-32.png", frame_size: [32,32]})
+
+        walls = new jaws.SpriteList()
+
+        floor = new jaws.SpriteList()
+
+        /* We create some 32x32 blocks and save them in array blocks */
+        for (var i=0 ; i<10; i++)
+        {
+            for (var j=0 ; j<10; j++)
+            {
+                floor.push( new Sprite({image: sprite_sheet.frames[5], x: i*32, y: j*32}) )
+
+                if (i==0)
+                {
+                    walls.push( new Sprite({image: sprite_sheet.frames[0], x: i, y: j*32}) )
+                    walls.push( new Sprite({image: sprite_sheet.frames[0], x: 9*32, y: j*32}) )
+                }
+                if (j == 0)
+                {
+                    walls.push( new Sprite({image: sprite_sheet.frames[0], x: i*32, y: j}) )
+                    walls.push( new Sprite({image: sprite_sheet.frames[0], x: i*32, y: 9*32}) )
+                }
+            }
+        }
+
+        // custom placed walls
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 96, y: 64}) )
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 96, y: 96}) )
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 64, y: 96}) )
+
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 128, y: 160}) )
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 128, y: 192}) )
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 128, y: 224}) )
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 160, y: 160}) )
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 192, y: 160}) )
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 160, y: 224}) )
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 192, y: 224}) )
+
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 32, y: 7*32}) )
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 64, y: 7*32}) )
+        walls.push( new Sprite({image: sprite_sheet.frames[0], x: 64, y: 8*32}) )
+
+        // A tilemap, each cell is 32x32 pixels. There's 10 such cells across and 10 downwards.
+        var wall_map = new jaws.TileMap({size: [10,10], cell_size: [32,32]})
+
+        var floor_map = new jaws.TileMap({size: [10,10], cell_size: [32,32]})
+        floor_map.push(floor)
+
+        // Fit all items in array blocks into correct cells in the tilemap
+        // Later on we can look them up really fast (see player.move)
+        wall_map.push(walls)
+
+        player = new jaws.Sprite({image: "example14/player.png", x:64, y:64, anchor: "top_left"})
+        player.destination = false
+        player.path = []
+        player.move = function(x, y) 
+        {
+          // Have our tile map return the items that occupy the cells which are touched by player.rect
+          // If there's any items inside player.rect, reverse the movement (-> stand still)
+          // We don't really need this anymore, because our path will take care of it, but I've
+          // left it in for completeness.
+          this.x += x
+          if(wall_map.atRect(player.rect()).length > 0) { this.x -= x; }
+
+          // Same as above but for vertical movement
+          this.y += y
+          if(wall_map.atRect(player.rect()).length > 0) { this.y -= y; }
+        }
+
+        player.moveTo = function(x, y)
+        {
+          /**
+           *  Here's the magic - find a path through the walls
+           */
+          this.path = wall_map.findPath([this.x, this.y], [x, y])
+          this.setDestination()
+        }
+
+        player.setDestination = function()
+        {
+          if (this.path.length > 0)
+          {
+            this.destination = this.path.shift()
+          }
+          else { this.destination = false }
+        }
+
+        evil_player = new jaws.Sprite({image: "example14/player.png", x:160, y:192, anchor: "bottom_right", angle:180})
+        evil_player.visible = function()
+        {
+            /**
+             *  check if line of sight between evil player and the player
+             */
+            return wall_map.lineOfSight([this.x, this.y], [player.x, player.y])
+        }
+
+        jaws.context.mozImageSmoothingEnabled = false;  // non-blurry, blocky retro scaling
+        jaws.preventDefaultKeys(["up", "down", "left", "right", "space"])
+      }
+
+      /* update() will get called each game tick with your specified FPS. Put game logic here. */
+      this.update = function()
+      {
+        if (jaws.pressed("left_mouse_button") && !jaws.isOutsideCanvas({x: jaws.mouse_x, y: jaws.mouse_y, width: 1, height: 1}) && !player.destination) { player.moveTo(jaws.mouse_x, jaws.mouse_y) }
+
+        //move player
+        if (player.x == player.destination.x && player.y == player.destination.y)
+        {
+          player.setDestination()
+        }
+
+        if (player.destination)
+        {
+          if(player.x > player.destination.x)
+          {
+            player.move(-4, 0)
+          }
+          else if (player.x < player.destination.x)
+          {
+            player.move(4, 0)
+          }
+          if(player.y > player.destination.y)
+          {
+            player.move(0, -4)
+          }
+          else if (player.y < player.destination.y)
+          {
+            player.move(0, 4)
+          }
+        }
+        jaws.forceInsideCanvas(player)
+        fps.innerHTML = jaws.game_loop.fps
+      }
+
+      /* Directly after each update draw() will be called. Put all your on-screen operations here. */
+      this.draw = function()
+      {
+        jaws.clear()
+        floor.draw()
+        walls.draw()
+        player.draw()
+        if (evil_player.visible())
+        {
+            evil_player.draw()
+        }
+      }
+    }
+
+    jaws.onload = function()
+    {
+      jaws.unpack()
+      jaws.assets.add(["example14/basic-32.png", "example14/player.png"])
+      jaws.start(Rouge)  // Our convenience function jaws.start() will load assets, call setup and loop update/draw in 60 FPS
+    }
+  </script>
+
+</body>
+</html>
+
diff --git a/examples/example14/basic-32.png b/examples/example14/basic-32.png
diff --git a/examples/example14/player.png b/examples/example14/player.png