diff --git a/src/index.html b/src/index.html index 0b57a83..285f47d 100644 --- a/src/index.html +++ b/src/index.html @@ -8,6 +8,5 @@ - diff --git a/src/js/app.js b/src/js/app.js index 724d341..4db0ebe 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -3,9 +3,19 @@ import { Settings } from './settings.js'; import { Pointer } from './pointer.js'; export class App { - constructor(canvas, w, h) { - this.canvas = canvas; + constructor( + canvas, + w, + h, + options = { + backgroundColor: '#ffcc68', + } + ) { + this.view = document.createElement('canvas'); + + this.canvas = this.view; this.context = this.canvas.getContext('2d'); + this.options = options; this.scene = new Scene(this.canvas, this.context, w, h); this.prevTime = Date.now(); @@ -20,6 +30,18 @@ export class App { Settings.delta = (newTime - this.prevTime) / 1000; this.prevTime = newTime; + // clear canvas + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + + // fill canvas + this.context.fillStyle = this.options.backgroundColor; + this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + + // draw border + this.context.strokeStyle = '#101024'; + this.context.lineWidth = 1; + this.context.strokeRect(5, 5, this.canvas.width - 10, this.canvas.height - 10); + this.scene.run(); requestAnimationFrame(this.run); diff --git a/src/js/game.js b/src/js/game.js index fa4394f..cf44b57 100644 --- a/src/js/game.js +++ b/src/js/game.js @@ -1,5 +1,19 @@ import { App } from './app.js'; +import { Scene, SceneLayer } from './scene.js'; +import { Rect, StrokeRect } from './objects.js'; +let app = new App(document.querySelector('canvas'), 400, 400); + +let firstScene = new Scene(app.canvas, app.context, 400, 400); +let firstLayer = new SceneLayer('background', [ + new Rect(50, 50, 100, 100, 'red'), + new StrokeRect(150, 150, 40, 40, 'green', 'blue', 1), +]); +firstScene.addLayer(firstLayer); + +app.scene = firstScene; + +// add app view in document window.addEventListener('DOMContentLoaded', () => { - new App(document.querySelector('canvas'), 400, 400); + document.body.appendChild(app.view); }); diff --git a/src/js/objects.js b/src/js/objects.js index 3624fdd..0895dc3 100644 --- a/src/js/objects.js +++ b/src/js/objects.js @@ -1,25 +1,4 @@ -export class uLayer { - #objects; - - constructor(name, objects) { - // TODO: check types - this.#objects = Array(); - - objects.forEach((object) => { - this.#objects.push(object); - }); - } - - add(object) { - this.#objects.push(object); - } - - objects() { - return this.#objects; - } -} - -class uObject { +class Object { constructor(x, y, w, h) { this.x = x; this.y = y; @@ -28,7 +7,7 @@ class uObject { } } -export class uRect extends uObject { +export class Rect extends Object { constructor(x, y, w, h, fillColor = 'white') { super(x, y, w, h); @@ -36,7 +15,7 @@ export class uRect extends uObject { } } -export class uStrokeRect extends uRect { +export class StrokeRect extends Rect { constructor(x, y, w, h, fillColor = 'white', strokeColor = 'black', strokeWidth = 1) { super(x, y, w, h, fillColor); diff --git a/src/js/scene.js b/src/js/scene.js index f072fb5..54161e9 100644 --- a/src/js/scene.js +++ b/src/js/scene.js @@ -1,5 +1,4 @@ import { Pointer } from './pointer.js'; -import { uLayer, uRect, uStrokeRect } from './objects.js'; export class Scene { #canvas; @@ -11,45 +10,23 @@ export class Scene { this.#context = context; this.#layers = Array(); - let layer = new uLayer('Entry', [ - new uRect(50, 50, 100, 100, 'red'), - new uStrokeRect(150, 150, 40, 40, 'green', 'blue', 5), - ]); - - this.addLayer(layer); - this.setScreenSize(width, height); } - #clearCanvas() { - 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); - - // draw border - this.#context.strokeStyle = '#8bd0ba'; - this.#context.lineWidth = 1; - this.#context.strokeRect(5, 5, this.#canvas.width - 10, this.#canvas.height - 10); - // read layers & draw items this.#layers.forEach((layer) => { layer.objects().forEach((item) => { switch (item.constructor.name) { - case 'uRect': + case 'Rect': this.#drawRect(item.x, item.y, item.width, item.height, item.fillColor); break; - case 'uStrokeRect': + case 'StrokeRect': this.#drawStrokeRect( item.x, item.y, @@ -73,10 +50,10 @@ export class Scene { this.#context.fillRect(x, y, w, h); } - #drawStrokeRect(x, y, w, h, fillColor, strokeWidth, strokeColor) { + #drawStrokeRect(x, y, w, h, fillColor, strokeColor, strokeWidth) { this.#drawRect(x, y, w, h, fillColor); - this.#context.strokeWidth = strokeWidth; + this.#context.lineWidth = strokeWidth; this.#context.strokeStyle = strokeColor; this.#context.strokeRect(x, y, w, h); } @@ -94,3 +71,24 @@ export class Scene { this.#canvas.height = h; } } + +export class SceneLayer { + #objects; + + constructor(name, objects = Array()) { + // TODO: check types + this.#objects = Array(); + + objects.forEach((object) => { + this.#objects.push(object); + }); + } + + add(object) { + this.#objects.push(object); + } + + objects() { + return this.#objects; + } +}