script.js

const cvs = document.getElementById("game");
const ctx = cvs.getContext("2d");

const height = cvs.height;
const width = cvs.width;

const row = 20;
const col = 10;
const sq = height / (24 + 1/3);
const vacant = "white";

let rowCount = 0;
let level = 0;
let score = 0;

let paddingHalf = .5 * sq;
let paddingThird = 1/3 * sq;
let padding175 = 1.75 * sq;
let boardHeight = 20 * sq;
let boardWidth = 10 * sq;
let uiHeight = 3 * sq - 1/3 * sq;
let uiWidth2 = 2 * sq;
let uiWidth3 = 3 * sq;


let displays = [];

const centerX = width / 2 - col * sq / 2;
const centerY = height / 2 - row * sq / 2;




//draw a square
function drawSquare(x, y, color, factor = 1) {

  ctx.fillStyle = color;
  ctx.fillRect(x, y, factor * sq, factor * sq);

  ctx.strokeStyle = "BLACK";
  ctx.lineWidth = 2;
  ctx.strokeRect(x, y, factor * sq, factor * sq)
  
  // checks to see if square is above the board
  // only draws if below top of board
 
  //if(newY >= height/2 - sq * row /2){
    
  };

//create game board
let board = [];
for(r=0; r < row; r++){
  board[r] = [];
  for(c=0; c < col; c++){
    board[r][c] = vacant;
  }
}

//draw game board
function drawBoard(){
  for(r = 0; r < row; r++){
    for(c = 0; c < col; c++){
      let newX = c * sq + padding175;
      let newY = r * sq + paddingHalf + uiHeight + paddingThird;
      drawSquare(newX, newY, board[r][c]);
    };
  };
};

drawBoard();

// create a new display

function display( text = "", coordX, width){
  this.text = text
  this.x = coordX;
  this.y = paddingHalf;
  this.width = width;
  this.height = uiHeight;
  this.color = "rgba(0, 0, 0, 0.25)";
  this.centerX = this.x + this.width / 2;
  this.centerY = this.y + this.height / 2;
};

// draw display
display.prototype.draw =  function(){
  ctx.clearRect( this.x , this.y , this.width , this.height );
  ctx.fillStyle = this.color;
  ctx.fillRect( this.x , this.y , this.width , this.height );  

  ctx.strokeStyle = "BLACK";
  ctx.lineWidth = 2;
  ctx.strokeRect( this.x , this.y , this.width , this.height )
  
  if(this.text){
    ctx.font = "bold 12px verdana";
    ctx.textBaseline = "top";
    ctx.textAlign = "center";
    ctx.fillStyle = "black";
    ctx.fillText(this.text, this.centerX, this.y + paddingHalf * .2 );  
  };
};

//let boardDisplay = new display( "BOARD", 0, 14, 5, 3);
let nextDisplay = new display( "NEXT", padding175 , uiWidth3 );
let rowDisplay = new display( "ROWS" , padding175 + uiWidth3 + paddingThird , uiWidth2 );
let levelDisplay = new display("LEVEL" , padding175 + uiWidth3 + paddingThird + uiWidth2 + paddingThird , uiWidth2);
let scoreDisplay = new display( "SCORE" , padding175 + uiWidth3 + paddingThird + uiWidth2 + paddingThird + uiWidth2 + paddingThird, uiWidth2 );

//boardDisplay.draw();
nextDisplay.draw();
rowDisplay.draw();
levelDisplay.draw();
scoreDisplay.draw();

  //the pieces and their colors

  const pieces = [
    [z, "orangered"],
    [s, "gold"],
    [t, "chartreuse"],
    [l, "hotpink"],
    [j, "royalblue"],
    [i, "cyan"],
    [o, "darkviolet"]
  ];

//generate random tetromino

function randomPiece(){
  let r = Math.floor(Math.random() * pieces.length);
  return new piece(pieces[r][0], pieces[r][1])
};

let p = randomPiece();
let next = randomPiece();

//create piece object

function piece(tetromino, color){

  this.tetromino = tetromino;
  this.color = color;
  this.tetrominoRotation = 0;
  this.activeTetromino = this.tetromino[this.tetrominoRotation]
  
  // starting point
  this.x = (this.activeTetromino.length > 2 ? 3 : 4);
  this.y = -(this.activeTetromino.length);
};  

//create fill function

piece.prototype.fill = function(color) {
  for(r = 0; r < this.activeTetromino.length; r++){
    for(c = 0; c < this.activeTetromino.length; c++){
      if(this.activeTetromino[r][c]){
        let newX = (this.x + c) * sq + padding175;
        let newY = (this.y + r) * sq + paddingHalf + uiHeight + paddingThird;
        if(newY >= paddingHalf + uiHeight){
          drawSquare(newX, newY, color);
        };
      };
    };
  };
};

//draw a piece to the board

piece.prototype.draw = function() {
  this.fill(this.color);
};

// undraw a piece

piece.prototype.undraw = function() {
  this.fill(vacant);
};

// display next piece

