UnBlock Me - OpenProcessing

mySketch
xxxxxxxxxx
 
let unit;
let matrix;
let offset;
let n;
let b = [];
let padding;
let radius;
​
let bgColor = '#fafafa';
let blockStroke = '#612570';
let blockFill = '#1eafed';
let playerFill = '#ea168e';
let playerStroke = '#612570';
let state = 0;
let blockIsPressed = false;
​
function setup() {
  createCanvas(500, 500);
  textAlign(CENTER,CENTER);
  textSize(width/25);
​
  n = 6;
  offset = 30;
  unit = (width - 2 * offset) / n;
  padding = unit/10;
  radius = 2;
  
  matrix = [];
  for (let i = 0; i < n; i++) {
    matrix[i] = [];
    for (let j = 0; j < n; j++) {
      matrix[i][j] = false;
    }
  }
  matrix[6] = [];
  matrix[6][2] = false;
  
  b.push(new Block(0, 2, 2, true));
  b[0].fill = '#f33329';
  b[0].stroke = '#a10705';
  b[0].isRed = true;
  b.push(new Block(0, 4, 2, false));
  b.push(new Block(1, 0, 2, false));
  b.push(new Block(1, 5, 3, true));
  b.push(new Block(2, 0, 2, true));
  b.push(new Block(2, 1, 2, true));
  b.push(new Block(2, 2, 3, false));
  b.push(new Block(3, 2, 2, false));
  b.push(new Block(3, 4, 2, true));
  b.push(new Block(4, 3, 2, true));
  b.push(new Block(5, 1, 2, false));
  b.push(new Block(5, 4, 2, false));
}
​
function draw() {
  fill(bgColor);
  stroke(100);
  strokeWeight(2);
  rect(offset,offset,width-2*offset+padding/2, height-2*offset+padding/2, 2*radius
      );
  
  noStroke();
  rect(offset + unit*5.5, offset + unit*2, unit, unit);
  
  if(state===0){
  b.forEach(block => {
    block.display();
    block.update();
  });
  }
  else if(state===1){
    fill(0);
    text("You win",width/2,height/2);
  }
  if(!mouseIsPressed){
    blockIsPressed = false;
  }
  
}
​
class Block {
​
  constructor(x, y, l, h) {
    this.x = x;
    this.y = y;
    this.l = l;
​
    this.isH = h;
    if (h) {
      this.w = l;
      this.h = 1;
    } else {
      this.h = l;
      this.w = 1;
    }
    
    if(l==2){
      if(h){
        this.fill = '#3689e6';
      }
      else{
        this.fill = '#a56de2';
      }
    }
    else if(l==3){
      if(h){
        this.fill = '#68b723';
      
      }
      else{
        this.fill = '#f9c440';
      }
    }
    
    this.stroke = '#3d211b'
  
    
    for (let i = 0; i < l; i++) {
      if (h) {
        matrix[x + i][y] = true;
      } else {
        matrix[x][y + i] = true;
      }
    }
  }
​
  display() {
    strokeWeight(1);
    
    stroke(this.stroke);
    fill(this.fill);
    rect(offset + padding/2 + this.x * unit, offset + padding/2 + this.y * unit, this.w * unit - padding/2 , this.h * unit - padding/2, radius);
    if(this.isRed){
      fill(255);
      noStroke();
      text("Unblock Me",this.x*unit + 1.5*unit , this.y*unit + unit); 
    }
​
  }
​
  update() {
    this.isSelected = this.isPressed();
    if (this.isSelected) {
      if (mouseButton === LEFT) {
        if(this.isH){
          if(abs(mouseX-this.mx) > unit){
            this.move((mouseX-this.mx)/abs(mouseX-this.mx));
          }
        }
        else{
          if(abs(mouseY-this.my) > unit){
            this.move((mouseY-this.my)/abs(mouseY-this.my));
          }
        }
      }
    }
  }
​
  move(direction) {
    if (this.isH) {
      let move = direction > 0 ? this.x + this.w : this.x - 1;
      
      if (matrix[move] && matrix[move][this.y] === false) {      
        
        if(direction > 0) {
          matrix[this.x][this.y] = false;
        } 
        else{
          matrix[this.x + this.w - 1][this.y] = false;
        }
        
        matrix[move][this.y] = true;
        this.x += direction;
        this.mx = mouseX;
        this.my = mouseY;
      }
    }
    else{
      let move = direction > 0 ? this.y + this.h : this.y - 1;
      
      if (matrix[this.x][move] === false) {      
        
        if(direction > 0) {
          matrix[this.x][this.y] = false;
        } 
        else{
          matrix[this.x][this.y + this.h - 1] = false;
        }
        
        matrix[this.x][move] = true;
        this.y += direction;
        this.mx = mouseX;
        this.my = mouseY;
      }
    }
    if(this.isRed){
      if(this.x + this.w > 6){
        console.log('Win');
        state++;
      }
    } 
  }
​
  isPressed() {
    if (mouseIsPressed && this.isSelected) {
      return true;
    }
    if (mouseIsPressed && !blockIsPressed) {
      if (mouseX > offset + unit * this.x && mouseX < offset + unit * this.x + this.w * unit) {
        if (mouseY > offset + unit * this.y && mouseY < offset + unit * this.y + this.h * unit) {
          blockIsPressed = true;
          this.mx = mouseX;
          this.my = mouseY;
          return true;
        }
      }
    }
    
    delete this.mx;
    delete this.my;
    return false;
  }
}