KEN

by Park Mino

HTML

<div class="stage">
  <div class="ken stance"></div>
</div>





<div class="commands">
  <h1>Control Ken with ur keyboard</h1>

    Punch: <button id="a">a</button><br>
    Kick: <button id="z">z</button><br>
    Reverse kick: <button id="e">e</button><br>
    <br>
    Tatsumaki: <button id="q">q</button><br>
    Hadoken: <button id="s">s</button><br>
    Shoryuken: <button id="d">d</button><br>
    <br>
    Jump: &nbsp;&nbsp;&nbsp;<button id="up">▲</button><br>
    Walk: <button id="left">◀</button><button id="right">►</button><br>
    Kneel: &nbsp;&nbsp;<button id="down">▼</button>
</div>

SCSS

/* 
fork this demo on github: 
https://github.com/jkneb/street-fighter-css
*/

/* 
A little more explanations on how it works 
http://front-back.com/animate-png-sprites-with-css3-animations
*/

/*
All vendor prefixes are autogenerated by Autoprefixer
*/

@mixin anim($animName, $steps, $animNbr, $animParams){
  .#{$animName} { 
    @content;
    animation:$animName steps($steps) $animParams; 
  }
  @keyframes #{$animName} {
    from { background-position:0px (-$spriteHeight * ($animNbr - 1)); }
    to { background-position:-($spriteWidth * $steps) (-$spriteHeight * ($animNbr - 1)); }
  }
}

/* element who's going to receive this class will be mirrored */
.flip { transform:scaleX(-1); }

/* sprite tile dimensions */
$spriteWidth:70px;
$spriteHeight:80px;

/* ken */
.ken { 
  position:absolute; bottom:112px; margin-left:150px;
  width:$spriteWidth; height:$spriteHeight; 
  background-image:url('http://front-back.com/wp-content/uploads/2013/01/ken.png'); 
  
  /* other sprites preloading */
  &:before { 
    content:'';
    background: url('http://front-back.com/wp-content/uploads/2013/01/ken-tatsumaki-senpuu-kyaku.png') no-repeat; 
  }
  &:after { 
    content:'';
    background: url('http://front-back.com/wp-content/uploads/2013/01/ken-shoryuken.png') no-repeat;
  }
}

/* ken's fireball */
@include anim($animName:fireball, $steps:2, $animNbr:5, $animParams:.15s infinite) {
  @extend .ken;
  position:absolute; left:100%; bottom:0px;
  margin-left:0; /* default margin-left */
  background-position:140px 320px; /* default background position */
  transition:margin 8s linear; 
  &:before { left:25px; right:25px; }
  &.moving { margin-left:4000px; } /* triggering the movement with this class */
}
/* ken's fireball impact explosion */
@include anim($animName:explode, $steps:4, $animNbr:6, $animParams:.5s 1);
/* stance */
@include anim($animName:stance, $steps:4, $animNbr:2, $animParams:.5s infinite);
/* hadoken - must be declared AFTER .stance */
@include...

JavaScript

var $ken = $('.ken');
var $kenPos, $fireballPos;

var punch = function(){
  $ken.addClass('punch'); 
  setTimeout(function() { $ken.removeClass('punch'); }, 150);
};
var kick = function(){
  $ken.addClass('kick');
  setTimeout(function() { $ken.removeClass('kick'); }, 500);
};
var rkick = function(){
  $ken.addClass('reversekick');
  setTimeout(function() { $ken.removeClass('reversekick'); }, 500); 
};
var tatsumaki = function(){
  $ken.addClass('tatsumaki');
  setTimeout(function() { $ken.addClass('down'); }, 1500); 
  setTimeout(function() { $ken.removeClass('tatsumaki down'); }, 2000);
};
var hadoken = function(){
  $ken.addClass('hadoken'); 
  setTimeout(function() { $ken.removeClass('hadoken'); }, 500); 
  setTimeout(function() {
      var $fireball = $('<div/>', { class:'fireball' });
      $fireball.appendTo($ken);
              
      var isFireballColision = function(){ 
          return $fireballPos.left + 75 > $(window).width() ? true : false;
      };
  
      var explodeIfColision = setInterval(function(){
                  
          $fireballPos = $fireball.offset();
          //console.log('fireballInterval:',$fireballPos.left);
  
          if (isFireballColision()) {
              $fireball.addClass('explode').removeClass('moving').css('marginLeft','+=22px'); 
              clearInterval(explodeIfColision);
              setTimeout(function() { $fireball.remove(); }, 500); 
          }
  
      }, 50);
  
      setTimeout(function() { $fireball.addClass('moving'); }, 20);
              
      setTimeout(function() { 
          $fireball.remove(); 
          clearInterval(explodeIfColision);
      }, 3020);
  
  }, (250));
};
var shoryuken = function(){
  $ken.addClass('shoryuken');
  setTimeout(function() { $ken.addClass('down'); }, 500); 
  setTimeout(function() { $ken.removeClass('shoryuken down'); }, 1000);
};
var jump = function(){
  $ken.addClass('jump');
  setTimeout(function() { $ken.addClass('down'); }, 500); 
  setTimeout(function() {...