update main class
This commit is contained in:
parent
8937bc7dfa
commit
74e9b34253
|
@ -8,6 +8,5 @@
|
||||||
<script src="./js/game.js" type="module"></script>
|
<script src="./js/game.js" type="module"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas></canvas>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -3,9 +3,19 @@ import { Settings } from './settings.js';
|
||||||
import { Pointer } from './pointer.js';
|
import { Pointer } from './pointer.js';
|
||||||
|
|
||||||
export class App {
|
export class App {
|
||||||
constructor(canvas, w, h) {
|
constructor(
|
||||||
this.canvas = canvas;
|
canvas,
|
||||||
|
w,
|
||||||
|
h,
|
||||||
|
options = {
|
||||||
|
backgroundColor: '#ffcc68',
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
this.view = document.createElement('canvas');
|
||||||
|
|
||||||
|
this.canvas = this.view;
|
||||||
this.context = this.canvas.getContext('2d');
|
this.context = this.canvas.getContext('2d');
|
||||||
|
this.options = options;
|
||||||
|
|
||||||
this.scene = new Scene(this.canvas, this.context, w, h);
|
this.scene = new Scene(this.canvas, this.context, w, h);
|
||||||
this.prevTime = Date.now();
|
this.prevTime = Date.now();
|
||||||
|
@ -20,6 +30,18 @@ export class App {
|
||||||
Settings.delta = (newTime - this.prevTime) / 1000;
|
Settings.delta = (newTime - this.prevTime) / 1000;
|
||||||
this.prevTime = newTime;
|
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();
|
this.scene.run();
|
||||||
|
|
||||||
requestAnimationFrame(this.run);
|
requestAnimationFrame(this.run);
|
||||||
|
|
|
@ -1,5 +1,19 @@
|
||||||
import { App } from './app.js';
|
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', () => {
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
new App(document.querySelector('canvas'), 400, 400);
|
document.body.appendChild(app.view);
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,25 +1,4 @@
|
||||||
export class uLayer {
|
class Object {
|
||||||
#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 {
|
|
||||||
constructor(x, y, w, h) {
|
constructor(x, y, w, h) {
|
||||||
this.x = x;
|
this.x = x;
|
||||||
this.y = y;
|
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') {
|
constructor(x, y, w, h, fillColor = 'white') {
|
||||||
super(x, y, w, h);
|
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) {
|
constructor(x, y, w, h, fillColor = 'white', strokeColor = 'black', strokeWidth = 1) {
|
||||||
super(x, y, w, h, fillColor);
|
super(x, y, w, h, fillColor);
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { Pointer } from './pointer.js';
|
import { Pointer } from './pointer.js';
|
||||||
import { uLayer, uRect, uStrokeRect } from './objects.js';
|
|
||||||
|
|
||||||
export class Scene {
|
export class Scene {
|
||||||
#canvas;
|
#canvas;
|
||||||
|
@ -11,45 +10,23 @@ export class Scene {
|
||||||
this.#context = context;
|
this.#context = context;
|
||||||
this.#layers = Array();
|
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);
|
this.setScreenSize(width, height);
|
||||||
}
|
}
|
||||||
|
|
||||||
#clearCanvas() {
|
|
||||||
this.#context.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
|
|
||||||
}
|
|
||||||
|
|
||||||
run() {
|
run() {
|
||||||
// clear canvas
|
|
||||||
this.#clearCanvas();
|
|
||||||
this.#scene();
|
this.#scene();
|
||||||
}
|
}
|
||||||
|
|
||||||
#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
|
// read layers & draw items
|
||||||
this.#layers.forEach((layer) => {
|
this.#layers.forEach((layer) => {
|
||||||
layer.objects().forEach((item) => {
|
layer.objects().forEach((item) => {
|
||||||
switch (item.constructor.name) {
|
switch (item.constructor.name) {
|
||||||
case 'uRect':
|
case 'Rect':
|
||||||
this.#drawRect(item.x, item.y, item.width, item.height, item.fillColor);
|
this.#drawRect(item.x, item.y, item.width, item.height, item.fillColor);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'uStrokeRect':
|
case 'StrokeRect':
|
||||||
this.#drawStrokeRect(
|
this.#drawStrokeRect(
|
||||||
item.x,
|
item.x,
|
||||||
item.y,
|
item.y,
|
||||||
|
@ -73,10 +50,10 @@ export class Scene {
|
||||||
this.#context.fillRect(x, y, w, h);
|
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.#drawRect(x, y, w, h, fillColor);
|
||||||
|
|
||||||
this.#context.strokeWidth = strokeWidth;
|
this.#context.lineWidth = strokeWidth;
|
||||||
this.#context.strokeStyle = strokeColor;
|
this.#context.strokeStyle = strokeColor;
|
||||||
this.#context.strokeRect(x, y, w, h);
|
this.#context.strokeRect(x, y, w, h);
|
||||||
}
|
}
|
||||||
|
@ -94,3 +71,24 @@ export class Scene {
|
||||||
this.#canvas.height = h;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue