feat(gameobjects): add rewards

src/events/attack.ts

@@ -1,18 +1,19 @@
 import { Sound } from '../constants'
 import { addBubble, game } from '../gameobjects'
-import { Time } from '../helpers'
 import type { Player } from '../types'
 
 export function addAttack(player: Player) {
-  const time = new Time()
-
   onClick(() => {
-    if (game.paused || !time.passedDelay()) {
-      return
+    if (canAttack(player)) {
+      player.attack.lastFired = time()
+      addBubble(player)
+      play(Sound.Hit, { detune: rand(-100, 100) })
     }
-
-    play(Sound.Hit, { detune: rand(-100, 100) })
-    addBubble(player)
-    time.setUpdatedAt()
   })
 }
+
+function canAttack(player: Player) {
+  return (
+    !game.paused && time() - player.attack.lastFired - player.attack.delay > 0
+  )
+}

src/gameobjects/bubble.ts

@@ -5,19 +5,20 @@ import { getDirection } from '../helpers'
 import type { Bubble, ChildBubble, Enemy, Player } from '../types'
 import { game } from '.'
 
-const SPEED = 200
-
 export function addBubble(player: Player) {
   const bubble = game.add([
     sprite(Sprite.Bubble),
     pos(player.pos),
-    move(getDirection(player.screenPos()!, mousePos()), SPEED),
+    move(
+      getDirection(player.screenPos()!, mousePos()),
+      player.attack.bubbleSpeed,
+    ),
     area({ scale: 0.7 }),
     offscreen({ destroy: true }),
     anchor('center'),
     scale(0.1),
     Tag.Bubble,
-    { damage: 20 },
+    { damage: player.attack.bubbleDamage },
   ])
 
   bubble.onCollide(Tag.Enemy, (enemy) => {

src/gameobjects/game.ts

@@ -1,5 +1,5 @@
-export let game = add([timer()])
+export let game = add([timer(), { reward: false }])
 
 export function addGame() {
-  game = add([timer()])
+  game = add([timer(), { reward: false }])
 }

src/gameobjects/index.ts

@@ -11,5 +11,6 @@ export * from './music'
 export * from './pause'
 export * from './player'
 export * from './projectile'
+export * from './reward'
 export * from './score'
 export * from './text'

src/gameobjects/modal.ts

@@ -1,12 +1,18 @@
-export function addModal({ hidden = false }) {
+interface Options {
+  hidden?: boolean
+}
+
+export function addModal(options?: Options) {
   const modal = add([
     rect(width(), height()),
     color(0, 0, 0),
     opacity(0.5),
     fixed(),
   ])
 
-  modal.hidden = hidden
+  if (typeof options?.hidden === 'boolean') {
+    modal.hidden = options.hidden
+  }
 
   return modal
 }

src/gameobjects/pause.ts

@@ -8,7 +8,7 @@ export function addPause() {
   const { x, y } = center()
 
   onKeyPress((key) => {
-    if (['escape', 'p'].includes(key)) {
+    if (!game.reward && ['escape', 'p'].includes(key)) {
       togglePause()
     }
   })

src/gameobjects/player.ts

@@ -17,7 +17,16 @@ export function addPlayer(x = center().x, y = center().y) {
     scale(0.75),
     health(HEALTH, HEALTH),
     Tag.Player,
-    { bubble: 0, speed: 320 },
+    {
+      attack: {
+        bubbleDamage: 20,
+        bubbleSpeed: 200,
+        delay: 1,
+        lastFired: -1,
+      },
+      bubble: 0,
+      speed: 320,
+    },
   ])
 
   addCursorKeys(player)

src/gameobjects/reward.ts

@@ -0,0 +1,109 @@
+import { addButton, addModal, addText, game, getPlayer } from '.'
+
+const rewards = [
+  {
+    text: 'Heal 20% HP',
+    action() {
+      const player = getPlayer()!
+      player.heal(player.maxHP()! * 0.2)
+    },
+  },
+
+  {
+    text: 'Max HP +10%',
+    action() {
+      const player = getPlayer()!
+      const maxHP = player.maxHP()!
+      const hpIncrease = maxHP * 0.1
+      player.setMaxHP(maxHP + hpIncrease)
+      player.heal(hpIncrease)
+    },
+  },
+
+  {
+    text: 'Player Speed +10%',
+    action() {
+      const player = getPlayer()!
+      player.speed *= 1.1
+    },
+  },
+
+  {
+    text: 'Fire Rate +10%',
+    action() {
+      const player = getPlayer()!
+      player.attack.delay *= 0.9
+    },
+  },
+
+  {
+    text: 'Bubble Damage +10%',
+    action() {
+      const player = getPlayer()!
+      player.attack.bubbleDamage *= 1.1
+    },
+  },
+
+  {
+    text: 'Bubble Speed +10%',
+    action() {
+      const player = getPlayer()!
+      player.attack.bubbleSpeed *= 1.1
+    },
+  },
+]
+
+export function addReward() {
+  game.reward = true
+  game.paused = true
+
+  const modal = addModal()
+  const container = modal.add([pos(center())])
+
+  addText({
+    width: 550,
+    height: 80,
+    x: 0,
+    y: -120,
+    text: 'Choose a reward',
+    fontSize: 48,
+    parent: container,
+  })
+
+  getRewards().forEach((reward, index) => {
+    addButton({
+      width: reward.text.length * 25,
+      height: 80,
+      radius: 8,
+      x: 0,
+      y: index * 100,
+      text: reward.text,
+      onClick() {
+        reward.action()
+        modal.destroy()
+        game.reward = false
+        game.paused = false
+      },
+      parent: container,
+    })
+  })
+
+  tween(
+    container.pos,
+    center(),
+    1,
+    (position) => (container.pos = position),
+    easings.easeOutElastic,
+  )
+}
+
+function getRewards(total = 2) {
+  const result = []
+  const copy = rewards.slice()
+
+  for (let i = 0; i < total; i++) {
+    result.push(copy.splice(randi(copy.length), 1)[0])
+  }
+
+  return result
+}

src/gameobjects/score.ts

@@ -1,5 +1,7 @@
 import { Layer } from '../constants'
+import { gameState } from '../helpers'
 import type { Score } from '../types'
+import { addReward } from '.'
 
 let score: Score
 
@@ -32,6 +34,13 @@ export function getScore() {
   return score
 }
 
-export function incrementScore(amount = 1) {
-  score.text = String(parseInt(score.text, 10) + amount)
+export function incrementScore(value = 1) {
+  const newScore = parseInt(score.text, 10) + value
+  score.text = newScore.toString()
+
+  if (newScore === gameState.reward.score) {
+    gameState.reward.increment += 1
+    gameState.reward.score += gameState.reward.increment
+    addReward()
+  }
 }

src/gameobjects/text.ts

@@ -1,19 +1,30 @@
+import type { GameObj } from 'kaplay'
+
 interface Props {
   width: number
   height: number
   x: number
   y: number
   text: string
   fontSize?: number
+  parent?: GameObj
 }
 
 export function addText(props: Props) {
-  const box = add([
+  const comps = [
     rect(props.width, props.height),
     pos(props.x, props.y),
     anchor('center'),
     color(255, 255, 255),
-  ])
+  ]
+
+  let box
+
+  if (props.parent) {
+    box = props.parent.add(comps)
+  } else {
+    box = add(comps)
+  }
 
   return box.add([
     text(props.text, { size: props.fontSize }),

src/helpers/gameState.ts

@@ -10,11 +10,19 @@ class GameState {
     sprites: [] as Sprite[],
   }
 
+  reward = {
+    score: 5,
+    increment: 5,
+  }
+
   init() {
     this.enemy.multiplier.damage = 1
     this.enemy.multiplier.health = 1
     this.enemy.multiplier.speed = 1
     this.enemy.sprites = []
+
+    this.reward.score = 5
+    this.reward.increment = 5
   }
 }
 

src/helpers/index.ts

@@ -3,4 +3,3 @@ export * from './coordinates'
 export * from './direction'
 export * from './gameState'
 export * from './levels'
-export * from './time'