2.2.4 Cycle 4 Firing Bullets

Design

In this cycle, I will add the ability to fire bullets from the player's barrel which will fly off and fall down with gravity also

Objectives

• Allow the player to fire bullets using the spacebar

• Have the bullets come from the barrel and go in the right direction

• Bullets will be affected by gravity and be destroyed when offscreen

Usability features

Limit the number of bullets on screen to 1 to reduce confusion

Key variables

Variable Name	Use
GRAVITY	Constant value for gravity affecting the bullets
newBullet()	Function which returns a bullet game object

Pseudocode

Import the "multiplayer.js" module
Import the "kaboom" module
Import the "kaboom/global" module

Set WIDTH to 1920
Set HEIGHT to 1080
Set GRAVITY to 450

Initialize kaboom with the specified width and height

Set the gravity of the game environment to GRAVITY

Load the "bullet" sprite and assign it the name "bullet"

Define a function named "newBullet" that takes a position and an angle as arguments:
  Create a new bullet object with the following properties:
    - sprite: "bullet"
    - position: the given position
    - scale: (1, 1)
    - offscreen behavior: destroy when offscreen
    - area()
    - anchor: "center"
    - body()
    - rotation: the given angle
    - move in the direction of the angle with a speed calculated based on (bean.power + 20) * 8.3
    - tag: "bullet"

When the space key is pressed:
  If there are no bullets currently in the game:
    Calculate the position of the end of the barrel
    Create a new bullet at the calculated position with the bean's angle

Development

Outcome

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

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

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

setGravity(GRAVITY)

loadBean()
loadPedit("barrel", "sprites/barrel.pedit")
loadPedit("bullet", "sprites/bullet.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 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
})

Challenges

The first challenge I encountered while making this cycle was stopping too many bullets from being on screen at once. The code would constantly add bullets for every frame of the program when the spacebar was held. To mitigate this, I added the line:

if (get("bullet").length == 0)

before the code which spawns in another bullet. This means that only one bullet can be on screen at once.

The next challenge I encountered was calculating the movement vectors and positions for the bullets, which I needed trigonometry to assist me, leading to another problem where bullets went the wrong directions, leading me to realise that the cosine and sine functions in js take arguments in radians whereas I was using degrees. To fix this I converted the angle from degrees to radians. After that I used trial and error for values of the position to add bullets in where it looks good.

Testing

Tests

Test	Instructions	What I expect	What actually happens	Pass/Fail
1	Run code	Kaboom should run	Kaboom ran normally	Pass
2	Press space	Bullet should come out of the barrel at a low velocity	Bullet came out at a low velocity	Pass
3	Press space after increasing power	Bullet should come from the barrel at a higher velocity	Bullet comes out of barrel at higher velocity	Pass
4	Press space with the barrel at an angle	Bullet should come out of barrel moving at the same direction as the angle of the barrel	Bullet was fired from barrel moving in the right direction	Pass
5	Monitor bullets after they come from the barrel	Bullets should fall and accelerate under gravity	Bullets fell under gravity	Pass
6	Press space while a bullet is on screen	Only one bullet should be allowed to be on screen	No bullet was spawned when there was already a bullet on-screen	Pass

Evidence

3MB

kaboom (1).mp4

Open

The power level being adjusted in kaboom