Tetris Game

By adamlubek

This recipe demonstrates RxJS implementation of Tetris game.

Example Code

( StackBlitz )

Tetris Game

index.ts

// RxJS v6+
import { fromEvent, of, interval, combineLatest } from 'rxjs';
import { finalize, map, pluck, scan, startWith, takeWhile, tap } from 'rxjs/operators';
import { score, randomBrick, clearGame, initialState } from './game';
import { render, renderGameOver } from './html-renderer';
import { handleKeyPress, resetKey } from './keyboard';
import { collide } from './collision';
import { rotate } from './rotation';
import { BRICK } from './constants';
import { State, Brick, Key } from './interfaces';

const player$ = combineLatest(
  of(randomBrick()),
  of({ code: '' }),
  fromEvent(document, 'keyup').pipe(startWith({ code: undefined }), pluck('code'))
).pipe(
  map(([brick, key, keyCode]: [Brick, Key, string]) => (key.code = keyCode, [brick, key]))
);

const state$ = interval(1000)
  .pipe(
    scan<number, State>((state, _) => (state.x++ , state), initialState)
  );

const game$ = combineLatest(state$, player$)
  .pipe(
    scan<[State, [Brick, Key]], [State, [Brick, Key]]>(
      ([state, [brick, key]]) => (
        state = handleKeyPress(state, brick, key),
        (([newState, rotatedBrick]: [State, Brick]) => (
          state = newState,
          brick = rotatedBrick
        ))(rotate(state, brick, key)),
        (([newState, collidedBrick]: [State, Brick]) => (
          state = newState,
          brick = collidedBrick
        ))(collide(state, brick)),
        state = score(state),
        resetKey(key),
        [state, [brick, key]]
      )),
    tap(([state, [brick, key]]) => render(state, brick)),
    takeWhile(([state, [brick, key]]) => !state.game[1].some(c => c === BRICK)),
    finalize(renderGameOver)
  );

game$.subscribe();

game.ts

import { GAME_SIZE, EMPTY, BRICK } from './constants';
import { State } from './interfaces';

const bricks = [
  [[0, 0, 0], [1, 1, 1], [0, 0, 0]],
  [[1, 1, 1], [0, 1, 0], [0, 1, 0]],
  [[0, 1, 1], [0, 1, 0], [0, 1, 0]],
  [[1, 1, 0], [0, 1, 0], [0, 1, 0]],
  [[1, 1, 0], [1, 1, 0], [0, 0, 0]]
]

export const clearGame = () => Array(GAME_SIZE).fill(EMPTY).map(e => Array(GAME_SIZE).fill(EMPTY));
export const updatePosition = (position: number, column: number) => position === 0 ? column : position;
export const validGame = (game: number[][]) => game.map(r => r.filter((_, i) => i < GAME_SIZE));
export const validBrick = (brick: number[][]) => brick.filter(e => e.some(b => b === BRICK));
export const randomBrick = () => bricks[Math.floor(Math.random() * bricks.length)];

export const score = (state: State): State => (scoreIndex => (
  scoreIndex > -1
    ? (
      state.score += 1,
      state.game.splice(scoreIndex, 1),
      state.game = [Array(GAME_SIZE).fill(EMPTY), ...state.game],
      state
    )
    : state
))(state.game.findIndex(e => e.every(e => e === BRICK)));

export const initialState = {
  game: clearGame(),
  x: 0,
  y: 0,
  score: 0
};

collision.ts

import { GAME_SIZE, BRICK, EMPTY } from './constants';
import { validBrick, validGame, updatePosition, randomBrick } from './game';
import { State, Brick } from './interfaces';

const isGoingToLevelWithExistingBricks = (state: State, brick: Brick): boolean => {
  const gameHeight = state.game.findIndex(r => r.some(c => c === BRICK));
  const brickBottomX = state.x + brick.length - 1;
  return gameHeight > -1 && brickBottomX + 1 > gameHeight;
}

const areAnyBricksColliding = (state: State, brick: Brick): boolean =>
  validBrick(brick).some((r, i) => r.some((c, j) =>
    c === EMPTY
      ? false
      : ((x, y) => state.game[x][y] === c)(i + state.x, j + state.y)
  ));

