feat(gameobjects): add pause menu

src/events/attack.ts

@@ -1,16 +1,18 @@
 import { Sound } from '../constants'
-import { addBubble } from '../gameobjects'
+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 (time.passedDelay()) {
-      play(Sound.Hit, { detune: rand(-100, 100) })
-      addBubble(player)
-      time.setUpdatedAt()
+    if (game.paused || !time.passedDelay()) {
+      return
     }
+
+    play(Sound.Hit, { detune: rand(-100, 100) })
+    addBubble(player)
+    time.setUpdatedAt()
   })
 }

src/events/cursors.ts

@@ -1,7 +1,12 @@
+import { game } from '../gameobjects'
 import type { Player } from '../types'
 
 export function addCursorKeys(player: Player) {
   onKeyDown((key) => {
+    if (game.paused) {
+      return
+    }
+
     const speed = player.speed - player.bubble * 20
 
     switch (key) {

src/gameobjects/button.ts

@@ -1,3 +1,5 @@
+import type { GameObj } from 'kaplay'
+
 interface Props {
   width: number
   height: number
@@ -7,18 +9,27 @@ interface Props {
   text: string
   onClick: () => void
   fixed?: boolean
+  parent?: GameObj
 }
 
 export function addButton(props: Props) {
-  const button = add([
+  const comps = [
     rect(props.width, props.height, { radius: props.radius }),
     pos(props.x, props.y),
     area(),
     scale(1),
     anchor('center'),
     outline(4),
     color(255, 255, 255),
-  ])
+  ]
+
+  let button
+
+  if (props.parent) {
+    button = props.parent.add(comps)
+  } else {
+    button = add(comps)
+  }
 
   if (props.fixed) {
     button.use(fixed())

src/gameobjects/game.ts

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

src/gameobjects/index.ts

@@ -7,6 +7,7 @@ export * from './enemy'
 export * from './game'
 export * from './health'
 export * from './music'
+export * from './pause'
 export * from './player'
 export * from './projectile'
 export * from './score'

src/gameobjects/pause.ts

@@ -0,0 +1,74 @@
+import type { TweenController } from 'kaplay'
+
+import { Scene } from '../constants'
+import { addButton, game, stopMusic } from '.'
+
+export function addPause() {
+  let currentTween: TweenController
+  const { x, y } = center()
+
+  onKeyPress((key) => {
+    if (['escape', 'p'].includes(key)) {
+      togglePause()
+    }
+  })
+
+  const pauseMenu = add([
+    rect(340, 300),
+    color(255, 255, 255),
+    outline(4),
+    anchor('center'),
+    pos(x, y + 700),
+  ])
+
+  pauseMenu.hidden = true
+
+  addButton({
+    width: 200,
+    height: 80,
+    radius: 8,
+    x: 0,
+    y: -50,
+    text: 'Resume',
+    onClick: togglePause,
+    parent: pauseMenu,
+  })
+
+  addButton({
+    width: 200,
+    height: 80,
+    radius: 8,
+    x: 0,
+    y: 50,
+    text: 'Exit',
+    onClick() {
+      go(Scene.Title)
+      stopMusic()
+    },
+    parent: pauseMenu,
+  })
+
+  function togglePause() {
+    game.paused = !game.paused
+
+    if (currentTween) {
+      currentTween.cancel()
+    }
+
+    currentTween = tween(
+      pauseMenu.pos,
+      game.paused ? center() : center().add(0, 700),
+      1,
+      (position) => (pauseMenu.pos = position),
+      easings.easeOutElastic,
+    )
+
+    if (game.paused) {
+      pauseMenu.hidden = false
+    } else {
+      currentTween.onEnd(() => {
+        pauseMenu.hidden = true
+      })
+    }
+  }
+}

src/scenes/game.ts

@@ -5,9 +5,11 @@ import {
   addEnemy,
   addGame,
   addHealth,
+  addPause,
   addPlayer,
   addScore,
   addText,
+  game,
   playMusic,
 } from '../gameobjects'
 import { gameState, levels } from '../helpers'
@@ -26,27 +28,28 @@ scene(Scene.Game, () => {
 
   addScore()
   playMusic()
+  addPause()
 
   const player = addPlayer()
   addHealth(player)
   addAvatar()
 
   levels.forEach((level) => {
-    wait(level.start, () => {
+    game.wait(level.start, () => {
       gameState.enemy.multiplier.damage = level.multiplier.damage
       gameState.enemy.multiplier.health = level.multiplier.health
       gameState.enemy.multiplier.speed = level.multiplier.speed
       gameState.enemy.sprites = level.enemies
       const duration = level.end && level.end - level.start
 
-      loop(
+      game.loop(
         level.loop.enemy,
         addEnemy,
         duration && duration / level.loop.enemy,
         true,
       )
 
-      loop(
+      game.loop(
         level.loop.enemy,
         addDrain,
         duration && duration / level.loop.drain,