new draw logic

This commit is contained in:
Alexander Popov 2023-04-23 18:50:36 +03:00
parent a4bb1f7dc9
commit 4ad80bcc7d
Signed by: iiiypuk
GPG Key ID: E47FE0AB36CD5ED6
4 changed files with 124 additions and 29 deletions

1
src/js/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
game.js

View File

@ -14,6 +14,15 @@ export class Rect extends Object {
this.fillColor = fillColor;
}
draw(context, debug = false) {
context.fillStyle = this.fillColor;
context.fillRect(this.x, this.y, this.width, this.height);
if (debug) {
drawDebug(context, this.x, this.y, this.width, this.height);
}
}
}
export class StrokeRect extends Rect {
@ -23,4 +32,71 @@ export class StrokeRect extends Rect {
this.strokeWidth = strokeWidth;
this.strokeColor = strokeColor;
}
draw(context, debug = false) {
context.fillStyle = this.fillColor;
context.fillRect(this.x, this.y, this.width, this.height);
context.lineWidth = this.strokeWidth;
context.strokeStyle = this.strokeColor;
context.strokeRect(this.x, this.y, this.width, this.height);
if (debug) {
drawDebug(context, this.x, this.y, this.width, this.height);
}
}
}
export class Sprite {
#loaded;
#image;
constructor(src = null, x, y) {
this.x = x;
this.y = y;
this.width = null;
this.height = null;
this.src = src;
this.loaded = false;
this.#image = new Image();
this.#image.onload = this.#onload();
this.#image.src = this.src;
}
#onload() {
this.width = this.#image.width;
this.height = this.#image.height;
this.loaded = true;
}
image() {
return this.#image;
}
draw(context, debug = false) {
if (this.loaded != true) {
return -1;
}
context.drawImage(this.image(), this.x, this.y);
if (debug) {
drawDebug(context, this.x, this.y, this.#image.width, this.#image.height);
}
}
}
function drawDebug(context, x, y, w, h) {
context.font = '14px serif';
context.fillStyle = '#ffffff';
context.fillText(`${x}x${y}`, x + 1, y - 2);
context.fillStyle = '#000000';
context.fillText(`${x}x${y}`, x, y - 3);
context.lineWidth = 1;
context.strokeStyle = 'blue';
context.strokeRect(x, y, w, h);
}

View File

@ -33,42 +33,60 @@ export class Scene {
// read layers & draw items
this.#layers.forEach((layer) => {
layer.objects().forEach((item) => {
switch (item.constructor.name) {
case 'Rect':
this.#drawRect(item.x, item.y, item.width, item.height, item.fillColor);
break;
case 'StrokeRect':
this.#drawStrokeRect(
item.x,
item.y,
item.width,
item.height,
item.fillColor,
item.strokeColor,
item.strokeWidth
);
break;
default:
if (typeof item.draw == 'function') {
item.draw(this.#context, true);
} else {
console.log(`⛔ Error display '${item.constructor.name}' object.`);
}
// switch (item.constructor.name) {
// case 'Rect':
// this.#drawRect(item.x, item.y, item.width, item.height, item.fillColor);
// break;
// case 'StrokeRect':
// this.#drawStrokeRect(
// item.x,
// item.y,
// item.width,
// item.height,
// item.fillColor,
// item.strokeColor,
// item.strokeWidth
// );
// break;
// case 'Sprite':
// this.#drawSprite(item);
// break;
// default:
// console.log(`⛔ Error display '${item.constructor.name}' object.`);
// }
});
});
}
#drawRect(x, y, w, h, fillColor) {
this.#context.fillStyle = fillColor;
this.#context.fillRect(x, y, w, h);
}
// #drawRect(x, y, w, h, fillColor) {
// this.#context.fillStyle = fillColor;
// this.#context.fillRect(x, y, w, h);
// }
#drawStrokeRect(x, y, w, h, fillColor, strokeColor, strokeWidth) {
this.#drawRect(x, y, w, h, fillColor);
// #drawStrokeRect(x, y, w, h, fillColor, strokeColor, strokeWidth) {
// this.#drawRect(x, y, w, h, fillColor);
this.#context.lineWidth = strokeWidth;
this.#context.strokeStyle = strokeColor;
this.#context.strokeRect(x, y, w, h);
}
// this.#context.lineWidth = strokeWidth;
// this.#context.strokeStyle = strokeColor;
// this.#context.strokeRect(x, y, w, h);
// }
// #drawSprite(image) {
// if (image.loaded != true) {
// return -1;
// }
// this.#context.drawImage(image.image(), image.x, image.y);
// }
addLayer(layer) {
this.#layers.push(layer);