diff --git a/src/js/app.js b/src/js/app.js index 82a63a3..7f04aee 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -4,7 +4,10 @@ import { Pointer } from './pointer.js'; export class App { constructor(w, h) { - this.scene = new Scene(w, h); + this.canvas = document.querySelector('canvas'); + this.context = this.canvas.getContext('2d'); + + this.scene = new Scene(this.canvas, this.context, w, h); this.prevTime = Date.now(); Pointer.init(); diff --git a/src/js/scene.js b/src/js/scene.js index f2d53e6..84a36e9 100644 --- a/src/js/scene.js +++ b/src/js/scene.js @@ -1,41 +1,47 @@ import { Pointer } from './pointer.js'; export class Scene { - constructor(width, height) { + #canvas; + #context; + #scene; + + constructor(canvas, context, width, height) { + this.#canvas = canvas; + this.#context = context; this.init(width, height); } init = async (width, height) => { - this.canvas = document.querySelector('canvas'); - this.context = this.canvas.getContext('2d'); - this.setScreenSize(width, height); } #clearCanvas() { - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + this.#context.clearRect(0, 0, this.#canvas.width, this.#canvas.height); } run() { // clear canvas this.#clearCanvas(); + this.#scene(); + } + #scene() { // fill canvas - this.context.fillStyle = '#523c4e'; - this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + this.#context.fillStyle = '#523c4e'; + this.#context.fillRect(0, 0, this.#canvas.width, this.#canvas.height); // draw border - this.context.strokeStyle = '#8bd0ba'; - this.context.lineWidth = 1; - this.context.strokeRect(5, 5, this.canvas.width - 10, this.canvas.height - 10); + this.#context.strokeStyle = '#8bd0ba'; + this.#context.lineWidth = 1; + this.#context.strokeRect(5, 5, this.#canvas.width - 10, this.#canvas.height - 10); // draw rect in center - this.context.fillStyle = '#d44e52'; - this.context.fillRect(this.canvas.width / 2 - 50, this.canvas.height / 2 - 50, 100, 100); + this.#context.fillStyle = '#d44e52'; + this.#context.fillRect(this.#canvas.width / 2 - 50, this.#canvas.height / 2 - 50, 100, 100); } setScreenSize(w, h) { - this.canvas.width = w; - this.canvas.height = h; + this.#canvas.width = w; + this.#canvas.height = h; } }