let gridHeight = 50;

​

let grid = [];

let blockSize = 10;

​

let canvasWidth;

let canvasHeight;

​

let useGravity = false; // adds gravity! i suppose

​

function setup() 

{

  canvasWidth = gridWidth * blockSize;

  canvasHeight = gridHeight * blockSize;

  createCanvas(canvasWidth, canvasHeight);

}

​

function draw() 

{

  background(220);

  if (mouseIsPressed)

  {    

    let ax = floor(map(mouseX, 0, canvasWidth, 0, gridWidth));

    let ay = floor(map(mouseY, 0, canvasHeight, 0, gridHeight));

    grid.push(new Block(ax, ay, "grass"));

  }

  for (let i = 0; i < grid.length; i ++)

  {

    if (grid[i].x < 0 || grid[i].x > gridWidth || grid[i].y < 0 || grid[i].y > gridHeight)

    {

      grid.splice(i, 1);

    }

    else

    {

      grid[i].display();

      if (useGravity && grid[i].y < gridHeight - 1)

      {

        grid[i].y += 1;

      }

    }

  }

  let bx = floor(map(mouseX, 0, canvasWidth, 0, gridWidth));

  let by = floor(map(mouseY, 0, canvasHeight, 0, gridHeight));

  fill("white");

  square(bx * blockSize, by * blockSize, blockSize);

}

​

class Block 

{

  constructor(inputX, inputY, inputType) 

  {

    this.x = inputX; 

    this.y = inputY;

    this.type = inputType;

    this.blockColor = "white";

    if (this.type == "stone")

    {

      this.blockColor = "grey";

    }

    if (this.type == "grass")

    {

      this.blockColor = "green"; 

    }

  }

​

  display() 

  {

    fill(this.blockColor);

    square(this.x * blockSize, this.y * blockSize, blockSize);

    fill("white");

  }

}