HTML and CSS Reference
In-Depth Information
height: 600px;
border-radius: 8px;
overflow: hidden;
}
.scene {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
border-radius: 8px;
transition: all .3s ease-out;
}
.scene.out {
transform: translate3d(100%, 0, 0);
}
.scene.in {
transform: translate3d(0, 0, 0);
}
.button {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#start-scene { background: url(images/start-scene-
bg.png);}
#game-scene { background: url(images/battle-bg.png);}
#gameover-scene.won { background: url(images/you-
won.png);}
#gameover-scene.loss { background: url(images/you-
loss.png);}
3. Now, we have the game elements and their styles defined. The next thing is the logic
of toggling the different states of the game elements. This is the job of JavaScript.
There are many different components in a game, and we will divide them into
individual files for easier code readability. The following code controls the game
flow and is placed in the
game.js
file:
;(function(){
var game = this.cardBattleGame = this.cardBattleGame
|| {};
// Main Game Flow