JQuery Game – King of Fighters – lesson 2.
JQuery – Timing the punch!

punch-right.png

BACK TO LESSON 1

 

3…2…1…Fight!

Ok the animation looks great, but the problem is the animation loop of the punch. If you press PUNCH !!! button the punch action never stop! We need the code to stop punch animation after one puch and retur to stand animation. We can add:

  $("#buttonpunch").click(function(){
  $("div").removeClass("stand");
  $("div").addClass("punch");
  /* At the end of the punch animation of 0.9 seconds return to stand animation START */
  setTimeout(function() {
  $("div").removeClass("punch");  
  $("div").addClass("stand");   
  }, 900); // delay time - millisecdonds
  // return to stand animation END
  });

The duration of punch animation is 0.9 seconds. We use JQuery function setTimeout to delay 0,9 seconds – removeClass(“punch”) – and – addClass(“stand”) –

DEMO

 

The Complete Source Code:

<!DOCTYPE html>
<html>
<!-- Don't Break My b***s - Gimme Code! Project                                              -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com                                     -->
<!-- This code come with absolutely no warranty                                              -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance                                                                       -->
<head>
<title>JQuery Game - King of Fighters - lesson 2</title>

<style type="text/css" media="screen">
/* Anim Stand START */
@-webkit-keyframes stand {
    from { background-position: 0px; }
    to { background-position: -1536px; } /* The width of the sprite sheet is 1536px, the sprite sheet moves from left to right  */
}

@-moz-keyframes stand {
    from { background-position: 0px; }
    to { background-position: -1536px; }
}

@keyframes stand {
    from { background-position: 0px; }
    to { background-position: -1536px; }
}
/* Anim Stand END */

/* Anim Punch START */
@-webkit-keyframes punch {
    from { background-position: 0px; }
    to { background-position: -1280px; } /* The width of the sprite sheet is 1280px, the sprite sheet moves from left to right  */
}

@-moz-keyframes puch {
    from { background-position: 0px; }
    to { background-position: -1280px; }
}

@keyframes punch {
    from { background-position: 0px; }
    to { background-position: -1280px; }
}
/* Anim Punch END */

/* STAND ANIMATION */
#terrybogard .stand {
 width: 256px; /* Animation Container - width and height of a single frame */
 height: 256px;
 background: url(css/images-gimme-code-2013-0016/stand.png) no-repeat 0 0; /* A sprite as background image */
 /* Animation START */
    -webkit-animation: stand .9s steps(6, end) infinite;  /* 0.9 seconds total animation time, 6 frames in the sprite sheet, infinite loop */
    -moz-animation: stand .9s steps(6, end) infinite;
    animation: stand .9s steps(6, end) infinite;
 /* Animation END */
}

/* PUNCH ANIMATION */
#terrybogard .punch {
 width: 256px; /* Animation Container - width and height of a single frame */
 height: 256px;
 background: url(css/images-gimme-code-2013-0016/punch-right.png) no-repeat 0 0; /* A sprite as background image */
 /* Animation START */
    -webkit-animation: punch .9s steps(5, end) infinite;  /* 0.9 seconds total animation time, 5 frames in the sprite sheet, infinite loop */
    -moz-animation: punch .9s steps(5, end) infinite;
    animation: punch .9s steps(5, end) infinite;
 /* Animation END */
}
</style>

<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("#buttonpunch").click(function(){
  $("div").removeClass("stand");
  $("div").addClass("punch");
  /* At the end of the punch animation of 0.9 seconds return to stand animation START */
  setTimeout(function() {
  $("div").removeClass("punch");  
  $("div").addClass("stand");   
  }, 900); 
  // return to stand animation END
  });
  
  $("#buttonstand").click(function(){
  $("div").removeClass("punch");
  $("div").addClass("stand");
  });
  
});
</script>
 
</head>
 
<body>
<p>JQuery - Interactive Sprite Sheet Animation - <button id="buttonstand">STAND</button> or <button id="buttonpunch">P U N C H !!!</button></p>
<div id="terrybogard">
<div class="stand">&nbsp;</div>
</div>
</body>
 
</html>
GO TO LESSON 3

 

My official WebSite >