HTML and CSS Reference
In-Depth Information
Engage thrusters
We are now going to put all the health points code in a new file:
1. Let's create a new file named
hp.js
under the
js
folder. Then, we include the
newly created JavaScript ile in HTML before imporing our
game-scene.js
file:
<script src='js/hp.js'></script>
2. Next, as usual, the styling will be for our health points interface. We can append it to
the end of the
game.css
file:
.hp-background {
border-bottom: 1px solid #333;
background: #ababab;
height: 30px;
}
.hp {
position: absolute;
width: 210px;
height: 30px;
transition: all .3s ease-out;
}
.hp.opponent {
background: url(images/blue-hp.png) repeat;
left: 0;
}
.hp.player {
background: url(images/red-hp.png) repeat;
right: 0;
}
3. In the newly created
hp.js
file, we have the following code for the HP module.
It is an object managing both the player's and opponent's health points, including
the value and displaying the calculaion methods:
;(function(){
var game = this.cardBattleGame = this.cardBattleGame
|| {};
var HP = game.HP = {
playerHP: 100,
opponentHP: 100,
playerHPView: document.querySelector('.hp.player'),
