JS Animation "RobotMaker"

Simple animation using javascript. taken from: http://code.tutsplus.com/tutorials/javascript-animation-that-works-part-4-of-4--net-35263 forked from: http://codepen.io/anon/pen/KJumn

by Mayank Dixit

HTML

<div id="stage">
	<div id="j" class="character"></div>
	<div id="j2" class="character"></div>
	<div id="j3" class="character"></div>
	<div id="j4" class="character"></div>
</div>

CSS

#stage {
		background-color:#cccccc;
		border:1px solid black;
		height:170px;
		width:600px;
		position:relative;
		z-index:0;
		-webkit-user-select: none;
	}
	
	.character {
		height:50px;
		width:40px;
		position:absolute;
		top:120px;
		background-repeat:no-repeat;
		background-position:0 0;
		-webkit-user-select: none;
	}
	
	#j {
		left:100px;
		background-image: url('http://www.joustmultimedia.com/tutorials/spriting/j.png');
	}
	
	#j2 {
		left:200px;
		background-image: url('http://www.joustmultimedia.com/tutorials/spriting/j2.png');
	}
	
	#j3 {
		left:300px;
		background-image: url('http://www.joustmultimedia.com/tutorials/spriting/j3.png');
	}
	
	#j4 {
		left:400px;
		background-image: url('http://www.joustmultimedia.com/tutorials/spriting/j4.png');
	}

JavaScript

var RobotMaker = function (robot, run_speed, jump_height) {
		var stage = document.getElementById('stage');
		var run_timer, jump_timer;
		var face_right = true;
		var mouseX;
		var running_dir = ''; 
		var x = 0;
		var y = 0;
		function find_stage_offset (el){
			x = el.offsetLeft;
			y = el.offsetTop;
			el = el.offsetParent;
			
			while(el !== null) {
			    x = parseInt(x) + parseInt(el.offsetLeft);
			    y = parseInt(y) + parseInt(el.offsetTop);
			    el = el.offsetParent;
			  }
			
			  return {xpos: x, ypos: y};
		}
		var stageOffset = find_stage_offset(stage);
		
		function run_r(phase, left){
			face_right = true;
			running_dir = 'r';
			if ((left + (15 * run_speed)) < (mouseX - robot.offsetWidth)){ 
				
				left = left + (15 * run_speed);
				robot.style.left = left+"px";
				switch (phase){
					case 1:
						robot.style.backgroundPosition = "-40px 0px";
						run_timer = setTimeout(function(){run_r(2, left);}, 200);
						break;
					case 2:
						robot.style.backgroundPosition = "-80px 0px";
						run_timer = setTimeout(function(){run_r(3, left);}, 200);
						break;
					case 3:
						robot.style.backgroundPosition = "-120px 0px";
						run_timer = setTimeout(function(){run_r(4, left);}, 200);
						break;
					case 4:
						robot.style.backgroundPosition = "-80px 0px";
						run_timer = setTimeout(function(){run_r(1, left);}, 200);
						break;
				}
			} else if ((left + (15 * run_speed)) < mouseX) { 
				robot.style.backgroundPosition = "0px 0px";
				running_dir = '';
			} else { 
				running_dir = 'l';
				run_l(1, robot.offsetLeft);
			}
		}
		
		function run_l(phase, left){
			face_right = false;
			running_dir = 'l';
			if (mouseX < robot.offsetLeft - (15 * run_speed)){ 
				
				left = left - (15 * run_speed);
				robot.style.left = left+"px";
				switch (phase){
					case 1:
						robot.style.backgroundPosition = "-40px -50px";
						run_timer = setTimeout(function(){run_l(2, left);}, 200);
						break;
					case...