2.2.5 Cycle 5 Menus

Design

In this cycle, I will add a main menu which allows players to navigate to different sections of the game, with a sub-menu for multiplayer.

Objectives

• Buttons for the player to click on the menu

• Buttons each do something useful

• Ways to return to menu

Usability features

Menus should be simple to navigate and straightforward to avoid confusion. Buttons enlarge when hovered over by mouse to make it obvious which one is selected.

Key scenes

Scene Name	Use
main-menu	Main menu where the game starts and you can chose what you want to do
multiplayer-menu	Menus for the multiplayer mode such as joining or creating a game
practice	A practice range where the player plays alone with a target

Pseudocode

Import multiplayer.js
Import kaboom module
Import kaboom global functions

Constant WIDTH = 1920
Constant HEIGHT = 1080
Constant GRAVITY = 450

Create a kaboom game with the specified width and height

// The following code is commented out, not used in the pseudocode
// Create a recording variable to record the game
// When the "." key is pressed, trigger the download of the recording

Set the gravity of the game to GRAVITY

Load the "bean" sprite
Load the "barrel" sprite from the "sprites/barrel.pedit" file
Load the "bullet" sprite from the "sprites/bullet.pedit" file

Function addBtn(txt, p, f):
    Create a button object with the given text at position p
    Add a child object to the button to display the text
    When the button is being hovered, increase its scale and change the cursor to a pointer
    When the button stops being hovered, reset its scale
    When the button is clicked, execute the function f
    Return the created button

Define a scene named "practice":
    On scene load:
        Display a text at position (250, 250) saying "Press 'esc' to return to menu" with a lifespan of 2 seconds and fade effect

    Create a "bean" object at position (80, random value between 0 and 1000)
    Create a "target" object at position (1500, random value between 0 and 1000)

    Add a "barrel" sprite to the "bean" object, scaled by 3, at position (0, -60)

    When the "target" collides with a "bullet":
        Trigger an explosion at the position of the target
        Destroy the target and all bullets
        Go back to the "practice" scene

    Define a function named newBullet(position, angle):
        Create a "bullet" object at the specified position and with the given angle
        Set the bullet to be destroyed when it goes offscreen
        Give the bullet a body with a movement vector based on the angle and the power of the bean
        Return the created bullet

    Create an "angle" UI object to display the angle of the player at position (24, 24)
    Create a "power" UI object to display the power of the shot at position (100, 24)

    When the space key is pressed:
        If there are no bullets on the screen:
            Calculate the position of the end of the barrel based on the angle and create a new bullet there

    On each frame update:
        Update the text of the "angle" UI to display the absolute value of the player's angle
        Update the text of the "power" UI to display the player's power

    Define a variable rotationSpeed and set it to the high speed of the bean

    When the "alt" key is pressed:
        Set the rotationSpeed to the low speed of the bean

    When the "alt" key is released:
        Set the rotationSpeed back to the high speed of the bean

    When the "left" key is pressed:
        If the angle of the bean is greater than -70:
            Rotate the bean to the left with the rotationSpeed
        Else:
            Set the angle of the bean to -70 to prevent further rotation

    When the "right" key is pressed:
        If the angle of the bean is less than 0:
            Rotate the bean to the right with the rotationSpeed
        Else:
            Set the angle of the bean to 0 to prevent further rotation

    Define a variable "smooth" and set it to 3

    When the "up" key is pressed:
        Increase the "smooth" variable by 1.2 times the delta time
        If the power of the bean is less than 100:
            Increase the power smoothly based on the "smooth" variable
        Else:
            Set the power of the bean to 100 (maximum power)

    When the "up" key is released:
        Reset the "smooth" variable to 3

    When the "down" key is pressed:
        Increase the "smooth" variable by 1.2 times the delta time
        If the power of the bean is greater than 1:
            Decrease the power smoothly based on the "smooth" variable
        Else:
            Set the power of the bean to 0 (minimum power)

    When the "down" key is released:
        Reset the "smooth" variable to 3

    When the "escape" key is pressed:
        Go back to the "main-menu" scene

Define a scene named "multiplayer-menu":
    Create a button labeled "Join Game" at position (250, 150) that does nothing when clicked
    Create a button labeled "Create Game" at position (250, 250) that does nothing when clicked
    Create a button labeled "Return" at position (250, 350) that goes back to the "main-menu" scene when clicked

Define a scene named "main-menu":
    Create a button labeled "Practice" at position (250, 250) that goes to the "practice" scene when clicked
    Create a button labeled "Multiplayer" at position (250, 350) that goes to the "multiplayer-menu" scene when clicked

Go to the "main-menu" scene

Development

Outcome

The outcome is working menus with buttons which each have a function (apart from unimplemented features).

import "../multiplayer.js"
import kaboom from "kaboom"
import "kaboom/global"

const WIDTH = 1920
const HEIGHT = 1080
const GRAVITY = 450

kaboom({
  width: WIDTH,
  height: HEIGHT,
})

/*
const recording = record()

onKeyDown(".", () => {
  recording.download()
})
*/

setGravity(GRAVITY)

loadBean()
loadPedit("barrel", "sprites/barrel.pedit")
loadPedit("bullet", "sprites/bullet.pedit")

