Assignment 3 – Laser Skull

Inspiration:

I was inspired by a game that I used to play a few years ago: Quadropus Rampage. In the game, the final boss, which I unfortunately still could not defeat, is a head that can shoot laser to attack. Here is an illustration:

Therefore, I wanted to make something similar and I went for the skull. Similar to the first assignment of making a portrait, I made the skull using simple shapes available in p5.js. Then, I transformed the code into the class Skull so that I can easily manipulate the size of the skull as well as its position.

Next, I added the laser shooting from the skull eyes. I created a laser function in the Skull class and draw a line from the skull’s eyes position to the mouse position. The skull will only shoot laser if the mouse is pressed. Below is the code for the Skull class:

class Skull {
  constructor(posX, posY, scaleObj) {
    this.posX = posX;
    this.posY = posY;
    this.scaleObj = scaleObj;
    this.dirX = 2;
    this.dirY = -1;
  }
  
  //skull drawing
  show() {
    
    //head
    drawingContext.shadowBlur = 0;
    strokeWeight(0);
    fill("cyan");
    ellipse(
      this.posX * this.scaleObj,
      this.posY * this.scaleObj,
      100 * this.scaleObj,
      60 * this.scaleObj
    );
    rectMode(CENTER);
    rect(
      this.posX * this.scaleObj,
      (this.posY + 30) * this.scaleObj,
      70 * this.scaleObj,
      25 * this.scaleObj
    );

    //skull eyes
    fill("black");
    circle(
      (this.posX - 20) * this.scaleObj,
      this.posY * this.scaleObj,
      15 * this.scaleObj
    );
    circle(
      (this.posX + 20) * this.scaleObj,
      this.posY * this.scaleObj,
      15 * this.scaleObj
    );
    
    //skull mouth
    fill("black");
    rect(
      this.posX * this.scaleObj,
      (this.posY + 33.5) * this.scaleObj,
      3.5 * this.scaleObj,
      18 * this.scaleObj
    );
    rect(
      (this.posX - 15) * this.scaleObj,
      (this.posY + 33.5) * this.scaleObj,
      3.5 * this.scaleObj,
      18 * this.scaleObj
    );
    rect(
      (this.posX + 15) * this.scaleObj,
      (this.posY + 33.5) * this.scaleObj,
      3.5 * this.scaleObj,
      18 * this.scaleObj
    );
  }
  
  //laser starts from the eyes
  laser(x, y) {
    stroke("white");
    strokeWeight(4);
    drawingContext.shadowBlur = 10;
    drawingContext.shadowColor = color("red");
    line((this.posX - 20) * this.scaleObj, this.posY * this.scaleObj, x, y);
    line((this.posX + 20) * this.scaleObj, this.posY * this.scaleObj, x, y);
  }
  
  //constant movement
  update() {
    if (this.posX * this.scaleObj > width || this.posX < 0) {
      this.dirX *= -1;
    }
    if (this.posY * this.scaleObj > height || this.posY < 0) {
      this.dirY *= -1;
    }

    this.posX += this.dirX;
    this.posY += this.dirY;
  }
}

Furthermore, I reused the Ball class in the previous class to make this as an interactive experience. Every time the skull successfully shoot down 1 ball, a new ball will appear and the background color will randomly change.

Also, since I wanted to add the scale much later on, I have to add it for every function I used which is quite time consuming. Therefore, I think for every class I will add a scale component just in case I want to change any dimension.

Reflection:

I want to add much more interactivity such as users can control the skull by mouse. Furthermore, I want to add obstacles and enemies to the game so that it can be more similar to the game that I played.

Below is the canvas: