JQuery Fighting Game – Source Code – lesson 5

BACK TO LESSON 4

 

I need enemies! I can’t fight without enemies!

The Original Sprite Sheets:

enemy-stand.png

enemy-ouch.png

I use the same techniques of lesson 1

I add the Source Code:

...
#robertgarcia {
    position: absolute;
    left:300px;
    top:440px;
}
...
/* #################################################################################### */
/* Robert Garcia START */
/* #################################################################################### */
/* Anim Stand START */
@-webkit-keyframes enemystand {
    from { background-position: 0px; }
    to { background-position: -1792px; } /* The width of the sprite sheet is 1792px, the sprite sheet moves from left to right  */
}

@-moz-keyframes enemystand {
    from { background-position: 0px; }
    to { background-position: -1792px; }
}

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

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

@-moz-keyframes enemyouch {
    from { background-position: 0px; }
    to { background-position: -768px; }
}

@keyframes enemyouch {
    from { background-position: 0px; }
    to { background-position: -768px; }
}
/* Anim Enemy Ouch END */

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

/* OUCH ANIMATION */
#robertgarcia .enemyouch {
 width: 256px; /* Animation Container - width and height of a single frame */
 height: 256px;
 background: url(css/images-gimme-code-2013-0016/enemy-ouch.png) no-repeat 0 0; /* A sprite as background image */
 /* Animation START */
    -webkit-animation: enemyouch .6s steps(3, end) infinite;  /* 0.6 seconds total animation time, 6 frames in the sprite sheet, infinite loop */
    -moz-animation: enemyouch .6s steps(3, end) infinite;
    animation: enemyouch .6s steps(3, end) infinite;
 /* Animation END */
}
/* #################################################################################### */
/* Robert Garcia END */
/* #################################################################################### */
...
<div id="robertgarcia">
<div class="enemystand">&nbsp;</div>
</div>
...
DEMO

 

GO TO LESSON 6

 

My official WebSite >