HTML and CSS Reference
In-Depth Information
Engage thrusters
Let's start by replacing the canvas's background and input.
1. The following code elements are the HTML elements and we can set the graphics
in CSS:
canvas {
background: #333 url(../images/bg.png);
}
.control {
background: gray url(../images/input_button.png);
}
.control:active {
background: white url(../images/input_button_hover.png);
}
2. Then, we use bitmap to replace the canvas's RectShape funcion. We start with
the box:
function Box(){
createjs.Container.call(this);
var bitmap = new createjs.Bitmap('images/box.png');
this.addChild(bitmap);
}
3. Then, we replace the deadline shape with the bitmap:
var deadline = new createjs.Bitmap('images/deadline.png');
4. Finally, we replace the red square shape into a heart shape image to represent the
remaining lives:
var heart = new createjs.Bitmap('images/heart.png');
Objective complete - mini debriefing
What we have done is change the rectangular shape to a bitmap graphic. Because we have
put the numbered box as a container, we are free to change what's inside the container
without the need to change any of the logical part. It is independent of whether we use
a shape or a bitmap to display it.
Speciically, we use pixel art because it looks beter in a smaller dimension.
 
Search WWH ::




Custom Search