p5.js Web Editor

xxxxxxxxxx
class Grid {
  constructor(rows, cols, width, height) {
    this.rows = rows;
    this.cols = cols;
    this.cell_w = width / cols;
    this.cell_h = height / rows;
    this.cells = [];
    for (var i = 0; i < rows; ++i) {
      this.cells[i] = [];
      for (var j = 0; j < cols; ++j) {
        this.cells[i][j] = 0;
      }
    }
  }
​
  setcolor(color) {
    stroke(color);
  }
​
  setFilled(row, col) {
    //print("Filled row, col: " + row + ", " + col);
    this.cells[row][col] = 1;
  }
​
  isFilled(row, col) {
    if (row < 0 || col < 0) return false;
    //print("isFilled: " + row + ", " + col + " - " + this.cells[row][col]);
    return this.cells[row][col] == 0 ? false : true;
  }
​
  removeRow(r) {
    print("remove row: " + r);
​
    var j = 0;
    var i = 0;
    for (; j < this.cols; ++j) {
      this.cells[r][j] = 0;
      fill(255, 255, 255);
      rect(j * this.cell_w, r * this.cell_h, this.cell_w, this.cell_h);
    }
    
    for (i = r-1; i >= 0; --i) {
      for (j = 0; j < this.cols; ++j) {
        if (this.cells[i][j] == 1) {
          this.cells[i][j] = 0;
          this.cells[i+1][j] = 1;
        }
      }
    }  
  }
​
  draw() {
    //horizontal lines
    var i = 1;
    var total_w = this.cell_w * this.cols;
    for (i = 1; i < this.rows; ++i) {
      line(0, i * this.cell_h, total_w, i * this.cell_h);
    }
    var total_h = this.cell_h * this.rows;
    for (i = 1; i < this.cols; ++i) {
      line(i * this.cell_w, 0, i * this.cell_w, total_h);
    }
​
    for (i = 0; i < this.rows; ++i) {
      for (var j = 0; j < this.cols; ++j) {
        if (this.cells[i][j] == 1) {
          fill(0, 0, 0);
          //print("row: " + i + " col: " + j);
          rect((j) * this.cell_w, (i) * this.cell_h, this.cell_w, this.cell_h);
        }
      }
    }
  }
}
​
class Block {
  constructor(type, cellwidth, cellheight) {
    this.type = type;
    this.cell_width = cellwidth;
    this.cell_height = cellheight;
    this.verts = [];
    this.color = {
      r: 255,
      g: 255,
      b: 0
    };
​
    switch (type) {
      case "shape-1":
        this.verts[0] = [-2, -1];
        this.verts[1] = [-1, -1];
        this.verts[2] = [0, -1];
        this.verts[3] = [1, -1];
        this.cx = 0;
        this.cy = 0;
        //this.color = Color(0, 255, 255);
        this.color = {
          r: 0,
          g: 255,
          b: 255
        };
        break;
      case "shape-2": // T
        this.verts[0] = [-1, 0];
        this.verts[1] = [0, 0];
        this.verts[2] = [1, 0];
        this.verts[3] = [0, 1];
        this.cx = 0.5;
        this.cy = 0.5;
        this.color = {
          r: 255,
          g: 165,
          b: 0
        };
        break;
      case "shape-3": // O
        this.verts[0] = [-1, -1];
        this.verts[1] = [0, -1];
        this.verts[2] = [-1, 0];
        this.verts[3] = [0, 0];
        this.cx = 0;
        this.cy = 0;
        this.color = {
          r: 255,
          g: 255,
          b: 0
        };
        break;
      case "shape-4": // L
        this.verts[0] = [-1, -1];
        this.verts[1] = [-1, 0];
        this.verts[2] = [-1, 1];
        this.verts[3] = [0, 1];
        this.cx = 0.5;
        this.cy = 0.5;
        this.color = {
          r: 255,
          g: 255,
          b: 0
        };
        break;
      case "shape-5": // J
        this.verts[0] = [0, -1];
        this.verts[1] = [0, 0];
        this.verts[2] = [-1, 1];
        this.verts[3] = [0, 1];
        this.cx = 0.5;
        this.cy = 0.5;
        this.color = {
          r: 255,
          g: 0,
          b: 0
        };
        break;
      case "shape-6": // S
        this.verts[0] = [1, 0];
        this.verts[1] = [0, 0];
        this.verts[2] = [-1, 1];
        this.verts[3] = [0, 1];
        this.cx = 0.5;
        this.cy = 0.5;
        this.color = {
          r: 0,
          g: 255,
          b: 0
        };
        break;
      case "shape-7": // Z
        this.verts[0] = [-1, 0];
        this.verts[1] = [0, 0];
        this.verts[2] = [1, 1];
        this.verts[3] = [0, 1];
        this.cx = 0.5;
        this.cy = 0.5;
        this.color = {
          r: 255,
          g: 0,
          b: 0
        };
        break;
    }
  }
​
  rotate(clockwise) {
    var temp, i, offx, offy;
    offx = this.cx - 0.5;
    offy = this.cy - 0.5;
    //print("offx " + offx + " offy " + offy);
    if (clockwise) {
      for (i = 0; i < this.verts.length; ++i) {
        this.verts[i][0] -= offx;
        this.verts[i][1] -= offy;
        temp = this.verts[i][1];
        this.verts[i][1] = -this.verts[i][0];
        this.verts[i][0] = temp;
        this.verts[i][0] += offx;
        this.verts[i][1] += offy;
      }
    } else {
      for (i = 0; i < this.verts.length; ++i) {
        this.verts[i][0] -= offx;
        this.verts[i][1] -= offy;
        temp = this.verts[i][1];
        this.verts[i][1] = this.verts[i][0];
        this.verts[i][0] = -temp;
        this.verts[i][0] += offx;
        this.verts[i][1] += offy;
      }
    }
  }
​
  drawVert(vert) {
    fill(this.color.r, this.color.g, this.color.b);
    rect(
      vert[0] * this.cell_width,
      vert[1] * this.cell_height,
      this.cell_width,
      this.cell_height
    );
  }
​
  draw() {
    for (var i = 0; i < this.verts.length; ++i) {
      this.drawVert(this.verts[i]);
    }
  }
​
  fall(val) {
    var move_down = true;
    if (millis() > timer) {
      timer += RATE_SECONDS;
      move_down = this.move("down");
    }
    return move_down;
  }
​
  move(dir) {
    var i = 0;
    var moved = true;
    switch (dir) {
      case "down":
        for (i = 0; i < this.verts.length; ++i) {
          if ((this.verts[i][1] >= MAX_ROWS - 1) ||
            gTetrisApp.grid.isFilled(this.verts[i][1] + 1, this.verts[i][0])) {
            moved = false;
          }
        }
        if (moved) {
          for (i = 0; i < this.verts.length; ++i) {
            this.verts[i][1] += 1;
          }
          this.cy += 1;
        }
        break;
      case "left":
        for (i = 0; i < this.verts.length; ++i) {
          if ((this.verts[i][0] <= 0) ||
            gTetrisApp.grid.isFilled(this.verts[i][1], this.verts[i][0] - 1)) {
            moved = false;
          }
        }
        if (moved) {
          for (i = 0; i < this.verts.length; ++i) {
            this.verts[i][0] -= 1;
          }
          this.cx -= 1;
        }
        break;
      case "right":
        for (i = 0; i < this.verts.length; ++i) {
          if ((this.verts[i][0] >= MAX_COLS - 1)) {
            moved = false;
          }
        }
        if (moved) {
          for (i = 0; i < this.verts.length; ++i) {
            this.verts[i][0] += 1;
          }
          this.cx += 1;
        }
        break;
    }
    var offx = this.cx;
    var offy = this.cy;
    return moved;
  }
}
​
class TetrisApp {
  constructor(cols, rows, width, height) {
    this.grid = new Grid(rows, cols, width, height);
    //this.blocks = [];
    this.spawn();
  }
​
  init() {
    this.grid.setcolor(color(200, 200, 200));
  }
​
  spawn() {
    var ran = 1 + (int)(Math.random() * 7);
    //var ran = 1 + (int)(Math.random() * 2);
    var shape = "shape-" + ran;
    print("spawning " + shape);
    var block = new Block(shape, this.grid.cell_w, this.grid.cell_h);
    block.move("right");
    block.move("right");
    block.move("right");
    block.move("right");
    block.move("right");
    this.block = block;
  }
​
  removeRow(r) {
    this.grid.removeRow(r);
  }
​
  update() {
    var i = 0;
    var block = this.block;//this.blocks[this.blocks.length - 1];
    var falling = block.fall(0.01);
    if (!falling) {
      for (i = 0; i < block.verts.length; ++i) {
        this.grid.setFilled(block.verts[i][1], block.verts[i][0]);
      }
      this.spawn();
    }
​
    // check if any of the rows are all filled.
    i = this.grid.rows - 1;
    while(i >= 0){
      var filled = true;
      var j = 0;
      for (; j < this.grid.cols; ++j) {
        if (!this.grid.isFilled(i, j)) {
          filled = false;
          break;
        }
      }
      if (filled) {
        this.removeRow(i);
      }
      --i;
    }
  }
​
  draw() {
    this.block.draw();
    this.grid.draw();
  }
​
  move(dir) {
    this.block.move(dir);
  }
​
  rotate(clockwise) {
    this.block.rotate(clockwise);
  }
​
  frame() {
    this.update();
    this.draw();
  }
}
​
let MAX_ROWS;
let MAX_COLS;
let gTetrisApp;
let current_time;
let timer;
let RATE_SECONDS;
​
function keyPressed() {
  if (keyCode === UP_ARROW) {
    gTetrisApp.move("up");
  }
  if (keyCode === DOWN_ARROW) {
    gTetrisApp.move("down");
  }
  if (keyCode === LEFT_ARROW) {
    gTetrisApp.move("left");
  }
  if (keyCode === RIGHT_ARROW) {
    gTetrisApp.move("right");
  }
  if (keyCode === 33) {
    gTetrisApp.rotate(false);
  }
  if (keyCode === 34) {
    gTetrisApp.rotate(true);
  }
}
​
function setup() {
  createCanvas(300, 600);
  RATE_SECONDS = 1000;
  timer = RATE_SECONDS;
  current_time = 0;
  MAX_ROWS = 20;
  MAX_COLS = 10;
  gTetrisApp = new TetrisApp(MAX_COLS, MAX_ROWS, 300, 600);
  gTetrisApp.init();
}
​
function draw() {
  background(220);
  gTetrisApp.frame();
}
Cookies

Sketch Files

Console

Preview
