2.2.2 Cycle 2 Rotation

Design

For this cycle I want to have the player able to rotate their character, which will serve as the base for the tank game for aiming. This will be controlled with the left and right arrows on the keyboard. Holding "alt" while controlling the character will slow the speed of the rotation so that players can aim more precisely. The angle of the players' characters will be displayed in the corner as an early template for the UI.

Objectives

Allow the player to rotate left and right with the arrow keys
Allow the player to rotate more precisely using the "alt" key
Display the rotation of the player in the corner of the screen

Usability features

Holding the "alt" key allows for more precise aiming

Key variables

Variable Name

Use

SPEED_HIGH

Constant storing the speed of rotation normally

SPEED_LOW

Constant storing the speed of rotation in precise mode

rotationSpeed

Variable which holds the current rotation speed

Pseudocode

ifKeyDown("alt") then 
    rotationSpeed = SPEED_LOW
else
    rotationSpeed = SPEED_HIGH

ifKeyDown("left-arrow") then
    rotate(-rotationSpeed)

ifKeyDown("right-arrow") then 
    rotate(rotationSpeed)

displayUI(rotation, "bottom-left")

Development

Outcome

The outcome of this cycle is a character which the player can rotate and change the speed of rotation as well as a UI displaying the current rotation of the player. The rotation of the player is limited between 0 and 70 degrees anticlockwise.

import kaboom from "kaboom"
import "kaboom/global"

const WIDTH = 1920
const HEIGHT = 1080

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

loadBean()

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

const angle = add([
  text(Math.floor(bean.angle)),
  pos(24,24)
])

onUpdate(() => {
  angle.text = Math.abs(Math.floor(bean.angle))
})

let rotationSpeed = bean.SPEED_HIGH

onKeyDown("alt", () => {
  rotationSpeed = bean.SPEED_LOW
})

onKeyRelease("alt", () => {
  rotationSpeed = bean.SPEED_HIGH
})

onKeyDown("left", () => {
  if (bean.angle > -70) {
   bean.angle += -rotationSpeed * dt()
  }
  else {
    bean.angle = -70
  }
})

onKeyDown("right", () => {
  if (bean.angle < 0){
   bean.angle += rotationSpeed * dt() 
  }
  else {
    bean.angle = 0
  }
})