HTML and CSS Reference
In-Depth Information
2. It is ime for the visual part. Let's move on to the CSS ile (
game.css
) and append
the following code. The following styling rules define how the running floor and the
iles look visually:
.floor {
position: relative;
width: 400px;
height: 100%;
margin: auto;
background: url(../images/space-runner-bg.png) 0 0;
}
.tile {
position: absolute;
width: 100px;
height: 100px;
}
.tile-0 {}
.tile-1 {
background: url(../images/runway.png);
}
.tile-2 {
background: url(../images/runway2.png);
}
.tile-100 {
background: url(../images/block.png);
}
.tile-4 {
background: url(../images/star.png) center center no-repeat;
}
3. We have an HTML element with a
#player
ID to represent the player. Later, we will
need to reference that player element in another JavaScript module. To make things
clearer, we will create an object dedicated to the player code, which currently only
includes the reference to the player element. Put the following player module in the
player.js
file:
// Player module
;(function(){
var game = this.spaceRunner || (this.spaceRunner = {});
var player = game.player = {};
player.element = document.getElementById('player');
}).call(this);
