Tetris Game
By adamlubek
This recipe demonstrates RxJS implementation of Tetris game.
Example Code
( StackBlitz )
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
Last updated