function addBtn(txt, p, f) {
  // add a parent background object
  const btn = add([
    rect(240, 80, { radius: 8 }),
    pos(p),
    area(),
    scale(1),
    anchor("center"),
    outline(4),
  ])

  // add a child object that displays the text
  btn.add([
    text(txt),
    anchor("center"),
    color(0, 0, 0),
  ])

  // onHoverUpdate() comes from area() component
  // it runs every frame when the object is being hovered
  btn.onHoverUpdate(() => {
    btn.scale = vec2(1.2)
    setCursor("pointer")
  })

  // onHoverEnd() comes from area() component
  // it runs once when the object stopped being hovered
  btn.onHoverEnd(() => {
    btn.scale = vec2(1)
  })

  // onClick() comes from area() component
  // it runs once when the object is clicked
  btn.onClick(f)

  return btn

}

scene("practice", () => {

  onLoad(() => {
    add([
      pos(250, 250),
      text("Press \"esc\" to return to menu"),
      lifespan(2, { fade: 0.5 })
    ])
  })

  const bean = add([
    sprite("bean"),
    pos(80, Math.floor(1000 * Math.random())),
    rotate(0),
    anchor("center"),
    {
      SPEED_HIGH: 150,
      SPEED_LOW: 45,
      power: 0
    }
  ])

  const target = add([
    sprite("bean"),
    pos(1500, Math.floor(1000 * Math.random())),
    area()
  ])

  bean.add([
    sprite("barrel"),
    scale(3, 3),
    pos(0, -60)
  ])

  target.onCollide("bullet", () => {
    addKaboom(target.pos)
    destroy(target)
    destroyAll("bullet")
    go("practice")
  })

  const newBullet = (position, angle) => {
    add([
      sprite("bullet"),
      pos(position),
      scale(1, 1),
      offscreen({ destroy: true }),
      area(),
      anchor("center"),
      body(),
      rotate(angle),
      move(vec2(Math.cos(angle / 180 * Math.PI), Math.sin(angle / 180 * Math.PI)), (bean.power + 20) * 8.3),              //Calculating movement vector
      "bullet"
    ])
  }

  const angle = add([            //UI for displaying the angle of player
    text(Math.floor(bean.angle)),
    pos(24, 24)
  ])

  const power = add([          //UI to display power of the shot
    text(Math.floor(bean.power)),
    pos(100, 24)
  ])

  onKeyDown("space", () => {
    if (get("bullet").length == 0) {
      let endOfBarrel = vec2(bean.pos.x + 85 * Math.cos(-0.15 + bean.angle / 180 * Math.PI), bean.pos.y + 92 * Math.sin(-0.15 + bean.angle / 180 * Math.PI)) //Find the position of the end of the barrel to add bullets
      let bullet = newBullet(endOfBarrel, bean.angle)
    }
  })

  onUpdate(() => {
    angle.text = Math.abs(Math.floor(bean.angle))  //Update player angle UI
    power.text = Math.floor(bean.power)
  })

  let rotationSpeed = bean.SPEED_HIGH

  onKeyDown("alt", () => {
    rotationSpeed = bean.SPEED_LOW  //Slow rotation when holding alt
  })

  onKeyRelease("alt", () => {
    rotationSpeed = bean.SPEED_HIGH  //Normal when alt released
  })

  onKeyDown("left", () => {
    if (bean.angle > -70) {
      bean.angle += -rotationSpeed * dt() //Rotate left
    }
    else {
      bean.angle = -70  //Stop at 70 degrees anticlockwise
    }
  })

  onKeyDown("right", () => {
    if (bean.angle < 0) {
      bean.angle += rotationSpeed * dt() //Rotate right
    }
    else {
      bean.angle = 0  //Prevent tank rotating the wrong direction
    }
  })

  let smooth = 3;

  onKeyDown("up", () => {
    smooth += 1.2 * dt()
    if (bean.power < 100) {
      bean.power += 0.7 * smooth ** 2 * dt() //Increase power smoothly
    }
    else {
      bean.power = 100  //Maximum power 100
    }
  })

  onKeyRelease("up", () => {
    smooth = 3
  })

  onKeyDown("down", () => {
    smooth += 1.2 * dt()
    if (bean.power > 1) {
      bean.power -= 0.7 * smooth ** 2 * dt()  //Decrease power smoothly
    }
    else {
      bean.power = 0  //Minimum power 0
    }
  })

  onKeyRelease("down", () => {
    smooth = 3
  })

  onKeyDown("escape", () => {
    go("main-menu")
  })

})

scene("multiplayer-menu", () => {
  addBtn("Join Game", vec2(250, 150), () => { })
  addBtn("Create Game", vec2(250, 250), () => { })
  addBtn("Return", vec2(250, 350), () => { go("main-menu") })
})

scene("main-menu", () => {
  addBtn("Practice", vec2(250, 250), () => { go("practice") })
  addBtn("Multiplayer", vec2(250, 350), () => { go("multiplayer-menu") })
})

go("main-menu")

Challenges

The only challenges I encountered during this cycle were getting the scenes to transition without problems which was worked out quite quickly.

Testing

Tests

Test	Instructions	What I expect	What actually happens	Pass/Fail
1	Run code	Kaboom should run and take you to the main menu	Kaboom ran normally and took me to the main menu	Pass
2	Hover over one of the buttons with the cursor	Button should enlarge	Button enlarged	Pass
3	Click one of the buttons	Button should function as expected	Button functions as expected	Pass
4	Go to the practice range	Message should appear telling you how to exit back to the menu	Message appeared	Pass
5	Shoot at the target	After hitting the target, player position should change and a new target should appear	Target reappeared and player moved	Pass
6	Press "esc" while in practice	Player should be taken back to the main menu	Player returns to main menu	Pass

Evidence

854KB

kaboom.mp4

Open