emilecok/ujs
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

update main class

Browse Source
This commit is contained in:
Alexander Popov 2023-04-06 18:46:01 +03:00
parent 8937bc7dfa
commit 74e9b34253
Signed by: iiiypuk
GPG Key ID: E47FE0AB36CD5ED6
5 changed files with 67 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/index.html
View File

@ -8,6 +8,5 @@
<script src="./js/game.js" type="module"></script>
</head>
<body>
<canvas></canvas>
</body>
</html>

26
src/js/app.js
View File

@ -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);

16
src/js/game.js
View File

@ -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);
});

27
src/js/objects.js
View File

@ -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);

52
src/js/scene.js
View File

@ -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;
}
}