VCHS Computer Science: Tetris Part 4

Source Code

<style>
  #grid {
    background-color: black;
    position: relative;
    border-right: solid 1px black;
    border-bottom: solid 1px black;
  }
  .block {
    position: absolute;
    border: solid 1px silver;
  }
</style>

<div id="grid" style="height: 400px; width: 250px;"><div class="block" style="height: 25px; width: 25px; background-color: royalblue; left: 100px; top: 0px;"></div><div class="block" style="height: 25px; width: 25px; background-color: royalblue; left: 125px; top: 0px;"></div><div class="block" style="height: 25px; width: 25px; background-color: royalblue; left: 125px; top: 25px;"></div><div class="block" style="height: 25px; width: 25px; background-color: royalblue; left: 150px; top: 25px;"></div></div>

<script>

(function IIFE() { // Immediately Invoked Function Expression

"use strict"; // Opt into strict mode. (Opt out of sloppy mode.)

/*** GLOBAL VARIABLE ***/

let currentShape;
  let timerId;
  let gameIsOver = false;

/*** GLOBAL CONSTANTS ***/

const frozenBlocks = [];

// Unit Constants
  const unitConst = Object.freeze({
    units: "px",
    qtyPer: 25
  });

// Block Constants
  const blockConst = {
    unitsWide: unitConst.qtyPer,
    unitsTall: unitConst.qtyPer,
    length: unitConst.qtyPer + unitConst.units
  };
  blockConst.width = blockConst.length;
  blockConst.height = blockConst.length;
  Object.freeze(blockConst);

// Grid Constants
  const gridConst = {
    blocksWide: 10,
    blocksTall: 16
  };
  gridConst.width = (gridConst.blocksWide * blockConst.unitsWide) + unitConst.units;
  gridConst.height = (gridConst.blocksTall * blockConst.unitsTall) + unitConst.units;
  Object.freeze(gridConst);

// Element Constants
  const elemConst = Object.freeze({
    grid: getSizedGrid()
  });

// Shape Constants
  const shapeConst = Object.freeze({
    LColor: "orange",
    JColor: "red",
    SColor: "royalblue",
    ZColor: "gold",
    TColor: "green",
    IColor: "hotpink",
    OColor: "purple"
  });

/*** FUNCTIONS ***/

function isBlockedAt(pos) {
    const n = frozenBlocks.length;
    if (pos.left < 0) return true;
    if (pos.left > gridConst.blocksWide - 1) return true;
    if (pos.top < 0) return true;
    for (let i = 0; i < n; ++i) {
      const block = frozenBlocks[i];
      if (block.getLeft() === pos.left && block.getTop() === pos.top)
        return true;
    }
    return false;
  }

/** Gets, sets the size of, and returns the grid element. */
  function getSizedGrid() {
    const grid = document.getElementById("grid");
    grid.style.height = gridConst.height;
    grid.style.width = gridConst.width;
    return grid;
  }

/** Constructs a single block object. */
  function Block(options) {

// Initialize the new block.
    const thisObject = this;
    const element = createBlockElement();
    let left = options.left;
    let top = options.top;
    updatePosition();

/* Private Functions */

function createBlockElement() {
      const block = document.createElement("div");
      block.classList.add("block");
      block.style.height = blockConst.height;
      block.style.width = blockConst.width;
      block.style.backgroundColor = options.bgColor;
      return block;
    }

function moveLeft() {
      --left;
      updateLeft();
    }
    function moveRight() {
      ++left;
      updateLeft();
    }
    function moveDown() {
      ++top;
      updateTop();
    }

/* Public Methods */

this.addTo = function(otherElement) {
      otherElement.append(element);
      return thisObject;
    };
    this.moveLeft = function() {
      if (canMoveLeft()) moveLeft();
      return thisObject;
    };
    this.moveRight = function() {
      if (canMoveRight()) moveRight();
      return thisObject;
    };
    this.moveDown = function() {
      if (canMoveDown()) moveDown();
      return thisObject;
    };
    this.canMoveRight = canMoveRight;
    this.canMoveLeft = canMoveLeft;
    this.canMoveDown = canMoveDown;
    this.getLeft = function() {
        return left;
    }
    this.getTop = function() {
      return top;
    }
    this.getPosition = function() {
        return {left: left, top: top};
    }
    this.setLeft = function(value) {
      left = value;
      updateLeft();
    }
    this.setTop = function(value) {
      top = value;
      updateTop();
    }
  }

function blockComparator(b1, b2) {
    const topDiff = b1.getTop() - b2.getTop();
    return (topDiff === 0) ?
      b1.getLeft() - b2.getLeft() : topDiff;
  }

/** Base class for a shape object consisting of blocks.
   *  The value of pIndex is the index of the pivot block
   *  around which the other blocks may be rotated.
   */
  function Shape(blocks, pIndex) {

const thisObject = this;
    const numBlocks = blocks.length;
    const pivotBlock = (pIndex === undefined) ? undefined : blocks[pIndex];

blocks.forEach(function(block) {
      block.addTo(elemConst.grid);
    });

this.moveDown = function() {
      if (canMoveDown()) moveDown();
      else freeze();
      return thisObject;
    };
    this.moveLeft = function() {
      if (canMoveLeft()) moveLeft();
      return thisObject;
    };
    this.moveRight = function() {
      if (canMoveRight()) moveRight();
      return thisObject;
    };

this.overlapsOtherShape = overlapsOtherShape;
    this.canMoveRight = canMoveRight;
    this.canMoveLeft = canMoveLeft;
    this.canMoveDown = canMoveDown;
    this.freeze = freeze;
    this.pivot = function() {
      if (canPivot()) blocks.forEach(pivot);
      return thisObject;
    }
  }

/* Shape Subclasses */

function getNextShape() {
    const fxns = [LShape, JShape, SShape, ZShape, TShape, OShape, IShape];
    const index = Math.floor(Math.random() * fxns.length);
    const fxn = fxns[index];
    const nextShape = new fxn();
    if (nextShape.overlapsOtherShape()) {
      gameIsOver = true;
      clearInterval(timerId);
    }
    return nextShape;
  }

function startGame() {
    currentShape = getNextShape();
    timerId = setInterval(function() {
      currentShape.moveDown();
    }, 1000);
  }

/*** MAIN ***/

window.addEventListener("keydown", onKeyDown);
  startGame();

})();

</script>

Pages

Tetris Part 4

Source Code