A Pen by David Fox-Powell.

A-Pen-by-David-Fox-Powell.markdown

A Pen by David Fox-Powell

A Pen by David Fox-Powell on CodePen.

License.

script.js

function Box(width, height, direction, color) {
  this.width = width;
  this.height = height;
  this.$el = $("<div>");
  this.direction = direction;
  this.color = color;
}

Box.prototype.initialize = function(topPos, leftPos) {
  this.position = {
    top: topPos,
    left: leftPos
  }
  this.$el.css({ height : this.height + "px", width : this.width + "px", backgroundColor : this.color, position : "absolute", top : topPos, left : leftPos });
  $('body').append(this.$el);
  var self = this;
  this.$el.toggle(function(){
    console.log("this inside click event", this);
    self.animate();
  }, function(){
    clearInterval(self.intervalID);
    $(this).remove();
    self.splitBox(self.position);
  });
}

// Start the box in Motion
Box.prototype.animate = function() {
  var self = this;
  this.intervalID = setInterval(function(){
    self.moveBox(self.direction);
    self.$el.css({ top: self.position.top, left: self.position.left });
  }, 10);
}

// Define the rules for when the box hits the window borders
Box.prototype.moveBox = function(direction) {
  var rightBound = this.position.left + this.width;
  var bottomBound = this.position.top + this.height;
  switch(direction) {
    // Right and down
    case "RD":
      if ( bottomBound >= $(window).height() ) {
        this.direction = "RU";
      } else if ( rightBound >= $(window).width() ) {
        this.direction = "LD";
      } else {
        this.position.top += 1;
        this.position.left += 1;
      }
      break;
    // Right and up
    case "RU":
     if ( this.position.top <= 0 ) {
        this.direction = "RD";
      } else if ( rightBound >= $(window).width() ) {
        this.direction = "LU";
      } else {
        this.position.top -= 1;
        this.position.left += 1;
      }
      break;
    // Left and down
    case "LD":
      if ( bottomBound >= $(window).height() ) {
        this.direction = "LU";
      } else if ( this.position.left <= 0 ) {
        this.direction = "RD";
      } else {
        this.position.top += 1;
        this.position.left -= 1;
      }
    break;
    // Left and up
    case "LU":
      if ( this.position.top <= 0 ) {
        this.direction = "LD";
      } else if ( this.position.left <= 0 ) {
        this.direction = "RU";
      } else {
        this.position.top -= 1;
        this.position.left -= 1;
      }
    break;
    }
}

// Create more boxes
Box.prototype.splitBox = function(position) {
  var boxRU = new Box(25, 25, "RU", "goldenRod");
  var boxRD = new Box(25, 25, "RD", "DeepSkyBlue");
  var boxLU = new Box(25, 25, "LU", "PeachPuff");
  var boxLD = new Box(25, 25, "LD", "Thistle");
  boxRU.initialize( position.top, position.left );
  boxRU.animate();
  boxRD.initialize( position.top, position.left );
  boxRD.animate();
  boxLU.initialize( position.top, position.left );
  boxLU.animate();
  boxLD.initialize( position.top, position.left );
  boxLD.animate();
}


// Stolen function for deprecated jQuery toggle on click
jQuery.fn.toggle = function( fn, fn2 ) {
  // Don't mess with animation or css toggles
  if ( !jQuery.isFunction( fn ) || !jQuery.isFunction( fn2 ) ) {
    return oldToggle.apply( this, arguments );
  }
  // migrateWarn("jQuery.fn.toggle(handler, handler...) is deprecated");
  // Save reference to arguments for access in closure
  var args = arguments,
  guid = fn.guid || jQuery.guid++,
  i = 0,
  toggler = function( event ) {
    // Figure out which function to execute
    var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
    jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
    // Make sure that clicks stop
    event.preventDefault();
    // and execute the function
    return args[ lastToggle ].apply( this, arguments ) || false;
  };
  // link all the functions, so any of them can unbind this click handler
  toggler.guid = guid;
  while ( i < args.length ) {
    args[ i++ ].guid = guid;
  }
  return this.click( toggler );
};

// Position for the 100px x 100px box in the middle of the window
var middle = {
  top : ( ($(window).height() / 2) - 50),
  left : ( ($(window).width() / 2) - 50)
}

// Define a random movement direction for the box
var randomDirection = function() {
  var directions = ["RU", "RD", "LU", "LD"];
  var randomIndex = Math.floor(Math.random() * directions.length);
  return directions[randomIndex];
}

/*******WINDOW ONLOAD*********/
$(function() {
  box = new Box(100, 100, randomDirection(), "FireBrick");
  box.initialize( middle.top, middle.left );
});