ushigaeru

gistfile1.js

(function(){
  var avatar = document.querySelector('#avatar_me'),
      pos,
      keys = [];
  var SPEED = 5;

  document.addEventListener('keydown', keydown, false);
  document.addEventListener('keyup', keyup, false);

  function keydown(e) {
    keys[e.keyCode] = true;
  }
  function keyup(e) {
    keys[e.keyCode] = false;
  }
  setInterval(function(){
    if ( keys[37] && keys[38] ) {
      move(avatar, ['left', 'up'] );
    } else if ( keys[38] && keys[39] ) {
      move(avatar, ['up', 'right']);
    } else if ( keys[39] && keys[40] ) {
      move(avatar, ['right', 'down']);
    } else if ( keys[40] && keys[37] ) {
      move(avatar, ['down', 'left']);
    } else if ( keys[37] ) {
      move(avatar, ['left']);
    } else if ( keys[38] ) {
      move(avatar, ['up']);
    } else if ( keys[39] ) {
      move(avatar, ['right']);
    } else if ( keys[40] ) {
      move(avatar, ['down']);
    }
  }, 1000/16);

  var action = 0;

  function move(avatar, directions) {
    if ( !pos ) {
      pos = {
        top: avatar.style.top,
        left: avatar.style.left,
        topInc: 0,
        leftInc: 0
      }
    }
    for ( var i = 0, n = directions.length; i < n; i++ ) {
      var direction = directions[i];
      switch (direction) {
        case 'left':
          pos.leftInc -= SPEED;
          break;
        case 'up':
          pos.topInc -= SPEED;
          break;
        case 'right':
          pos.leftInc += SPEED;
          break;
        case 'down':
          pos.topInc += SPEED;
          break;
      }
    }
    avatar.style.top = 'calc(' + pos.top + ' + ' + pos.topInc + 'px)';
    avatar.style.left = 'calc(' + pos.left + ' + ' + pos.leftInc + 'px)';
    if ( !action ) {
      action = true;
      setTimeout(function(){
        $(avatar).trigger('own_avatar_emotion',{emotion_type:'wave'});
        action = false;
      }, 1000);
    } 
  }
})();