VCHS Computer Science: Tetris Part 3

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: purple; left: 100px; top: 0px;"></div><div class="block" style="height: 25px; width: 25px; background-color: purple; left: 125px; top: 0px;"></div><div class="block" style="height: 25px; width: 25px; background-color: purple; left: 100px; top: 25px;"></div><div class="block" style="height: 25px; width: 25px; background-color: purple; left: 125px; 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;

/*** 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(left, top) {
    const n = frozenBlocks.length;
    for (let i = 0; i < n; ++i) {
      const block = frozenBlocks[i];
      if (block.left() === left && block.top() === 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 currentLeft = options.left;
    let currentTop = 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;
    }

/* 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.left = function() { return currentLeft; }
    this.top = function() { return currentTop; }
    this.setLeft = function(value) {
      currentLeft = value;
      updateLeft();
    }
    this.setTop = function(value) {
      currentTop = value;
      updateTop();
    }
  }

/** Base class for a shape object consisting of blocks. */
  function Shape(blocks, p) {

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

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.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];
    return new fxn();
  }

function startGame() {
    currentShape = getNextShape();
  }

/*** MAIN ***/

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

})();

</script>

Pages

Tetris Part 3

Source Code