Move Box Tutorial

Step1.js

var box = $('#box');

function forwardPos(p) {
  return (p+1)+'px';
}

function backwardPos(p) {
  return (p-1)+'px';
}

$(document).on('keydown', function(event) {
  switch(event.key) {
    case 'ArrowRight':
      var pos = +box.css('left').replace('px','');
      box.css('left',forwardPos(pos));
	    break;
    case 'ArrowLeft':
    	var pos = +box.css('left').replace('px','');
      box.css('left',backwardPos(pos));
	    break;
    case 'ArrowUp':
    	var pos = +box.css('top').replace('px','');
      box.css('top',backwardPos(pos));
	    break;
    case 'ArrowDown':
    	var pos = +box.css('top').replace('px','');
      box.css('top',forwardPos(pos));
	    break;
  }
});

Step2.js

var box = $('#box');

function forwardPos(p) {
	return (p+1)+'px';
}

function backwardPos(p) {
	return (p-1)+'px';
}

function changePosition(posAttr, mover) {
  box.css(posAttr, mover(+box.css(posAttr).replace('px','')));
}

$(document).on('keydown', function(event) {
	switch(event.key) {
    case 'ArrowRight':
    	changePosition('left', forwardPos);
	    break;
    case 'ArrowLeft':
    	changePosition('left', backwardPos);
	    break;
    case 'ArrowUp':
    	changePosition('top', backwardPos);
	    break;
    case 'ArrowDown':
	    changePosition('top', forwardPos);
	    break;
  }
});

Step3.js

var config = {
	ArrowRight: {
  	attr: 'left',
    adjustment: 1
  },
  ArrowLeft: {
  	attr: 'left',
    adjustment: -1
  },
	ArrowUp: {
  	attr: 'top',
    adjustment: -1
  },
  ArrowDown: {
  	attr: 'top',
    adjustment: 1
  }
};

function pixelAdd(pixel, num) {
	var numberPixel = Number(pixel.replace('px',''));
  return (numberPixel+num)+'px';
}

function mover(box) {
  box.css(this.attr, pixelAdd(box.css(this.attr), this.adjustment));
}

$(document).on('keydown', function(event) {
	mover.call(config[event.key], $('#box'));
});