JSFiddle - React, Tailwind, and code Playground

by Nippels

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>

  <body>

    <script src="main.js"></script>


  </body>

</html>

CSS

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

JavaScript

// object storing arrays

let zom = [];
let hb = 25;

// player info and ui
;
let hits = 0;
let missed = 0;


function setup() {
  let cnv = createCanvas(600, 300, P2D);



  let pos = createVector((width / 2), (height / 2));
  // zombie spawnpoints
  let zp0 = createVector(height / 4 + 35, height / 3);
  let zp1 = createVector(width - 35, height / 2);


  zom.push(new Zombie(zp0));
  zom.push(new Zombie(zp1));


}

function draw() {
  background(220);
  fill(0);
  text("hits: " + hits, 10, 10);
  text("missed: " + missed, 10, 20);


  for (let i = 0; i < zom.length; i++) {
    zom[i].move();
    zom[i].show();
  }

}

function Zombie(pos) {

  this.pos = pos;

  Zombie.prototype.move = function() {
    this.pos.x += 0.2;
    if (this.pos.x > width + hb) {
      this.pos.x = -hb

    }
  }
  Zombie.prototype.show = function() {

    circle(this.pos.x, this.pos.y, hb);

  }

}

function mouseClicked() {


  hitBox()
}

function hitBox() {
  const mx = mouseX;
  const my = mouseY;
  for (let i = 0; i < zom.length; i++) {

    if (mx > zom[i].pos.x - hb &&
      mx < zom[i].pos.x + hb &&
      my > zom[i].pos.y - hb &&
      my < zom[i].pos.y + hb) {

      hits += 1;
      return

    }

  }
  missed += 1;
}