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:
var game = this.cardBattleGame = this.cardBattleGame
|| {};
var HP = game.HP = {
playerHP: 100,
opponentHP: 100,
playerHPView: document.querySelector('.hp.player'),
Search WWH ::

Custom Search