JQuery Game – King of Fighters – lesson 4
JQuery – The Background image
Now we add the background, I used a animated .gif to develop faster.
The new code:
...
/* Background */
#background {
position: absolute;
width: 1536px;
height: 704px;
margin-left: 192px;
margin-top: 50px;
background: url(css/images-gimme-code-2013-0016/background.gif) no-repeat 0 0; /* A animated gif as background image */
border: 2px solid silver;
}
#controls {
position: absolute;
left:1300px;
top:500px;
}
#terrybogard {
position: absolute;
left:1000px;
top:440px;
}
...
<div id="background">
....
</div>
A div container for the game, a div for controls, a div for the character.
NOTICE: the position is absolute, we need the exact coordinates of game DOM elements.
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</title>
<style type="text/css" media="screen">
body {
background: url(css/images-gimme-code-2013-0016/background-page.jpg) no-repeat 0 0;
}
#copyright {
color: white;
padding: 10px;
font-family:Arial,Helvetica,sans-serif;
font-size: .75em;
color: silver;
}
/* Background */
#background {
position: absolute;
width: 1536px;
height: 704px;
margin-left: 192px;
margin-top: 50px;
background: url(css/images-gimme-code-2013-0016/background.gif) no-repeat 0 0; /* A animated gif as background image */
border: 2px solid silver;
}
#controls {
position: absolute;
left:1300px;
top:500px;
}
#terrybogard {
position: absolute;
left:1000px;
top:440px;
}
/* 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>
<!-- Background container START -->
<div id="background">
<div id="controls"><p><button id="buttonstand">STAND</button></p><p><button id="buttonpunch">PUNCH</button></p></div>
<div id="terrybogard">
<div class="stand"> </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>
<div id="copyright">JQuery Fighting Game Programming Tutorial - Author: Andrea Tonin © 2013 All rights reserved - www.lucedigitale.com
<br>
Luce Digitale, is registered trademark in the Italy and/or other Countries. All other brand names, product names, or trademarks belong to their respective holders.
<br>
Optimized for Full HD Resolution Displays: 1920x1080px
</div>
</div>
<!-- Background container END -->
</body>
</html>
GO TO LESSON 5
