feat: add type sprite on kontra engine

Author: Shirajuki

src/scripts/kontra.js

@@ -1,4 +1,4 @@
-import { init, GameLoop } from 'kontra';
+import { init, GameLoop, Sprite } from 'kontra';
 import Engine from './engine.js';
 
 class KontraEngine extends Engine {
@@ -22,6 +22,8 @@ class KontraEngine extends Engine {
       this.ctx.strokeStyle = 'black';
       this.ctx.fillStyle = 'white';
     }
+    const image = new Image();
+    image.src = 'sprite.png';
 
     // Particle creation
     const particles = new Array(this.count);
@@ -34,7 +36,16 @@ class KontraEngine extends Engine {
         3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
         3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
       ];
-      particles[i] = { x, y, size: size, dx, dy };
+      let sprite;
+      if (this.type === 'sprite') {
+        sprite = Sprite({
+          x: x,
+          y: y,
+          anchor: { x: 0.5, y: 0.5 },
+          image: image,
+        });
+      }
+      particles[i] = { x, y, size: size, dx, dy, el: sprite };
     }
     this.particles = particles;
   }
@@ -51,16 +62,24 @@ class KontraEngine extends Engine {
           else if (r.y + r.size < 0) r.dy *= -1;
           if (r.x > this.width) r.dx *= -1;
           else if (r.y > this.height) r.dy *= -1;
+          if (r.el) {
+            r.el.x = r.x;
+            r.el.y = r.y;
+          }
         }
         this.fpsmeter.tick();
       },
       render: () => {
         for (let i = 0; i < this.count; i++) {
           const r = this.particles[i];
-          this.ctx.beginPath();
-          this.ctx.arc(r.x, r.y, r.size, 0, 2 * Math.PI);
-          if (this.type === 'fill') this.ctx.fill();
-          this.ctx.stroke();
+          if (this.type === 'sprite') {
+            r.el.render();
+          } else {
+            this.ctx.beginPath();
+            this.ctx.arc(r.x, r.y, r.size, 0, 2 * Math.PI);
+            if (this.type === 'fill') this.ctx.fill();
+            this.ctx.stroke();
+          }
         }
       },
     });