Bring joe a rock

Bring joe a rock.markdown

Bring joe a rock

A Pen by Jordan O'Leary on CodePen.

License.

index.html

<canvas id="c" width="800" height="300"></canvas>

script.js

$c = document.getElementById('c');
$ctx = $c.getContext('2d');
$ctx.clearRect(0, 0, 800, 300);

// TODO experiement with scaling:
//$ctx.translate(pt.x,pt.y);
//$ctx.scale(4,4);
//$ctx.translate(-pt.x,-pt.y);

function drawPixel(x, y, r, g, b, a) {
  $ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
  $ctx.fillRect(x, y, unit_size, unit_size);

}
var unit_size = 30;
var joe = {
    x: 200,
    y: 200,
    r: 255,
    g: 0,
    b: 0,
    a: 0.8,
    speed: 1,
    target: null,
    visible: true,
    orders:[]
  };
var bill = {
    x: 400,
    y: 250,
    r: 0,
    g: 0,
    b: 255,
    a: 0.8,
    speed: 1,
    target: null,
    visible: true,
    orders:[]
  };
var rock = {
    x: 400,
    y: 100,
    r: 160,
    g: 130,
    b: 100,
    a: 0.8,
    speed: 1,
    target: null,
    visible: true,
    orders:[]
  };
var units = [joe,bill,rock];

// Add random Units:
/*for(var i = 0; i < 1000; i++){
  units.push({x:Math.random()*800,y:Math.random()*300,r:Math.random()*255,g:Math.random()*255,b:Math.random()*255,a:0.8});
}*/

function drawLoop() {
  $ctx.clearRect(0, 0, 800, 300);
  for (var i = 0; i < units.length; i++) {
    var unit = units[i];
    if(unit.visible){
      drawPixel(unit.x - unit_size / 2, unit.y - unit_size / 2, unit.r, unit.g, unit.b, unit.a);
      
    }
  }
}
var time;
var deltaTime;

function changeLoop() {
  requestAnimationFrame(changeLoop);
  var now = new Date().getTime();
  var deltaTime = now - (time || now);
  time = now;
  // Act on units
  for (var i = 0; i < units.length; i++) {
    var unit = units[i];
    moveToTarget.apply(unit);
    //unit.x++;
    //if(unit.x > 800)unit.x = 0;
  }

  drawLoop();
}
changeLoop();

function moveToTarget() {
  if (this.target == null) {
    return;
  }
  var a, b;
  var c = this.speed;
  var A = this.target.x - this.x;
  var B = this.target.y - this.y;
  var C = Math.sqrt(A * A + B * B);
  // 10 is stop distance
  if (C < 10) {
    if(this.callback){
      this.callback();
      this.callback = this.orders.shift(); 
    }else{
      this.callback = this.orders.shift(); 
      this.callback();
    }
    return true; // the object is close enough that it need not move
  }
  a = c * A / C;
  b = c * B / C;
  this.x += a;
  this.y += b;

}

function bring(thing,destination){
  var self = this;
  // First order:
  this.target = thing;
  
  // Following orders:
  this.orders = [
    function(){
      rock.visible = false;
      self.target = destination;
    },
    function(){
      rock.x = self.x;
      rock.y = self.y;
      rock.visible = true;
      self.target = {x:200,y:340};
      self.callback = null;
    },
  ];
  /*this.target = thing;
  this.callback = function(){
    rock.visible = false;
    self.target = destination;
    self.callback = function(){
      rock.x = self.x;
      rock.y = self.y;
      rock.visible = true;
      self.target = {x:200,y:340};
      self.callback = null;
    }
  }*/
  
}

// TEST:
bring.apply(bill,[rock,joe])