혼자 바보같이 움직이는 박스 예제

foo-box-step1.js

// https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js

var adjust = 1;
var ui = $('#box');
var direction = ['up','right','down','left'];

function box() {
  var min = 0, max = direction.length;
	var selectDirection =	Math.floor(Math.random()*(max-min+1)+min);
  
  switch(direction[selectDirection]) {
  	case 'up':
  		ui.css('top', ((+ui.css('top').replace('px',''))-adjust)+'px');  	
    	break;
    case 'right':
    	ui.css('left', ((+ui.css('left').replace('px',''))+adjust)+'px');  	
    	break;
    case 'down':
	    ui.css('top', ((+ui.css('top').replace('px',''))+adjust)+'px');  
    	break;
		case 'left':
    	ui.css('left', ((+ui.css('left').replace('px',''))-adjust)+'px');  
    	break;
  }
}

setInterval(box, 1000/30);
 
$(document).on('keydown',function(event) {
	if (event.key == 'ArrowUp') {
  	 adjust++;
  } else if (event.key == 'ArrowDown') {
  	adjust--;
  } else if (event.key == ' ') {
  	adjust = 1;
    ui.css({ top: '100px', left: '100px' });
  }
  
  $('.adjust').text(adjust);
});

foo-box-step2.js

var FooBox = function() {
	var box = $('<div class="box"></div>');
	
  this.move = function(d, step) {
    switch(d) {
      case 'up':
        box.css('top', ((+box.css('top').replace('px',''))-step)+'px');  	
        break;
      case 'right':
        box.css('left', ((+box.css('left').replace('px',''))+step)+'px');  	
        break;
      case 'down':
        box.css('top', ((+box.css('top').replace('px',''))+step)+'px');  
        break;
      case 'left':
        box.css('left', ((+box.css('left').replace('px',''))-step)+'px');
        break;
    }
  };
  
  $('body').append(box);
}

var adjust = 1;
var direction = ['up','right','down','left'];

var fooBox1 = new FooBox();
var fooBox2 = new FooBox();
var fooBox3 = new FooBox();

setInterval(function() {
	var min = 0, max = direction.length;
	var selectDirection1 =	Math.floor(Math.random()*(max-min+1)+min);
  var selectDirection2 =	Math.floor(Math.random()*(max-min+1)+min);
  var selectDirection3 =	Math.floor(Math.random()*(max-min+1)+min);
  
  fooBox1.move(direction[selectDirection1], adjust);
  fooBox2.move(direction[selectDirection2], adjust);
  fooBox3.move(direction[selectDirection3], adjust);
  
}, 1000/30);

foo-box-step3.js

function p2n(v) { return +v.replace('px','') }
function n2p(v) { return v+'px' } 

var FooBox = function(character) {
	var box = $('<div class="box"></div>');
	
  this.character = character;
  
  this.move = function(step) {
    var min = 0, max = this.character.direction.length;
    var selectDirection =	Math.floor(Math.random()*(max-min+1)+min);
  	
    switch(this.character.direction[selectDirection]) {
      case 'up':
        box.css('top', n2p(p2n(box.css('top'))-(step+this.character.speed)));  
        break;
      case 'right':
        box.css('left', n2p(p2n(box.css('left'))+(step+this.character.speed)));  
        break;
      case 'down':
        box.css('top', n2p(p2n(box.css('top'))+(step+this.character.speed)));  
        break; 
      case 'left':
        box.css('left', n2p(p2n(box.css('left'))-(step+this.character.speed)));
        break;
    }
  };
  
  $('body').append(box);
  
  setInterval(function() {
  	this.move(1);
	}.bind(this), 1000/30);
}

var adjust = 1;

var fooBox1 = new FooBox({ direction: ['right','down','left'], speed: 0 });
var fooBox2 = new FooBox({ direction: ['up','down','left'] , speed: 3 });
var fooBox3 = new FooBox({ direction: ['up','right','down'], speed: 10 });

foo-box-step4.js

function randomColor() {
	var r = random(0,255);
  var g = random(0,255);
  var b = random(0,255);
  
  return 'rgb('+r+','+g+','+b+')';
}

function randomBox(count) {
	var moves = ['right','down','left','up'];
  var collect = [];
  
  for(var i=0; i<count; i++) {
  	collect.push(moves[random(0,3)]);
  }
  
  return collect;
}

function random(min,max) { return Math.floor(Math.random()*(max-min+1)+min); }
function p2n(v) { return +v.replace('px','') }
function n2p(v) { return v+'px' } 

var FooBox = function(character) {
	var box = $('<div class="box"></div>');
	
  box.css('background', randomColor());
  
  this.character = character;
  this.speed = random(0,20);
  
  this.move = function(step) {
  	var current = {
    	top: p2n(box.css('top')),
      left: p2n(box.css('left'))
    }
    switch(this.character.direction[random(0, this.character.direction.length)]) {
      case 'up':
        box.css('top', n2p(current.top-(step+this.speed)));  
        break;
      case 'right':
        box.css('left', n2p(current.left+(step+this.speed)));  
        break;
      case 'down':
        box.css('top', n2p(current.top+(step+this.speed)));  
        break; 
      case 'left':
        box.css('left', n2p(current.left-(step+this.speed)));
        break;
    }
  };
  
  $('body').append(box);
  
  setInterval(function() {
  	this.move(1);
	}.bind(this), 1000/30);
}

var adjust = 1;

for(var i=0; i<600; i++) {
	new FooBox({ direction: randomBox(10) })
};

index.html

<style>
  #box {
  position: absolute;
  background-color: blue;
  width: 50px;
  height: 50px;
  left: 110px;
  top: 110px;
  transition:left 0.5s, top 0.5s;
}
.adjust {
  font-size: 160px;
  font-weight: bold;
}
</style>
<div id="box">
</div>
<div class="adjust">1</div>