p5.js Web Editor

xxxxxxxxxx
let grid;
let blockSize = 30;
let cols, rows;
let currentPiece;
let nextPiece;
let score = 0;
let level = 1;
let dropInterval = 1000;
let lastDropTime;
let gameOver = false;
​
const pieces = [
  { shape: [[1, 1, 1, 1]], color: 'cyan' },
  { shape: [[1, 1], [1, 1]], color: 'yellow' },
  { shape: [[0, 1, 0], [1, 1, 1]], color: 'purple' },
  { shape: [[0, 1, 1], [1, 1, 0]], color: 'green' },
  { shape: [[1, 1, 0], [0, 1, 1]], color: 'red' },
  { shape: [[1, 0, 0], [1, 1, 1]], color: 'blue' },
  { shape: [[0, 0, 1], [1, 1, 1]], color: 'orange' },
];
​
function setup() {
  createCanvas(blockSize * 10, blockSize * 20);
  
  cols = width / blockSize;
  rows = height / blockSize;
  grid = createGrid(cols, rows);
  
  currentPiece = getRandomPiece();
  nextPiece = getRandomPiece();
  lastDropTime = millis();
}
​
function draw() {
  background(0);
  drawGrid();
  drawPiece(currentPiece);
  drawNextPiece();
  drawScore();
​
  if (!gameOver && millis() - lastDropTime > dropInterval) {
    dropPiece();
    lastDropTime = millis();
  }
}
​
function createGrid(cols, rows) {
  let arr = new Array(cols);
  
  for (let x = 0; x < cols; x++) {
    arr[x] = new Array(rows).fill(0);
  }
  
  return arr;
}
​
function getRandomPiece() {
  let piece = random(pieces);
  
  return {
    shape: piece.shape,
    color: piece.color,
    x: floor(cols / 2 - piece.shape[0].length / 2),
    y: 0,
  };
}
​
function drawGrid() {
  for (let x = 0; x < cols; x++) {
    for (let y = 0; y < rows; y++) {
      if (grid[x][y]) {
        fill(grid[x][y]);
        rect(x * blockSize, y * blockSize, blockSize, blockSize);
      }
    }
  }
}
​
function drawPiece(piece) {
  fill(piece.color);
  
  for (let y = 0; y < piece.shape.length; y++) {
    for (let x = 0; x < piece.shape[y].length; x++) {
      if (piece.shape[y][x]) {
        rect((piece.x + x) * blockSize, (piece.y + y) * blockSize, blockSize, blockSize);
      }
    }
  }
}
​
function drawNextPiece() {
  fill(nextPiece.color);
  
  for (let y = 0; y < nextPiece.shape.length; y++) {
    for (let x = 0; x < nextPiece.shape[y].length; x++) {
      if (nextPiece.shape[y][x]) {
        rect((x + cols + 1) * blockSize, (y + 1) * blockSize, blockSize, blockSize); // Draw next piece to the right
      }
    }
  }
}
​
function dropPiece() {
  if (isValidMove(currentPiece.x, currentPiece.y + 1, currentPiece.shape)) {
    currentPiece.y++;
  } 
  else {
    mergePiece();
    clearLines();
    currentPiece = nextPiece;
    nextPiece = getRandomPiece();
    if (!isValidMove(currentPiece.x, currentPiece.y, currentPiece.shape)) {
      gameOver = true;
      console.log("Game Over!");
    }
  }
}
​
function isValidMove(x, y, shape) {
  for (let row = 0; row < shape.length; row++) {
    for (let col = 0; col < shape[row].length; col++) {
      if (shape[row][col]) {
        let gridX = x + col;
        let gridY = y + row;
        
        if (gridX < 0 || gridX >= cols || gridY >= rows || (gridY >= 0 && grid[gridX][gridY])) {
          return false;
        }
      }
    }
  }
  return true;
}
​
function mergePiece() {
  for (let row = 0; row < currentPiece.shape.length; row++) {
    for (let col = 0; col < currentPiece.shape[row].length; col++) {
      if (currentPiece.shape[row][col]) {
        grid[currentPiece.x + col][currentPiece.y + row] = currentPiece.color;
      }
    }
  }
}
​
function clearLines() {
  for (let y = rows - 1; y >= 0; y--) {
    let full = true;
    
    for (let x = 0; x < cols; x++) {
      if (!grid[x][y]) {
        full = false;
        break;
      }
    }
    
    if (full) {
      score += 100 * level;
      
      for (let yy = y; yy > 0; yy--) {
        for (let x = 0; x < cols; x++) {
          grid[x][yy] = grid[x][yy - 1];
        }
      }
      
      y++; // Check the same row again after shifting
      
      if (score >= level * 1000) {
        level++;
        dropInterval *= 0.8; // Increase speed
      }
    }
  }
}
​
function keyPressed() {
  if (gameOver) 
    return;
    
  if (keyCode === LEFT_ARROW) {
    if (isValidMove(currentPiece.x - 1, currentPiece.y, currentPiece.shape)) {
      currentPiece.x--;
    }
  } else if (keyCode === RIGHT_ARROW) {
    if (isValidMove(currentPiece.x + 1, currentPiece.y, currentPiece.shape)) {
      currentPiece.x++;
    }
  } else if (keyCode === DOWN_ARROW) {
    dropPiece();
    lastDropTime = millis();
  } else if (keyCode === UP_ARROW) {
    rotatePiece();
  }
}
​
function rotatePiece() {
  let rotatedShape = [];
  let shape = currentPiece.shape;
  
  for (let x = 0; x < shape[0].length; x++) {
    let row = [];
    for (let y = shape.length - 1; y >= 0; y--) {
      row.push(shape[y][x]);
    }
    
    rotatedShape.push(row);
  }
  
  if (isValidMove(currentPiece.x, currentPiece.y, rotatedShape)) {
    currentPiece.shape = rotatedShape;
  }
}
​
function drawScore() {
  fill(255);
  textSize(20);
  text(`Score: ${score}`, 10, 20);
  text(`Level: ${level}`, 10, 45);
}
Cookies

Sketch Files

Console

Preview