// TRY THIS
// let nextDisplay 
display.prototype.drawNext = function(nextPiece){
  nextDisplay.draw();
  
  let factor = .5;
  let newSq = factor * sq;
  let length = nextPiece.activeTetromino.length
  for(r = 0; r < length; r++){
    for(c = 0; c < length; c++){
      if(nextPiece.activeTetromino[r][c]){
        
        let newX = (c * newSq) + nextDisplay.centerX - (length/2 * newSq );
        let newY = (r * newSq) + nextDisplay.centerY - (length/2 * newSq);
        
        drawSquare(newX, newY, nextPiece.color, factor);      
      };
    };
  }; 
};


//move down the piece
piece.prototype.moveDown = function (){
  if(!this.collision(0,1, this.activeTetromino)){
    this.undraw();
    this.y++;
    this.draw();
    secondTimer = 0;
  }else{
    
    //lock the piece and generate a new one
    this.lock();
    p = next;
    next = randomPiece();
    nextDisplay.drawNext(next);
  };
};

//move the piece right
piece.prototype.moveRight = function (){
  if(!this.collision(1,0, this.activeTetromino)){
    this.undraw();
    this.x++;
    this.draw();
  };
};

//move the piece left
piece.prototype.moveLeft = function (){
  if(!this.collision(-1,0, this.activeTetromino)){
    this.undraw();
    this.x--;
    this.draw();
  };
};

//rotate the piece
piece.prototype.rotate = function(){
  let nextRotation = this.tetromino[(this.tetrominoRotation + 1)%this.tetromino.length];
  let kick = 0;
  
  if(this.collision(0, 0, nextRotation)){
    //checks to see if collision is right or left wall
    if(this.x > col/2){
      //it's the right wall
      kick = -1;
    }else{
      //its the left wall
      kick = 1;
    };
  };
  
  if(!this.collision(kick, 0, nextRotation)){
    this.undraw();
    this.x += kick;
    this.tetrominoRotation = (this.tetrominoRotation + 1) % this.tetromino.length;
    this.activeTetromino = this.tetromino[this.tetrominoRotation];
    this.draw()
  };
};

// lock the piece

piece.prototype.lock = function(){
  for(r = 0; r < this.activeTetromino.length; r++){
    for(c = 0; c < this.activeTetromino.length; c++){
      // skip vacant square
      if(!this.activeTetromino[r][c]){
        continue;
      };
      //lock on top gameover
      if(this.y + r < 0){
        alert("Game Over");
        gameOver = true;
        break;
      };
      // we lock the piece
      board[this.y + r][this.x + c] = this.color;
    };
  };
  // remove full rows
  for(r = 0; r < row; r++){
    let isRowFull = true;
    
    for(c = 0; c < col; c++){
      isRowFull = isRowFull && (board[r][c] != vacant);
    };
    
    if(isRowFull){      
      // if row is full
      // move down all rows above it
      for(y = r; y > 1; y--){
        for(c = 0; c < col; c++){
          board[y][c] = board[y-1][c]
        };
      };
      
      // the top row has no row above it
      for(c = 0; c < col; c++){
        board[0][c] = vacant;
      };
      
      // increment row count
      rowCount++;
      
      // increment level every five rows
      if(rowCount % 5 === 0){
        level++
      };
    };
  };
  drawBoard();
};

// collision function

piece.prototype.collision = function(x,y,piece){
  for(r = 0; r < piece.length; r++){
    for(c = 0; c < piece.length; c++){
      //check if square is vacant
      if(!piece[r][c]){
        continue;
      };
      // coordinates of piece after movement
      let newX = this.x + c + x;
      let newY = this.y + r + y;
      
      // conditions
      if(newX < 0 || newX >= col || newY >= row){
        return true;
      };
      
      // skip newY < 0; board[-1] will crash game
      if(newY < 0){
        continue;
      };
      
      //check if there is a locked piece alrready in place
      if(board[newY][newX] != vacant){
        return true;
      };
    };
  };
  return false;
};

//control the piece

document.addEventListener("keydown", control);

const keys = [37, 38, 39, 40, 65, 87, 68, 83]

function control(event){
  let keyPress = event.keyCode;
  
  if(keys.includes(keyPress)){
    p.resetTimer();
  };
  
  if(keyPress === 37 || keyPress === 65){
    p.moveLeft();
  }else if(keyPress === 38 || keyPress === 87){
    p.rotate();
  }else if(keyPress === 39 || keyPress === 68){
    p.moveRight();
  }else if(keyPress === 40 || keyPress === 83){
    p.moveDown();
  };  
};

//drop the piece down every 1 second

let dropStart = Date.now();
let gameOver = false;
function drop(){
  let now = Date.now();
  let delta = now - dropStart;
  if (delta > 1000){
    p.moveDown();
    dropStart = Date.now();
  };
  if(!gameOver){
    requestAnimationFrame(drop)  
  };
};

let secondTimer;
piece.prototype.resetTimer = function(){
  if(!secondTimer){
    dropStart = Date.now();
    secondTimer = 1;
  };

};

p.draw();
nextDisplay.drawNext(next);
drop();