tiled y sprite, sprite angel

src/.gitignore

@@ -1 +1,2 @@
 /fonts/monogram*
+/assets/

src/js/objects.js

@@ -56,14 +56,14 @@ export class Sprite {
     this.y = y;
     this.width = null;
     this.height = null;
+    this.angle = 0;
 
-    this.src = src;
     this.loaded = false;
 
     this.#image = new Image();
     this.#image.onload = this.#onload();
 
-    this.#image.src = this.src;
+    this.#image.src = src;
   }
 
   #onload() {
@@ -82,7 +82,11 @@ export class Sprite {
       return -1;
     }
 
-    context.drawImage(this.image(), this.x, this.y);
+    context.save();
+    context.translate(this.x + this.#image.width / 2, this.y + this.#image.height / 2);
+    context.rotate((this.angle * Math.PI) / 180);
+    context.drawImage(this.#image, -this.#image.width / 2, -this.#image.height / 2);
+    context.restore();
 
     if (debug) {
       drawDebug(context, this.x, this.y, this.#image.width, this.#image.height);
@@ -90,6 +94,40 @@ export class Sprite {
   }
 }
 
+export class TiledSprite extends Sprite {
+  constructor(src = null, x, y) {
+    super(src, x, y);
+  }
+
+  draw(context, debug = false) {
+    if (this.loaded != true) {
+      return -1;
+    }
+
+    context.drawImage(this.image(), this.x, this.y);
+    let copyUpByY = Math.ceil(this.y / this.image().height);
+    let copyDownByY = Math.ceil(
+      (context.canvas.height - this.y - this.image().height) / this.image().height
+    );
+
+    for (let i = 0; i <= copyUpByY; i++) {
+      if (copyUpByY === Infinity) {
+        break;
+      }
+
+      context.drawImage(this.image(), this.x, this.y - this.image().height * i);
+    }
+
+    for (let i = 0; i <= copyDownByY; i++) {
+      if (copyDownByY === Infinity) {
+        break;
+      }
+
+      context.drawImage(this.image(), this.x, this.y + this.image().height * i);
+    }
+  }
+}
+
 function drawDebug(context, x, y, w, h) {
   context.font = '16px Monogram';
   context.fillStyle = '#ffffff';