Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
178 lines (148 sloc) 6.28 KB
<!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.</p>
<div id="info">
<h1>Example 14: Pathfinding in a TileMap</h1>
</div>
<script>
function Rouge() {
var 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)
{
var next_node = this.path.shift()
this.destination = floor_map.cell(next_node[0], next_node[1])[0]
}
else { this.destination = false }
}
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()
}
}
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>
Jump to Line
Something went wrong with that request. Please try again.