2.2.3 Cycle 3 Adding Power

Design

In this cycle, I want to implement a power meter which displays the power of the shot. The up and down arrows will be used to increase and decrease the power accordingly.

Objectives

• Add power meter UI element

• Allow player to increase and decrease the power level with the arrow keys

Usability features

Power increases/decreases exponentially

Key variables

Variable Name	Use
power	Stores the value for the power of the shot
smooth	A middle variable to help the power increase smoothly

Pseudocode

ifKeyDown("up") then
    smoothIncrease(power)
    
ifKeyDown("down") then
    smoothDecrease(power)
    
addUI(power)

Development

Outcome

The outcome of this cycle is a power meter displayed on the screen which can be adjusted by holding the up and down arrow keys.

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

const WIDTH = 1920
const HEIGHT = 1080

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

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

const bean = add([
	sprite("bean"),
	pos(80, 300),
  rotate(0),
  anchor("center"),
  {
    SPEED_HIGH: 150,
    SPEED_LOW: 45,
    power: 0
  }
])

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

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)
])

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
})

Challenges

One of the challenges I encountered was making the power increase and decrease smoothly, as I had to use trial and error to find values to make it feel right.

Testing

Tests

Test	Instructions	What I expect	What actually happens	Pass/Fail
1	Run code	Kaboom should run	Kaboom ran normally	Pass
2	Tap up and down arrows	Power should increase/decrease slowly	Power increased and decreased slowly	Pass
3	Hold up and down arrows for a longer time	Power should gradually increase/decrease at an increasing rate	Power level increases and decreases as expected	Pass
4	Adjust power	UI should display the power and should be clamped between 0 and 100	UI works and power is locked between 0 and 100	Pass

Evidence

2MB

kaboom.mp4

Open

The power level being adjusted in kaboom