A Pen by Jeremy Paris.

Hadouken!.markdown

Hadouken!

All of the elements are animated via CSS. Javascript is used to swap animation classes and to add the fireballs to the stage.

A Pen by Jeremy Paris on CodePen.

License.

index.html

<header role="banner">
  <h1>Hadouken!</h1>
</header>

<section id="move-list">
  <p>
    <i class="fa fa-arrow-down"></i> <i class="fa fa-arrow-right"></i> P
  </p>
</section>

<section id="stage">
  <div id="ryu"></div>
</section>

<footer>
  <p>
    Street Fighter is owned and copyrighted by Capcom.<br />
    Imagery used for fun and learning.
  </p>
</footer>

script.js

//-- handles timing of the hadouken
function fireHadouken(){
  if(!$('#ryu').hasClass('hadouken')){
    //-- show hadouken
    $('#ryu').addClass('hadouken');
    setTimeout(function(){
      //-- show fireball
      $("#stage").append( '<div class="fireball"></div>' );
      setTimeout(function(){
        //-- explode fireball
        $("#stage .fireball")[0].remove();
        $("#stage").append( '<div class="boom"></div>' );
        setTimeout(function(){
          $("#stage .boom")[0].remove();
        }, 330);
      }, 1250);  
    }, 300);

    //-- remove hadouken
    setTimeout(function(){
      $('#ryu').removeClass('hadouken');
    }, 400);
  }  
}

//-- keyboard tracking code modified from Ben's pen:
//-- http://codepen.io/ben10886/pen/trwKg
var specialmove = [40,39,80]; //down,right,p(unch)
var i;

$(document).on("keydown", function(e) {   
    if(specialmove[i]==e.which){
        i++;      
        if(i==3){
          fireHadouken(); 
        }p
    }else{
        i=0;
    };
});
$("h1").on("click", fireHadouken);

style.scss

@import "compass/css3";
/* = IMPORTS = */
@import url(http://fonts.googleapis.com/css?family=Bangers|Open+Sans:400,700);
@import url(//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

/* = VARIABLES = */
$white: #ffffff;
$black: #131313;
$red: #bb0000;
$spritesheet: url(//itsasiprod.com/images/ryu_sprite.png);
$anim-idle: idle .5s steps(4) infinite;
$anim-hadouken: hadouken .4s steps(5);
$anim-fireball: fireball .45s steps(8) infinite;
$anim-travel: travel 1.25s linear infinite;
$anim-boom: boom .33s steps(6) infinite;

/* = LAYOUT = */
body {
  margin: 2em;
  background-color: $black;
  color: $white;
  font: 1em 'Open Sans', sans-serif;
}

p {
  text-align: center;
  margin: .5em 0;
}

header {
  color: $white;
  h1 {
    margin: 1em 0 0;
    font: 3em 'Bangers', cursive;
    letter-spacing: .1em;
    text-align: center;
    cursor: pointer;
    @include text-shadow(3px 3px $red); 
  }
}

footer {
  margin: 2em 0;
  font-size: .5em;
}

#move-list {
  font-size: 2em;
}

#stage {
  position: relative;
  margin: 0 auto;
  min-width: 600px;
  max-width: 725px;
  height: 224px;
  background: {
    repeat: no-repeat;
    position: top center;
    image: url(//itsasiprod.com/images/hondasfz3stage.gif);
  }
}

#ryu {
  position: absolute;
  bottom: .5em;
  right: 80%;
  width: 115px;
  height: 115px;
  background-image: $spritesheet;
  @include animation($anim-idle);
  &.hadouken {
    @include animation($anim-hadouken, $anim-idle);
  }
}

.fireball {
  position: absolute;
  bottom: 2.667em;
  right: 75%;
  width: 76px;
  height: 37px;
  background-image: $spritesheet;
  @include animation($anim-fireball, $anim-travel);
}

.boom {
  position: absolute;
  bottom: 2em;
  right: 0;
  width: 60px;
  height: 63px;
  background-image: $spritesheet;
  @include animation($anim-boom);
}

/* = ANIMATIONS = */
/* idle */
@-webkit-keyframes idle {
  from { background-position: 0px 0px; }
  to { background-position: -460px 0px; }
}
@-moz-keyframes idle {
  from { background-position: 0px 0px; }
  to { background-position: -460px 0px; }
}
@-o-keyframes idle {
  from { background-position: 0px 0px; }
  to { background-position: -460px 0px; }
}
@keyframes idle {
  from { background-position: 0px 0px; }
  to { background-position: -460px 0px; }
}

/* hadouken (down right fierce) */
@-webkit-keyframes hadouken {
  from { background-position: 0px -115px; }
  to { background-position: -575px -115px; }
}
@-moz-keyframes hadouken {
  from { background-position: 0px -115px; }
  to { background-position: -575px -115px; }
}
@-o-keyframes hadouken {
  from { background-position: 0px -115px; }
  to { background-position: -575px -115px; }
}
@keyframes hadouken {
  from { background-position: 0px -115px; }
  to { background-position: -575px -115px; }
}

/* fireball */
@-webkit-keyframes fireball {
  from { background-position: 0px -230px; }
  to { background-position: -608px -230px; }
}
@-moz-keyframes fireball {
  from { background-position: 0px -230px; }
  to { background-position: -608px -230px; }
}
@-o-keyframes fireball {
  from { background-position: 0px -230px; }
  to { background-position: -608px -230px; }
}
@keyframes fireball {
  from { background-position: 0px -230px; }
  to { background-position: -608px -230px; }
}

/* travel */
@-webkit-keyframes travel {
  from { right: 75%; }
  to { right: 0; }
}
@-moz-keyframes travel {
  from { right: 75%; }
  to { right: 0; }
}
@-o-keyframes travel {
  from { right: 75%; }
  to { right: 0; }
}
@keyframes travel {
  from { right: 75%; }
  to { right: 0; }
}

/* kaboom! */
@-webkit-keyframes boom {
  from { background-position: 0px -267px; }
  to { background-position: -360px -267px; }
}
@-moz-keyframes boom {
  from { background-position: 0px -267px; }
  to { background-position: -360px -267px; }
}
@-o-keyframes boom {
  from { background-position: 0px -267px; }
  to { background-position: -360px -267px; }
}
@keyframes boom {
  from { background-position: 0px -267px; }
  to { background-position: -360px -267px; }
}