/**
* Represents a drawable object in the game.
*
*/
class DrawableObject {
x = 120;
y = 280;
height = 150;
width = 100;
img;
imageCache = {};
currentImage = 0;
/**
* Plays an animation by cycling through an array of images.
* @param {Array<string>} images - The array of image paths.
*
*/
playAnimation(images) {
let i = this.currentImage % images.length;
let path = images[i];
this.img = this.imageCache[path];
this.currentImage++;
};
/**
* Loads an image from a given path.
* @param {string} path - The path to the image.
*
*/
loadImage(path) {
this.img = new Image();
this.img.src = path;
};
/**
* Draws the object on the canvas.
* @param {CanvasRenderingContext2D} ctx - The rendering context of the canvas.
*
*/
draw(ctx) {
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
};
/**
* Loads multiple images and caches them.
* @param {Array<string>} arr - The array of image paths.
*
*/
loadImages(arr) {
arr.forEach((path) => {
let img = new Image();
img.src = path;
this.imageCache[path] = img;
});
};
/**
* Draws the frame of the object for debugging purposes.
* @param {CanvasRenderingContext2D} ctx - The rendering context of the canvas.
*
*/
drawFrame(ctx) {
if (this instanceof Character || this instanceof SmallChicken || this instanceof Chicken
) {
ctx.beginPath();
ctx.lineWidth = '5';
ctx.strokeStyle = 'blue';
//ctx.rect(this.x, this.y, this.width, this.height);
ctx.stroke();
const offsetX = this.offset.left;
const offsetY = this.offset.top;
const offsetWidth = this.width - this.offset.left - this.offset.right;
const offsetHeight = this.height - this.offset.top - this.offset.bottom;
ctx.beginPath();
ctx.lineWidth = '2';
ctx.strokeStyle = 'red';
//ctx.rect(this.x + offsetX, this.y + offsetY, offsetWidth, offsetHeight);
ctx.stroke();
}
};
}