diff --git a/src/Player.js b/src/Player.js index c4fd044..fa4cdec 100644 --- 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,7 +78,7 @@ 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]; @@ -65,12 +86,10 @@ export class Player { } } - 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) { @@ -78,15 +97,32 @@ export class Player { } 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 index 3e403f9..1d97d76 100644 --- 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 new file mode 100644 index 0000000..546c72b Binary files /dev/null and b/src/assets/img/chain.png differ diff --git a/src/assets/img/skull.png b/src/assets/img/skull.png new file mode 100644 index 0000000..21e1bd1 Binary files /dev/null and b/src/assets/img/skull.png differ diff --git a/src/assetsUtils.js b/src/assetsUtils.js new file mode 100644 index 0000000..b1be53c --- /dev/null +++ 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 index 2b018fc..cc652b7 100644 --- a/src/index.html +++ b/src/index.html @@ -7,7 +7,9 @@ - + diff --git a/src/index.js b/src/index.js index 46429f6..613e014 100644 --- 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();