p5.js test 2

by Yukino Song

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/addons/p5.sound.min.js"></script>
Press Mouse Left to fire
<br/>
Press WASD to move
<br/>
Press SPACE to fire SuperBomb
<br/>
Press R to restart

CSS

* {
  user-select: none;
}

body {
  margin: 0;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

JavaScript

const bullets = []
const enemies = []
const bombs = []
const brokens = []
let player = null
let superBomb = null

let centerX = 0
let centerY = 0
let radius = 0

const remove = (arr, item) => {
  const index = arr.indexOf(item)
  if (index > -1) arr.splice(index, 1)
}

const empty = (arr) => {
  arr.length = 0
}

class Bullet {
  constructor({x, y, atk, speed, size, angle}) {
    this.x = x
    this.y = y
    this.atk = atk
    this.size = size
    this.movX = speed * cos(angle)
    this.movY = speed * sin(angle)
  }
  
  move() {
    this.x += this.movX
    this.y += this.movY
    stroke(0, 255, 255)
    fill(0, 255, 255)
    ellipse(this.x, this.y, this.size)
    if (dist(this.x, this.y, centerX, centerY) > radius) remove(bullets, this)
    // Check if bumps into enemy
    const enemy = enemies.filter(i => dist(i.x, i.y, this.x, this.y) <= i.size / 6 + this.size / 2)[0]
    if (enemy) {
      enemy.size -= this.atk
      enemy.speed += this.atk / 50
      remove(bullets, this)
    }
  }
}

class Player {
  constructor({hp, atk, size, maxSpeed}) {
    this.x = width / 2
    this.y = height / 2
    this.hp = hp
    this.atk = atk
    this.size = size
    this.maxSpeed = maxSpeed
    this.speedY = 0
    this.speedX = 0
    this.angle = 0
  }
  
  draw() {
    stroke(255)
    fill(255)
    if (this.y >= 0 && this.y <= height) this.y += this.speedY
    if (this.x >= 0 && this.x <= width) this.x += this.speedX

    if (this.y > height) this.y = height
    if (this.y < 0) this.y = 0
    if (this.x > width) this.x = width
    if (this.x < 0) this.x = 0
    ellipse(this.x, this.y, this.size)
  }
  
  fire() {
    bullets.push(new Bullet({
      x: this.x,
      y: this.y,
      atk: this.atk,
      size: this.size / 3,
      speed: 10,
      angle: this.angle
    }))
  }
}

class Broken {
  constructor({x, y}) {
    this.x = x
    this.y = y
    this.size = 0
    this.opacity = 100
  }
  
  draw() {
    stroke(166, 226, 52, this.opacity)
    fill(166, 226, 52,...