diff --git a/src/Goal.js b/src/Goal.js new file mode 100644 index 0000000..7016499 --- /dev/null +++ b/src/Goal.js @@ -0,0 +1,52 @@ +import { Sprite } from 'kontra'; + +import { isBoxCollision } from './utils'; +import grave from './assets/img/grave-4x-mini.png'; + +export class Goal { + level; + sprite; + scale = 2; + constructor(x, y, { level }) { + this.x = x; + this.y = y; + this.level = level; + this.createSprite(); + } + update() { + this.checkCollision(); + if (this.sprite) { + this.sprite.update(); + } + } + render() { + if (this.sprite) { + this.sprite.render(); + } + } + + checkCollision() { + if (isBoxCollision(this.sprite, this.level.player.sprite)) { + console.log('collided'); + } + } + + createSprite() { + const image = new Image(); + image.src = grave; + image.onerror = function (err) { + console.log(err); + }; + image.onload = () => { + this.sprite = Sprite({ + x: this.x, + y: this.y, + width: 32, + height: 32, + image: image, + scaleX: this.scale, + scaleY: this.scale, + }); + }; + } +} diff --git a/src/Level.js b/src/Level.js index edaad22..36daf8e 100644 --- a/src/Level.js +++ b/src/Level.js @@ -1,3 +1,4 @@ +import { Goal } from './Goal'; import { Player } from './Player'; import { Saw } from './Saw'; import { BACK_FORTH } from './sawBehavior'; @@ -5,12 +6,14 @@ import { BACK_FORTH } from './sawBehavior'; export class Level { player; saws = []; + goals = []; isLevelLoaded = false; constructor(levelId, { game }) { this.game = game; this.loadLevel(levelId).then((levelData) => { this.createPlayer(levelData); this.createSaws(levelData); + this.createGoals(levelData); this.isLevelLoaded = true; }); } @@ -34,6 +37,9 @@ export class Level { this.saws.forEach((saw) => { saw.render(ctx); }); + this.goals.forEach((goal) => { + goal.render(); + }); } update() { @@ -43,6 +49,14 @@ export class Level { this.saws.forEach((saw) => { saw.update(); }); + this.goals.forEach((goal) => { + goal.update(); + }); + } + createGoals(levelData) { + levelData.g.forEach((g) => { + this.goals.push(new Goal(g.x, g.y, { level: this })); + }); } createPlayer(levelData) { this.player = new Player({ diff --git a/src/Player.js b/src/Player.js index dc98e26..92b49f0 100644 --- a/src/Player.js +++ b/src/Player.js @@ -51,6 +51,8 @@ export class Player { x: this.pointMass.x, y: this.pointMass.y, anchor: { x: 0.5, y: 0.5 }, + width: 8, + height: 8, image: image, scaleX: this.scale, scaleY: this.scale, diff --git a/src/Saw.js b/src/Saw.js index b023d55..e24c1a9 100644 --- a/src/Saw.js +++ b/src/Saw.js @@ -58,7 +58,6 @@ export class Saw { this.sprite = Sprite({ x: this.x, y: this.y, - anchor: { x: 0.5, y: 0.5 }, image: image, scaleX: this.scale, scaleY: this.scale, diff --git a/src/assets/img/grave-4x-mini.png b/src/assets/img/grave-4x-mini.png new file mode 100644 index 0000000..5383353 Binary files /dev/null and b/src/assets/img/grave-4x-mini.png differ diff --git a/src/assets/img/grave.png b/src/assets/img/grave.png new file mode 100644 index 0000000..40e72f1 Binary files /dev/null and b/src/assets/img/grave.png differ diff --git a/src/level/level1.json b/src/level/level1.json index eb86f7e..b922281 100644 --- a/src/level/level1.json +++ b/src/level/level1.json @@ -1 +1,7 @@ -{"p":{"x":400,"y":200},"r":7,"s":[],"b":[{"x":400,"y":400}],"g":[{"x":400,"y":800}]} +{ + "p": { "x": 400, "y": 200 }, + "r": 7, + "s": [], + "b": [{ "x": 400, "y": 400 }], + "g": [{ "x": 368, "y": 700 }] +} diff --git a/src/utils.js b/src/utils.js index 4174393..69edfc0 100644 --- a/src/utils.js +++ b/src/utils.js @@ -3,6 +3,16 @@ import { Vector } from 'kontra'; export const scaleToFit = () => { // TODO (johnedvard) listen for window resize, debounce, and scale to fit mac height and width whilst keeping aspect ratio }; +export const isBoxCollision = (sprite1, sprite2) => { + // TODO (johnedvard) also incorporate anchor + if (!sprite1 || !sprite2) return false; + return ( + sprite1.x < sprite2.x + sprite2.width * sprite2.scaleX && + sprite1.x + sprite1.width * sprite1.scaleX > sprite2.x && + sprite1.y < sprite2.y + sprite2.height * sprite2.scaleY && + sprite1.height * sprite1.scaleY + sprite1.y > sprite2.y + ); +}; export const lineIntersection = (p1, p2, p3, p4) => { const d = (p2.x - p1.x) * (p4.y - p3.y) - (p2.y - p1.y) * (p4.x - p3.x); if (d == 0) return null; // parallel lines