Jaws example9.js

function Example() {
  var player
  var blocks
  var fps
  var viewport
  var tile_map
  var feet_rect // used to check whether grounded, for checking whether the character can jump.

  /* Called once when a game state is activated. Use it for one-time setup code. */
  this.setup = function() {
    live_info = document.getElementById("live_info")
    blocks = new jaws.SpriteList()
    var world = new jaws.Rect(0,0,320*10,320*2)

    /* We create some 32x32 blocks and save them in array blocks */
    for(var y = 0; y < world.height; y += 32 ) {
      blocks.push( new Sprite({image: "block.bmp", x: 0, y: y}) )
      blocks.push( new Sprite({image: "block.bmp", x: world.width-32, y: y}) )
    }
    for(var x = 0; x < world.width; x += 32 ) {
      blocks.push( new Sprite({image: "block.bmp", x: x, y: world.height-32}) )
    }
    for(var x = 320; x < world.width; x += 32 ) {
      blocks.push( new Sprite({image: "block.bmp", x: x, y: world.height-64}) )
    }
    for(var i=0; i < 50; i++) {
      blocks.push( new Sprite({image: "block.bmp", x: parseInt(Math.random()*100)*32, y: world.height - parseInt(Math.random()*10)*32}) )
    }

    // A tile map, each cell is 32x32 pixels. There's 100 such cells across and 100 downwards.
    // Fit all items in array blocks into correct cells in the tilemap
    // Later on we can look them up really fast (see player.move)
    tile_map = new jaws.TileMap({size: [100,100], cell_size: [32,32]})
    tile_map.push(blocks)

    viewport = new jaws.Viewport({max_x: world.width, max_y: world.height})

    player = new jaws.Sprite({x:110, y:320, scale: 2, anchor: "center_bottom"})
    //feet_rect = new jaws.Rect(player.x - 16, player.y, 32, 32)
    feet_rect = new jaws.Rect(player.x - 11, player.y, 22, 3)

    player.move = function() {
      this.collided = false

      // move x
      this.x += this.vx
      feet_rect.x += this.vx

      // x collision
      if(tile_map.atRect(player.rect()).length > 0) {
        this.x -= this.vx
        feet_rect.x -= this.vx
        this.collided = true
      }
      this.vx = 0

      // move y
      this.y += this.vy
      feet_rect.y += this.vy
      var collided_block = tile_map.atRect(player.rect())[0]

      // DEBUG
      var collisionblocks = tile_map.atRect(feet_rect);
      //jaws.log("feet_rect collisions: " + collisionblocks.length +
                //"\nplayer collisions: " + collided_block);

      // vertical collisions have to be handled differently depending on
      // whether they collided on top or on the bottom.
      if(collided_block) {
        // Heading downwards
        if(this.vy > 0) {
          this.can_jump = true
          this.y = collided_block.rect().y - 1
          //feet_rect.y = collided_block.rect().y - 1 - feet_rect.height;
          feet_rect.y = collided_block.rect().y - 1;
        }
        // Heading upwards (jumping)
        else if(this.vy < 0) {
          this.y = collided_block.rect().bottom + this.height
          //feet_rect.y = collided_block.rect().bottom + this.height - feet_rect.height;
          feet_rect.y = collided_block.rect().bottom + this.height;
        }

        this.vy = 0
        this.collided = true
      }
    }

    player.canJump = function() {
      var collided_block = tile_map.atRect(feet_rect)[0];

      if (collided_block) {
        return true;
      }
    }

    var anim = new jaws.Animation({sprite_sheet: "droid_11x15.png", frame_size: [11,15], frame_duration: 100})
    player.anim_default = anim.slice(0,5)
    player.anim_up = anim.slice(6,8)
    player.anim_down = anim.slice(8,10)
    player.anim_left = anim.slice(10,12)
    player.anim_right = anim.slice(12,14)
    player.vx = player.vy = 0
    player.can_jump = true

    player.setImage( player.anim_default.next() )
    jaws.context.mozImageSmoothingEnabled = false;  // non-blurry, blocky retro scaling
    jaws.preventDefaultKeys(["up", "down", "left", "right", "space"])
  } // end setup

  /* update() will get called each game tick with your specified FPS. Put game logic here. */
  this.update = function() {
    player.setImage( player.anim_default.next() )

    player.vx = 0
    if(jaws.pressed("left"))  { player.vx = -2; player.setImage(player.anim_left.next()) }
    if(jaws.pressed("right")) { player.vx = 2;  player.setImage(player.anim_right.next()) }
    //if(jaws.pressed("up"))    { if(player.can_jump) { player.vy = -10; player.can_jump = false } }

    if(jaws.pressed("up")) {
      if(player.canJump()) {
        player.vy = -10;
      }
    }

    // some gravity
    player.vy += 0.4

    // apply vx / vy (x velocity / y velocity), check for collision detection in the process.
    player.move()

    // this should fix right/bottom not updating
    feet_rect.moveTo(feet_rect.x, feet_rect.y)

    // Tries to center viewport around player.x / player.y.
    // It won't go outside of 0 or outside of our previously specified max_x, max_y values.
    viewport.centerAround(player)

    live_info.innerHTML = jaws.game_loop.fps + " fps. Player x, y, right, bottom: " + parseInt(player.x) + ", " + parseInt(player.y) + ", " +
                          parseInt(player.rect().right) + ", " + parseInt(player.rect().bottom) +
                          "<br/>feet_rect x, y, right, bottom: " + parseInt(feet_rect.x) + ", " + parseInt(feet_rect.y) + ", " +
                          parseInt(feet_rect.right) + ", " + parseInt(feet_rect.bottom) +
                          "<br/>Viewport: " + parseInt(viewport.x) + "/" + parseInt(viewport.y) + "." +
                          "<br/>tile_map.atRect(feet_rect).length: " + tile_map.atRect(feet_rect).length +
                          "<br/>tile_map.atRect(player.rect()).length: " + tile_map.atRect(player.rect()).length;

    //live_info.innerHTML += "<br/>feet_rect right, bottom: " + parseInt(feet_rect.right) + ", " + parseInt(feet_rect.bottom)
    //live_info.innerHTML += "<br/>Viewport: " + parseInt(viewport.x) + "/" + parseInt(viewport.y) + "."
    //live_info.innerHTML += "<br/>feet_rect: " + parseInt(feet_rect.x) + "/" + parseInt(feet_rect.y)
    //live_info.innerHTML += "<br/>tile_map.atRect(feet_rect).length: " + tile_map.atRect(feet_rect).length
    //live_info.innerHTML += "<br/>tile_map.atRect(player.rect()).length: " + tile_map.atRect(player.rect()).length

    //live_info.innerHTML += "\nplayer_wrapper_rect collisions: " + collisionblocks.length +
                            //"\nplayer collisions: " + collided_block

  }

  /* Directly after each update draw() will be called. Put all your on-screen operations here. */
  this.draw = function() {
    jaws.clear()

    // the viewport magic. wrap all draw()-calls inside viewport.apply and it will draw those relative to the viewport.
    viewport.apply( function() {
      blocks.draw()
      player.draw()

      //player.collided ? player.rect().draw() : {} ;
      player.rect().draw()
      feet_rect.draw()

      // if (player.cached_rect) player.cached_rect.draw();
      // else player.rect().draw()

      // sprite.collision ? sprite.rect().draw() : sprite.draw()
    });
  }
}

jaws.onload = function() {
  jaws.unpack()
  jaws.assets.add(["droid_11x15.png","block.bmp"])
  jaws.start(Example)  // Our convenience function jaws.start() will load assets, call setup and loop update/draw in 60 FPS
}