In this task, we will decorate the game with bitmap graphics. We replace the current code-drawing shape with bitmap graphics drawn in the painting software.
We will need several bitmap images in this task. They will be used as images for the background, box, heart, and the deadline. Please find them attached in the code bundle.
Let's start by replacing the canvas's background and input.
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); }Then, we use bitmap to replace the canvas's
RectShapefunction. We start with the box:function Box(){ createjs.Container.call(this); var bitmap = new createjs.Bitmap('images/box.png'); this.addChild(bitmap); }Then, we replace the
deadlineshape...