actor.js

//Load third
//The Actor superclass! Create subsclasses for all of your actors
function Actor(world, posX, posY, imgSRC, imgWidth, imgHeight) {
  this.X = posX;
  this.Y = posY;
  this.world = world;
  this.width = imgWidth;
  this.height = imgHeight;
  var img = new Image();
  img.src = imgSRC;
  img.crossOrigin = "anonymous";
  var ready = false;
  var precision = world.getCollsionPrecision();
  var objectID = world.newObjectID();

  var context = world.getContext();
  var collisionGrid;
  img.onload = function(){
    ready = true;
  };
  var hasGrid = false;

  //Overwrite this to chnage your Actors behavior
  this.act = function() {

  }

  //returns the actors object id (this is used in world to identify entities)
  this.getID = function() {
    return objectID;
  }

  //returns the actors collisiongrid
  this.getCollisionGrid = function() {
    return collisionGrid;
  }

  //Draws the Actor into the world
  this.draw = function() {
    if (!ready) return;
    if(ready && !hasGrid){
      this.generateCollisionGrid();
    }
    context.drawImage(img, this.X, this.Y, this.width, this.height);
  }

  //Interface, overwrite this function in your subclasses to handle collisions
  /*** Most efficient implementation:

    if(opponendActor instanceof classToCheckForCollisions){
      if(this.collidesWith(opponendActor)){
        //Collision detected handle it as you like
      }
    }
  */
  this.checkCollision = function(opponendActor) {

  }

  //Collision detection, only use within checkCollision to avoid unnecessary calls
  this.collidesWith = function(opponendActor) {
    var collision = this.getCollision(opponendActor);
    if (collision == null) return false;
    var opponendGrid = opponendActor.getCollisionGrid();

    var oTop, oBottom, oLeft, oRight;
    var top, bottom, left, right;
    if (opponendActor.X > this.X) {
      oLeft = 0;
      left = parseInt((collision.minX - this.X) / precision);
    } else {
      left = 0;
      oLeft = parseInt((collision.minX - opponendActor.X) / precision);
    }

    if (opponendActor.Y > this.Y) {
      oTop = 0;
      top = parseInt((collision.minY - this.Y) / precision);
    } else {
      top = 0;
      oTop = parseInt((collision.minY - opponendActor.Y) / precision);
    }

    //run collision grids against each other
    var xAmount = parseInt((collision.maxX - collision.minX) / precision);
    var yAmount = parseInt((collision.maxY - collision.minY) / precision);

    for (var a = 0; a < xAmount; a++) {
      for (var b = 0; b < yAmount; b++) {
        if (collisionGrid[left + a][top + b] == true && opponendGrid[oLeft + a][oTop + b] == true) return true;
      }
    }
    return false;
  }

  //This function calculates the outer bounds of a collision and checks if the bounding box is hit
  this.getCollision = function(opponend) {
    if ((opponend.X > this.x + this.width) || (this.X > opponend.X + opponend.width) || (opponend.Y > this.Y + this.height) || (this.Y > opponend.Y + opponend.height)) return null;
    var collision = new Collision();
    collision.minX = parseInt(Math.max(this.X, opponend.X));
    collision.minY = parseInt(Math.max(this.Y, opponend.Y));
    collision.maxX = parseInt(Math.min(this.X + this.width, opponend.X + opponend.width));
    collision.maxY = parseInt(Math.min(this.Y + this.height, opponend.Y + opponend.height));
    return collision;
  }

  this.jump = function() {
    this.Y += 50;
  }

  //this function partitions the image into a grid of smaller pieces
  this.generateCollisionGrid = function() {
    hasGrid = true;
    var h = parseInt(this.height / precision);
    var w = parseInt(this.width / precision);
    var cnv = document.createElement('canvas');

    cnv.width = this.width;
    cnv.height = this.height;
    var ctx = cnv.getContext('2d');
    //ctx.drawImage(img, this.X, this.Y, this.width, this.height);
    ctx.clearRect(0, 0, this.width, this.height);
    ctx.drawImage(img, 0, 0, this.width, this.height);
    collisionGrid = new Array(w);
    for (var i = 0; i < collisionGrid.length; i++) {
      collisionGrid[i] = new Array(h);
    }
    for (var a = 0; a < w; a++) {
      for (var b = 0; b < h; b++) {

        //var imgData = context.getImageData(a*precision, b*precision, precision, precision);
        var data = context.getImageData(a * precision, b * precision, precision, precision).data;
        collisionGrid[a][b] = false;
        var hCount = 0;
        var log = "";
        for (var i = 0; i < data.length; i += 4) {
          if (data[i + 3] > 0) {
            //if(data[i+3] != 255) console.log(data[i+3]);
            console.log(data[i] + " "+ data[i+1] + " " + data[i+2] + " " + data[i + 3]); //<---------------------------------------------------------- ALPHA IS ALWAYS 255 (fully opaque), even with a fully transparent image! Strange!
            hCount++;
            if (hCount >= parseInt(precision * precision * 0.2)) { //<-------------Change the last value to alter the minimum amount of intransparent pixels required to consider a partition as present
              collisionGrid[a][b] = true;
              break;
            }
          }
        }

      }
    }
  }
}