JQuery Game – King of Fighters – lesson 3
JQuery – Sound Efx and Background Music.

punch-right.png

BACK TO LESSON 2

 

3…2…1…Play!

Ok, now we need music and sound efx!
The new HTML code:

<div id="musicHolder">
<!-- Make an invisible audio tag (without controls, no autoplay) and preload it -->
<audio preload="auto" class="sfx">
  <source src="css/images-gimme-code-2013-0016/punch.mp3" type="audio/mpeg">
  <source src="css/images-gimme-code-2013-0016/punch.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>
<audio preload="auto" autoplay class="bgmusic">
  <source src="css/images-gimme-code-2013-0016/bgmusic.mp3" type="audio/mpeg">
  <source src="css/images-gimme-code-2013-0016/bgmusic.ogg" type="audio/ogg">
</audio>
</div>

The class=”bgmusic” contain the background music, the class=”sfx” contain the punch sfx. Background music preload and autoplay, SFX preload only. We need start punch efx at punch button click. Add the following code:

  /* SFX punch START */
  $("audio.sfx")[0].play(); /* Select the first compatible audio in the array and play mp3 or ogg */
  $("audio.sfx")[1].play();
  /* SFX punch END */

We use mp3 and ogg file format for Cross-Browser Compatible Audio.

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
  
  /* SFX punch START */
  $("audio.sfx")[0].play(); /* Select the first compatible audio in the array and play mp3 or ogg */
  $("audio.sfx")[1].play();
  /* SFX punch 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>

<div id="musicHolder">
<!-- Make an invisible audio tag (without controls, no autoplay) and preload it -->
<audio preload="auto" class="sfx">
  <source src="css/images-gimme-code-2013-0016/punch.mp3" type="audio/mpeg">
  <source src="css/images-gimme-code-2013-0016/punch.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>
<audio preload="auto" autoplay class="bgmusic">
  <source src="css/images-gimme-code-2013-0016/bgmusic.mp3" type="audio/mpeg">
  <source src="css/images-gimme-code-2013-0016/bgmusic.ogg" type="audio/ogg">
</audio>
</div>
</body>
 
</html>
GO TO LESSON 4

 

My official WebSite >