Step 7

Let's use our Sprite class to create objects.

Open the script.js file and add the following import statement at the very top of the file.

import Sprite from "./model/Sprite.js";

In script.js file, remove the following code:

let x = canvas.width / 2;
let y = canvas.height - 30;
const dx = 2;
const dy = -2;

and instead place this statement

const blueSprite = new Sprite(
  canvas.width / 2,
  canvas.height - 30,
  10,
  10,
  "#0095DD"
);

Inside the draw function, remove the following statement:

ctx.beginPath();
ctx.rect(x, y, 10, 10);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
x += dx;
y += dy;

and instead place this statements:

blueSprite.draw(ctx);
blueSprite.move(2, -2);

Save your code again and try it in your browser.