const collideBrick = (state: State, brick: Brick, isGoingToCollide: boolean): State => {
  const xOffset = isGoingToCollide ? 1 : 0;
  validBrick(brick).forEach((r, i) => {
    r.forEach((c, j) =>
      state.game[i + state.x - xOffset][j + state.y] =
      updatePosition(state.game[i + state.x - xOffset][j + state.y], c)
    );
  });
  state.game = validGame(state.game);
  state.x = 0;
  state.y = (GAME_SIZE / 2) - 1;
  return state;
}

export const collide = (state: State, brick: Brick): [State, Brick] => {
  const isGoingToCollide =
    isGoingToLevelWithExistingBricks(state, brick) &&
    areAnyBricksColliding(state, brick);

  const isOnBottom = state.x + validBrick(brick).length > GAME_SIZE- 1;

  if (isGoingToCollide || isOnBottom) {
    state = collideBrick(state, brick, isGoingToCollide);
    brick = randomBrick();
  }

  return [state, brick];
}

rotation.ts

import { GAME_SIZE, BRICK_SIZE, EMPTY } from './constants';
import { State, Brick, Key } from './interfaces';

const rightOffsetAfterRotation = (state: State, brick: Brick, rotatedBrick: Brick) =>
  (state.y + rotatedBrick.length === GAME_SIZE + 1) && brick.every(e => e[2] === EMPTY) ? 1 : 0;

const leftOffsetAfterRotation = (game: State) => game.y < 0 ? 1 : 0;
const emptyBrick = (): Brick => Array(BRICK_SIZE).fill(EMPTY).map(e => Array(BRICK_SIZE).fill(EMPTY));

const rotateBrick = (state: State, brick: Brick, rotatedBrick: Brick): [State, Brick] => (
  brick.forEach((r, i) => r.forEach((c, j) => rotatedBrick[j][brick[0].length - 1 - i] = c)),
  state.y -= rightOffsetAfterRotation(state, brick, rotatedBrick),
  state.y += leftOffsetAfterRotation(state),
  [state, rotatedBrick]
)

export const rotate = (state: State, brick: Brick, key: Key): [State, Brick] =>
  key.code === 'ArrowUp' ? rotateBrick(state, brick, emptyBrick()) : [state, brick]

keyboard.ts

import { GAME_SIZE } from './constants';
import { State, Brick, Key } from './interfaces';

const xOffset = (brick: Brick, columnIndex: number) => brick.every(e => e[columnIndex] === 0) ? 1 : 0;

export const handleKeyPress = (state: State, brick: Brick, key: Key): State => (
  state.x += key.code === 'ArrowDown'
    ? 1
    : 0,
  state.y += key.code === 'ArrowLeft' && state.y > 0 - xOffset(brick, 0)
    ? -1
    : key.code === 'ArrowRight' && state.y < GAME_SIZE - 3 + xOffset(brick, 2)
      ? 1
      : 0,
  state
);

export const resetKey = key => key.code = undefined;

html-renderer.ts

import { BRICK } from './constants';
import { State, Brick } from './interfaces';
import { updatePosition, validGame, validBrick, clearGame } from './game';

const createElem = (column: number): HTMLElement => (elem =>
  (
    elem.style.display = 'inline-block',
    elem.style.marginLeft = '3px',
    elem.style.height = '6px',
    elem.style.width = '6px',
    elem.style['background-color'] = column === BRICK
      ? 'green'
      : 'aliceblue',
    elem
  ))(document.createElement('div'))

export const render = (state: State, brick: Brick): void => {
  const gameFrame = clearGame();

  state.game.forEach((r, i) => r.forEach((c, j) => gameFrame[i][j] = c));
  validBrick(brick).forEach((r, i) =>
    r.forEach((c, j) => gameFrame[i + state.x][j + state.y] =
      updatePosition(gameFrame[i + state.x][j + state.y], c)));

  document.body.innerHTML = `score: ${state.score} <br/>`;
  validGame(gameFrame).forEach(r => {
    const rowContainer = document.createElement('div');
    r.forEach(c => rowContainer.appendChild(createElem(c)));
    document.body.appendChild(rowContainer);
  });
}

export const renderGameOver = () => document.body.innerHTML += '<br/>GAME OVER!';

interfaces.ts

export interface State {
  game: number[][];
  x: number;
  y: number;
  score: number;
}

export interface Key {
  code: string;
}

export type Brick = number[][];

constants.ts

export const GAME_SIZE = 10;
export const BRICK_SIZE = 3;
export const EMPTY = 0;
export const BRICK = 1;

Operators Used

• combineLatest

• finalize

• fromEvent

• interval

• map

• of

• pluck

• scan

• startWith

• takeWhile

• tap