VCHS Computer Science: Tetris Version 1

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>

<script>

/**
 *  JavaScript source code for an implementation of Tetris.
 *
 *  Author: John P. Sprugeon
 *  Version: 1 (3 April 2019)
 *
 *  Dependencies:
 *
 *  1. Document contains an element with id "grid".
 *  2. CSS (Cascading Style Sheet):
 *    a. Desired background color is specified for grid.
 *    b. Elements of "block" class are positioned "absolute".
 *
 *  Possible Enhancements
 *
 *  1. Score
 *  2. Restart
 *  3. High score
 *  4. Acceleration
 *  5. Pause
 *  6. Levels
 *  7. Piece preview
 *  8. Piece hold
 *  9. Configurable colors
 *  10. Configurable grid size
 *  11. Obstacles
 *  12. Float up (vs. drop down)
 *  13. Easter eggs (??)
 */
(function Tetris() {

"use strict";

/***********/
  /* GLOBALS */
  /***********/

const UNITS = "px";
  const StaticBlocks = [];
  let dynamicShape;
  let timerId;
  let gameIsOver = false;
  let gameIsStarted = false;

/****************************/
  /* OBJECTS AND CONSTRUCTORS */
  /****************************/

/**
   *  Constructs a block.
   *
   *  e.g. new Block({bgColor: "red", left: 0, right: 0})
   */
  function Block(options) {

// Initialize the new block.
    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 = Block.height;
      block.style.width = Block.width;
      block.style.backgroundColor = options.bgColor;
      return block;
    }

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

/* Public Methods */

this.removeFrom = function(parentElement) {
      parentElement.removeChild(element);
    }
    this.addTo = function(parentElement) {
      parentElement.append(element);
    };
    this.moveLeft = function() {
      if (canMoveLeft()) moveLeft();
    };
    this.moveRight = function() {
      if (canMoveRight()) moveRight();
    };
    this.moveDown = function() {
      if (canMoveDown()) moveDown();
    };
    this.shiftDown = function() {
      moveDown();
    }
    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();
    }
  }
  Block.subdivisions = 25;
  Block.unitsWide = Block.subdivisions;
  Block.unitsTall = Block.subdivisions;
  Block.size = Block.subdivisions + UNITS;
  Block.width = Block.size;
  Block.height = Block.size;
  Object.freeze(Block);

/**
   *  The grid that holds the game pieces.
   */
  const Grid = {
    blocksWide: 10,
    blocksTall: 16
  };
  Grid.width = (Grid.blocksWide * Block.unitsWide) + UNITS;
  Grid.height = (Grid.blocksTall * Block.unitsTall) + UNITS;
  Grid.element = (function() {
    const element = document.getElementById("grid");
    element.style.height = Grid.height;
    element.style.width = Grid.width;
    return element;
  })();
  Object.freeze(Grid);

/**
   *  Constructs a shape object composed of blocks.
   *  The value of pIndex is the index of the block
   *  around which the other blocks pivot when the
   *  shape is rotated. If pIndex is undefined, the
   *  shape does not rotate.
   */
  function Shape(blocks, pIndex) {

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

blocks.forEach(function(block) {
      block.addTo(Grid.element);
    });

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

this.overlapsOtherShape = overlapsOtherShape;
    this.canMoveRight = canMoveRight;
    this.canMoveLeft = canMoveLeft;
    this.canMoveDown = canMoveDown;
    this.freeze = freeze;
    this.pivot = function() {
      if (canPivot()) blocks.forEach(pivot);
    }
  }
  Shape.LColor = "orange";
  Shape.JColor = "red";
  Shape.SColor = "royalblue";
  Shape.ZColor = "gold";
  Shape.TColor = "green";
  Shape.IColor = "hotpink";
  Shape.OColor = "purple";
  Object.freeze(Shape);

/* Shape Subclasses */

/*************/
  /* UTILITIES */
  /*************/

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

function isOutOfBounds(pos) {
    if (pos.left < 0) return true;
    if (pos.left > Grid.blocksWide - 1) return true;
    if (pos.top < 0) return true;
    return false;
  }

function isOccupied(pos) {
    const n = StaticBlocks.length;
    for (let i = 0; i < n; ++i) {
      const block = StaticBlocks[i];
      if (block.getLeft() === pos.left && block.getTop() === pos.top)
        return true;
    }
    return false;
  }

function isOffLimits(pos) {
    return isOutOfBounds(pos) || isOccupied(pos);
  }

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() {
    gameIsStarted = true;
    dynamicShape.moveDown();
    timerId = setInterval(function() {
      dynamicShape.moveDown();
    }, 1000);
  }

/*** MAIN ***/

window.addEventListener("keydown", onKeyDown);
  setTimeout(function() {dynamicShape = getNextShape();}, 500);

})();

</script>

Pages

Tetris Version 1

Source Code