let char1;

let char1W = 80;

let char1H = 120;

let char2;

let char2W = 80;

let char2H = 120;

let poke1;

let poke1W = 130;

let poke1H = 30;

let alpha = 255;

​

function setup() {

  createCanvas(600, 400);

  rectMode(CENTER);

  let color1 = color(74, 67, 124);

  char1 = new Character(0, 0, 1, color1);

​

  let color2 = color(211, 168, 82);

  char2 = new Character(200, 0, 4, color2);

​

  let color3 = color(255, 100, 100);

  poke1 = new Sword(240, 240, 2, color3);

}

​

function draw() {

  background(220);

  //grid starts

  for (var x = 0; x < width; x += width / 30) {

    for (var y = 0; y < height; y += height / 10) {

      stroke(0);

      strokeWeight(1);

      line(x, 0, x, height);

      line(0, y, width, y);

    }

    text(x, 10, x);

  }

  for (var a = 0; a < width; a += width / 15) {

    text(a, a, 10);

  }

  //grid ends

  char1.display(char1W, char1H);

  char1.move();

​

  char2.display(char2W, char2H);

  //char2.move();

​

  poke1.display(poke1W, poke1H);

  poke1.move(char1.x, char1.y);

  var hit = rectRect(

    char2.x + 200,

    char2.y + 200,

    char2W,

    char2H,

    poke1.x,

    poke1.y,

    poke1W,

    poke1H

  );

  if (hit) {

   // console.log("hit",alpha);   

    char2.Color = color(255, 150, 0);

    char2.Color.setAlpha(alpha);

    alpha -= 0.5;

    if(alpha == 0){

      //char2.die();

    }

  } else {

    //console.log("nohit");

    char2.Color.setAlpha(255);

  }

}

​

function rectRect(r1x, r1y, r1w, r1h, r2x, r2y, r2w, r2h) {

  // are the sides of one rectangle touching the other?

​

  if (

    r1x + r1w / 2 >= r2x - r2w / 2 && // r1 right edge past r2 left

    r1x - r1w / 2 <= r2x + r2w / 2 && // r1 left edge past r2 right

    r1y + r1h / 2 >= r2y - r2h / 2 && // r1 top edge past r2 bottom

    r1y - r1h / 2 <= r2y + r2h / 2

  ) {

    // r1 bottom edge past r2 top

    return true;

  }

  return false;

}

​

class Sword {

  constructor(x, y, speed, Color) {

    this.x = x;

    this.y = y;

    this.speed = speed;

    this.Color = Color;

  }

​

  move(charX, charY) {

    if (this.x > width / 2) {

      this.x = charX + 300;

      this.x -= 15;

    }

    if (this.y > 340) {

      this.y -= 5;

    }

    if (this.y < 160) {

      this.y += 5;

    }

    if (keyIsDown(LEFT_ARROW)) {

      this.x = charX + 300;

      this.x -= 15;

    }

​

    if (keyIsDown(RIGHT_ARROW)) {

      this.x = charX + 300;

      this.x += 15;

    }

    if (keyIsDown(UP_ARROW)) {

      this.y -= 5;

    }

​

    if (keyIsDown(DOWN_ARROW)) {

      this.y += 5;

    }

  }

​

  display(swordW, swordH) {

    fill(this.Color);

    rect(this.x, this.y, swordW, swordH);

  }

}

​

class Character {

  constructor(x, y, speed, Color) {

    this.x = x;

    this.y = y;

    this.speed = speed;

    this.Color = Color;

  }

​

  move() {

    if (this.x > width / 5) {

      this.x -= 15;

    }

    if (this.y < 60 && this.y > 45) {

      this.y -= 5;

    }

    if (keyIsDown(LEFT_ARROW)) {

      this.x -= 15;

    }

​

    if (keyIsDown(RIGHT_ARROW)) {

      this.x += 15;

    }

    if (keyIsDown(UP_ARROW)) {

      this.y -= 5;

    }

    if (keyIsDown(DOWN_ARROW)) {

      this.y += 5;

    }

  }

​

  display(charW, charH) {

    fill(this.Color);

    //torso

    rect(200 + this.x, 250 + this.y, charW, charH);

    //legs

    rect(170 + this.x, 300 + this.y, 40, 40);

    rect(230 + this.x, 300 + this.y, 40, 40);

    //hands

    rect(240 + this.x, 220 + this.y, 60, 20);

    //head

    ellipse(200 + this.x, 160 + this.y, 60, 60);

  }

}

​

//   //grid starts

//     for (var x = 0; x < width; x += width / 30) {

//      for (var y = 0; y < height; y += height / 10) {

//          stroke(0);

//          strokeWeight(1);

//          line(x, 0, x, height);

//          line(0, y, width, y);

​

//      }

//        text(x,10,x);

//  }

//   for (var a = 0; a < width; a += width / 15) {

//           text(a,a,10);

//   }

//   //grid ends

​