diff --git a/src/ui/components/glimmeroids-app/template.hbs b/src/ui/components/glimmeroids-app/template.hbs index 6cbdcf3..a5c852a 100644 --- a/src/ui/components/glimmeroids-app/template.hbs +++ b/src/ui/components/glimmeroids-app/template.hbs @@ -1,21 +1,23 @@
- {{#if (not (eq state.gameState GameState.Running))}} -
+ {{#if (not (eq state.gameState GameState.Welcome))}} +

Glimmeroids

+
+ {{/if}} + {{#if (not (eq state.gameState GameState.Running))}} +
{{#if (eq state.gameState GameState.GameOver)}}

Game over, man!

{{gameOverMessage}}

+ {{else}} +

Glimmeroids

{{/if}}
- {{else}} -
-

Glimmeroids

-
{{/if}} diff --git a/src/utils/asteroid.ts b/src/utils/asteroid.ts index 3f50f67..6701387 100644 --- a/src/utils/asteroid.ts +++ b/src/utils/asteroid.ts @@ -14,6 +14,7 @@ export default class Asteroid implements Entity { radius: number; score: number; vertices: Position[]; + imageOffset: Position; delete: boolean; create: Function; @@ -32,6 +33,10 @@ export default class Asteroid implements Entity { this.create = args.create; this.addScore = args.addScore; this.vertices = asteroidVertices(8, args.size); + this.imageOffset = { + x: randomNumBetween(-this.radius * 0.3, this.radius * 0.3), + y: randomNumBetween(-this.radius * 0.3, this.radius * 0.3) + }; } destroy() { @@ -113,7 +118,13 @@ export default class Asteroid implements Entity { } context.closePath(); context.clip(); - context.drawImage(FILL_IMAGE, -this.radius * 1.5, -this.radius * 1.5, this.radius * 3, this.radius * 3); + context.drawImage( + FILL_IMAGE, + -this.radius * 1.5 + this.imageOffset.x, + -this.radius * 1.5 + this.imageOffset.y, + this.radius * 3, + this.radius * 3 + ); context.stroke(); context.restore(); }