update main class
This commit is contained in:
parent
8937bc7dfa
commit
74e9b34253
GPG Key ID:
E47FE0AB36CD5ED6
|
|
@ -8,6 +8,5 @@
|
|||
<script src="./js/game.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue