classic-tetris-js v1.0.2

classic-tetris-js

An HTML5 + Javascript implementation of the popular game Tetris, classic-tetris-js takes after the older versions of the game, such as NES Tetris.

Play classic-tetris-js here!

Features

• Supported inputs: keyboard, mouse, touch and stylus pen.
• Starting level selection.
• 'Play', 'Pause' and 'Quit' functions.
• Additional game mechanics: Ghost piece and Hard drop.
• Classic randomizer: 'Next' piece is randomly chosen with a slight bias against repeating pieces.
• Customizable graphics and sound.
• Powerful event system to notify in-game activity.

Quick start

Options to add classic-tetris-js to your project:

• Install with npm: npm install classic-tetris-js
• Download the latest release
• Clone the repo: git clone https://github.com/llop/classic-tetris-js.git

Basic setup

Include 'classic-tetris.js' in your HTML file.

<script src='classic-tetris.js'></script>

Add the game's HTML elements:

<canvas id='tetris-canvas' width='520' height='600'></canvas>
<div>
  <label for='level-input'>Start level:</label>
  <input id='level-input' name='level-input' type='number' min='0' max='19' value='5'></input>
  <button id='start-stop-btn'>Play/Pause</button>
  <button id='quit-btn'>Quit</button>
</div>

A canvas is required for the game to render. Besides that, it is convenient to also have a 'Start level' input, and buttons to play/pause and quit the game.

Finally, add the following script to initialize the game on window load:

window.addEventListener('load', event => {
  const canvas = document.getElementById('tetris-canvas');
  const tetris = new ClassicTetris(canvas);
  document.getElementById('start-stop-btn').addEventListener('click', event => {
    const startLevel = document.getElementById('level-input').value;
    tetris.setStartLevel(startLevel);
    tetris.togglePlayPause();
  });
  document.getElementById('quit-btn').addEventListener('click', event => {
    tetris.quit();
  });
});

A working example can be found in index.html.

Game controls

The player can control the game using the keyboard. The following table shows the action-to-keys mapping:

The player can also control the game using pointer devices such as a mouse, a touch screen, or a stylus pen:

Customizing the game

It is also possible to specify default values for many of the game's parameters. This can be accomplished via the ClassicTetris constructor, which takes an options object after the required canvas element:

const tetris = new ClassicTetris(canvas, {
   boardWidth: 10,
   // ... additional parameters here
 });

Dimensions

The following parameters establish the size and location of the game board. Note that the canvas element will not be resized automatically, so its width and height attributes may need to be adjusted accordingly, as well the positioning of the HUD elements.

The recommended size for the canvas using default parameters is 520x600 pixels, as seen in the example above.

Heads-Up Display

The HUD displays information about the ongoing game: score, lines and next piece. The positioning of these elements, as well as the text's font and color, may be specified using the parameters below:

Colors

Color for the pieces is specified with a pair of values that determine the fill and border colors for the piece's individual squares (see HTML canvas fillStyle Property and HTML canvas strokeStyle Property for permitted for fill and border color values, respectively). Background and grid colors can also be changed.

Sound

Although no music or sound effects are provided by default, it is possible to set these by providing HTMLAudioElement objects:

const tetris = new ClassicTetris(canvas, {
  gameTheme: new Audio('korobeiniki.mp3'),
  // ... additional sound effects
});

Pointer parameters

The purpose of these is to help recognize the click / tap gesture when using a pointer device to control the game.

Functions

ClassicTetris provides the following functions to control the flow of the game.

Events

ClassicTetris dispatches events to notify about in-game occurrences. Event listeners will be passed a single data parameter with details about the event.

License

classic-tetris-js is released under the MIT License. See LICENSE for details.