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

The default bean at a rotation of 45 degrees in kaboom

Challenges

One challenge is learning the kaboom.js library but once that was figured out, implementing the rotation to my game was straightforward.

Testing

Tests

Test	Instructions	What I expect	What actually happens	Pass/Fail
1	Run code	Kaboom should run	Kaboom ran normally	Pass
2	Press left and right arrows	Character should rotate left and right	Character rotated left and right	Pass
3	Hold alt while pressing left and right arrows	Character should rotate left and right slowly	Character rotated left and right slowly	Pass
4	Rotate character	UI should display the angle and character should be clamped between 0 and 70 degrees	UI works and angle is locked between 0 and 70 degrees	Pass

Evidence