JQuery CSS Fighting Game – Source Code – lesson 6

BACK TO LESSON 5

 

Walking…

The Original Sprite Sheets:
walk.png

I use the same techniques of lesson 1

I add the Source Code:

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

@-moz-keyframes walk {
    from { background-position: 0px; }
    to { background-position: -1024px; }
}

@keyframes walk {
    from { background-position: 0px; }
    to { background-position: -1024px; }
}
/* Anim Walk END */
...
/* WALK ANIMATION */
#terrybogard .walk {
 width: 256px; /* Animation Container - width and height of a single frame */
 height: 256px;
 background: url(css/images-gimme-code-2013-0016/walk.png) no-repeat 0 0; /* A sprite as background image */
 /* Animation START */
    -webkit-animation: walk .7s steps(4, end) infinite;  /* 0.7 seconds total animation time, 4 frames in the sprite sheet, infinite loop */
    -moz-animation: walk .7s steps(4, end) infinite;
    animation: walk .7s steps(4, end) infinite;
 /* Animation END */
...
  $("#buttonpunch").click(function(){
  $("div").removeClass("stand");
  $("div").removeClass("walk");
  $("div").addClass("punch");
...
  $("#buttonstand").click(function(){
  $("div").removeClass("punch");
  $("div").removeClass("walk");
  $("div").addClass("stand");
  });
  
  $("#buttonwalk").click(function(){
  $("div").removeClass("stand");
  $("div").addClass("walk");
  });
...

NOTICE: $(“div”).removeClass(“walk”); on $(“#buttonpunch”).click(function() and $(“#buttonstand”).click(function()

DEMO

 

GO TO LESSON 7

 

My official WebSite >