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.