Wizard projectile game

For the 9th Dev-Log, I decided to create a wizard magic shooter game where I wizard shoots magic energy as a projectile. The wizard sprite I used was created in public domain by an Author named Antum Delunge and it was also liscenced by Creative Commons Zero (CC0).  I at first had trouble figuring out how to add the sprite image of the wizard into p5js however, I eventually figured out how to cut and trim the sprite  image of the wizard that I wanted and imported it as well as displayed it on screen. Once I figured out how to import the image into P5js, the next move I tried to make was to get the sprite image to move using the key pressed functions. At first it was a little tricky to figure out however, as I read through my class notes and through demo codes that we went over in class I was able to figure out how to move the wizard back and forth on the screen. After I got the movement setup, I then tried to figure out how to add the duplicate versions of the wizard however, I got stuck trying to figure this process out so instead I decided to create a magic weapon called the water magic shot where the wizard will shoot water magic projectiles as you click the mouse constantly. This was such an awesome Dev-Log to make and it helped me better understand how to use the movement functions as well as how to create the water magic projectiles. Below is the code I used to create this mini project 

Wizard projectile game code:

''' let wizardImg;

let wizard;

let waterMagicShots = [];

let waterMagicShot;

function preload(){

  wizardImg = loadImage("mage-light.png");

}

function setup() {

  createCanvas(400, 400);

    wizard = new Wizard();

}

function draw() {

  background(50);

  wizard.move();

  wizard.display();

  

  for(let waterMagicShot of waterMagicShots){

    fill('Blue');

    waterMagicShot.y -= 10;

    waterMagicShot.x += 10;

   

    square(waterMagicShot.x,waterMagicShot.y,20);

    

  }

  

}

function mousePressed(){

  let waterMagicShot ={

   x: mouseX,

   y: height - 20

  }

  if(mousePressed == mouseX){

    console.log("Clicking")

  }

  waterMagicShots.push(waterMagicShot); 

  

}

class Wizard{

  constructor(){

    this.x = random(width/2);

    this.y = random(height/2);

    this.timer = 500;

    this.running = true;

    this.rotation = 360;

  

  }

  display(){

    image(wizardImg,this.x,this.y);

    rotate(radians(this.rotation));

    

  }

  

  move(){

    if(keyIsPressed){

      if(key == 'w'){

        this.running = true;

        this.y--;

}

      if(keyIsPressed){

        if(key == 's' ){

          this.running = true;

          this.y++;

        }

        

        if(keyIsPressed){

          if(key == 'a'){

            this.running = true;

            this.x--;

            

}

          if(keyIsPressed){

            if(key == 'd'){

              this.running = true;

            this.x++;

            }

            

          }

}

}

      

    }

    

  }

  

  

}

'''