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(){;
var bitmap = new createjs.Bitmap('images/box.png');
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