VCHS Computer Science: Tetris Part 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>
<p><button id="start">Start</button></p>

<script>

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

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

/*** GLOBAL VARIABLE ***/

let currentShape;

/*** GLOBAL CONSTANTS ***/

// 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(),
    start: getStartButton()
  });

// Shape Constants
  const shapeConst = Object.freeze({
    LColor: "orange",
    JColor: "orange",
    SColor: "blue",
    ZColor: "blue"
  });

/*** FUNCTIONS ***/

function getStartButton() {
    const element = document.getElementById("start");
    element.addEventListener("click", startGame);
    return element;
  }

/** 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;
  }

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

const thisObject = this;
    const numBlocks = blocks.length;

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

this.moveDown = function() {
      if (canMoveDown()) moveDown();
      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;
  }

/* Shape Subclasses */

function LShape() {
    Shape.call(this, getBlocks());
    const thisObject = this;

function getNextShape() {
    return new LShape();
  }

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

/*** MAIN ***/

window.addEventListener("keydown", onKeyDown);

})();

</script>

Pages

Tetris Part 1

Source Code