feat: Add skull image to player, and cut the rope command

johnedvard · Aug 17, 2022 · 1ec3ee5 · 1ec3ee5
1 parent 0a1f246
commit 1ec3ee5
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 28 deletions.
diff --git a/src/Player.js b/src/Player.js
@@ -1,4 +1,6 @@
-import { getPointer } from 'kontra';
+import skull from './assets/img/skull.png';
+
+import { getPointer, Sprite } from 'kontra';
 import { PlayerControls } from './PlayerControls';
 import { PointMass } from './PointMass';
 
@@ -9,13 +11,15 @@ export class Player {
   rope = []; // list of pointmasses
   pointMass;
   playerControls;
+  sprite;
 
   constructor(x, y, game) {
     this.x = x;
     this.y = y;
     this.game = game;
     this.pointMass = new PointMass(x, y, { game, mass: 2 });
-    this.createTestRope();
+    this.createRope();
+    this.createSprite();
     this.playerControls = new PlayerControls(this);
   }
 
@@ -27,21 +31,38 @@ export class Player {
     this.rope.length = 0;
   }
   shootRope() {
-    this.createTestRope();
+    this.createRope();
   }
-  updateTestRope() {
+  updateRope() {
     this.rope.forEach((p) => {
       p.update();
     });
   }
 
-  renderTestRope(ctx) {
+  renderRope(ctx) {
     this.rope.forEach((p) => {
       p.render(ctx);
     });
   }
 
-  createTestRope() {
+  createSprite() {
+    const image = new Image();
+    image.src = skull;
+    image.onerror = function (err) {
+      console.log(err);
+    };
+    image.onload = () => {
+      this.sprite = Sprite({
+        x: 8,
+        y: 8,
+        anchor: { x: 0.5, y: 0.5 },
+        image: image,
+        scaleX: 2,
+        scaleY: 2,
+      });
+    };
+  }
+  createRope() {
     const anchor = new PointMass(this.game.canvas.width / 2, 100, {
       isAnchor: true,
       game: this.game,
@@ -57,36 +78,51 @@ export class Player {
     this.rope.push(this.pointMass);
   }
 
-  dragTestRope() {
+  dragRope() {
     if (this.game.isDragging && this.rope.length) {
       const pointer = getPointer();
       const acnhorPoint = this.rope[this.rope.length - 1];
       acnhorPoint.setPos(pointer.x, pointer.y);
     }
   }
 
-  renderPlayer(ctx) {
-    ctx.lineWidth = 2;
-
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
-    ctx.stroke();
+  renderPlayer(_ctx) {
+    if (this.sprite) {
+      this.sprite.render();
+    }
   }
 
   applyForce(fX, fY) {
     this.pointMass.applyForce(fX, fY);
   }
 
   render(ctx) {
-    this.renderTestRope(ctx);
+    this.renderRope(ctx);
     this.renderPlayer(ctx);
   }
 
   update() {
     this.x = this.pointMass.x;
     this.y = this.pointMass.y;
-    this.updateTestRope();
-    this.dragTestRope();
+    if (this.sprite) {
+      this.sprite.x = this.pointMass.x;
+      this.sprite.y = this.pointMass.y;
+    }
+
+    this.updateRope();
+    this.dragRope();
     this.playerControls.updateControls();
   }
+
+  cutRope = (e) => {
+    this.rope[2].removeLink();
+  };
+  toggleRope = (e) => {
+    // TODO (johnedvard) Maybe use state machine
+    if (this.hasRope()) {
+      this.removeRope();
+    } else {
+      this.shootRope();
+    }
+  };
 }
diff --git a/src/PlayerControls.js b/src/PlayerControls.js
@@ -18,15 +18,7 @@ export class PlayerControls {
   }
 
   initControls() {
-    onInput(['space'], this.toggleRope);
+    onInput(['space'], this.player.toggleRope);
+    onInput(['c'], this.player.cutRope);
   }
-
-  toggleRope = (e) => {
-    // TODO (johnedvard) Maybe use state machine
-    if (this.player.hasRope()) {
-      this.player.removeRope();
-    } else {
-      this.player.shootRope();
-    }
-  };
 }
diff --git a/src/assets/img/chain.png b/src/assets/img/chain.png
diff --git a/src/assets/img/skull.png b/src/assets/img/skull.png
diff --git a/src/assetsUtils.js b/src/assetsUtils.js
@@ -0,0 +1,14 @@
+import { load } from 'kontra';
+import skull from './assets/img/skull.png';
+import chain from './assets/img/chain.png';
+
+export const initAssets = () => {
+  load(skull, chain)
+    .then(function (assets) {
+      console.log('assets loaded');
+      // all assets have loaded
+    })
+    .catch(function (err) {
+      console.log('assets did not loaded', err);
+    });
+};
diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,9 @@
     <script type="module" src="index.js"></script>
   </head>
   <body>
-    <button id="loginout">Loading....</button>
+    <button id="loginout">
+      Loading.... <img src="assets/img/skull.png" />
+    </button>
     <canvas width="800px" height="800px"></canvas>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,10 @@
 import { Game } from './Game';
+import { initAssets } from './assetsUtils';
 import { NearConnection } from './near/nearConnection';
 import { initLoginLogout } from './near/nearLogin';
 const init = () => {
   new Game();
+  initAssets();
   initNear();
 };
 
@@ -26,5 +28,4 @@ const loadNearApi = () => {
     document.head.appendChild(script);
   });
 };
-
 init();