straker/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Basic Tetris HTML and JavaScript Game

This is a basic implementation of the game Tetris, but it's missing a few things intentionally and they're left as further exploration for the reader.

Further Exploration


Score

When a line is cleared, the score should increase based on the number of lines cleared at once. See https://tetris.fandom.com/wiki/Scoring
Display a high score using localSorage


Next Piece Preview

Show the next piece (or pieces) that will enter the playfield. See https://tetris.fandom.com/wiki/Next


Hard Drop

When the Space key is pressed, the piece should be placed as far down as possible. See https://tetris.fandom.com/wiki/Hard_Drop


Mobile and touchscreen support

Allow the game to be scaled down to a phone size. See https://codepen.io/straker/pen/VazMaL
Support touch controls


Important note: I will answer questions about the code but will not add more features or answer questions about adding more features. This series is meant to give a basic outline of the game but nothing more.
License

(CC0 1.0 Universal) You're free to use this game and code in any project, personal or commercial. There's no need to ask permission before using these. Giving attribution is not required, but appreciated.
Other Basic Games


Snake
Pong
Breakout
Bomberman
Frogger
Missile Command
Sokoban
Doodle Jump
Puzzle Bobble
Helicopter
Block Dude

Support

Basic HTML Games are made possible by users like you. When you become a Patron, you get access to behind the scenes development logs, the ability to vote on which games I work on next, and early access to the next Basic HTML Game.
Top Patrons


Karar Al-Remahy
UnbrandedTech
Innkeeper Games
Nezteb


## tetris.html
<!DOCTYPE html>
<html>
<head>
  <title>Basic Tetris HTML Game</title>
  <meta charset="UTF-8">
  <style>
  html, body {
    height: 100%;
    margin: 0;
  }

  body {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  canvas {
    border: 1px solid white;
  }
  </style>
</head>
<body>
<canvas width="320" height="640" id="game"></canvas>
<script>
// https://tetris.fandom.com/wiki/Tetris_Guideline

// get a random integer between the range of [min,max]
// @see https://stackoverflow.com/a/1527820/2124254
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);

  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// generate a new tetromino sequence
// @see https://tetris.fandom.com/wiki/Random_Generator
function generateSequence() {
  const sequence = ['I', 'J', 'L', 'O', 'S', 'T', 'Z'];

  while (sequence.length) {
    const rand = getRandomInt(0, sequence.length - 1);
    const name = sequence.splice(rand, 1)[0];
    tetrominoSequence.push(name);
  }
}

// get the next tetromino in the sequence
function getNextTetromino() {
  if (tetrominoSequence.length === 0) {
    generateSequence();
  }

  const name = tetrominoSequence.pop();
  const matrix = tetrominos[name];

  // I and O start centered, all others start in left-middle
  const col = playfield[0].length / 2 - Math.ceil(matrix[0].length / 2);

  // I starts on row 21 (-1), all others start on row 22 (-2)
  const row = name === 'I' ? -1 : -2;

  return {
    name: name,      // name of the piece (L, O, etc.)
    matrix: matrix,  // the current rotation matrix
    row: row,        // current row (starts offscreen)
    col: col         // current col
  };
}

// rotate an NxN matrix 90deg
// @see https://codereview.stackexchange.com/a/186834
function rotate(matrix) {
  const N = matrix.length - 1;
  const result = matrix.map((row, i) =>
    row.map((val, j) => matrix[N - j][i])
  );

  return result;
}

// check to see if the new matrix/row/col is valid
function isValidMove(matrix, cellRow, cellCol) {
  for (let row = 0; row < matrix.length; row++) {
    for (let col = 0; col < matrix[row].length; col++) {
      if (matrix[row][col] && (
          // outside the game bounds
          cellCol + col < 0 ||
          cellCol + col >= playfield[0].length ||
          cellRow + row >= playfield.length ||
          // collides with another piece
          playfield[cellRow + row][cellCol + col])
        ) {
        return false;
      }
    }
  }

  return true;
}

// place the tetromino on the playfield
function placeTetromino() {
  for (let row = 0; row < tetromino.matrix.length; row++) {
    for (let col = 0; col < tetromino.matrix[row].length; col++) {
      if (tetromino.matrix[row][col]) {

        // game over if piece has any part offscreen
        if (tetromino.row + row < 0) {
          return showGameOver();
        }

        playfield[tetromino.row + row][tetromino.col + col] = tetromino.name;
      }
    }
  }

  // check for line clears starting from the bottom and working our way up
  for (let row = playfield.length - 1; row >= 0; ) {
    if (playfield[row].every(cell => !!cell)) {

      // drop every row above this one
      for (let r = row; r >= 0; r--) {
        for (let c = 0; c < playfield[r].length; c++) {
          playfield[r][c] = playfield[r-1][c];
        }
      }
    }
    else {
      row--;
    }
  }

  tetromino = getNextTetromino();
}

// show the game over screen
function showGameOver() {
  cancelAnimationFrame(rAF);
  gameOver = true;

  context.fillStyle = 'black';
  context.globalAlpha = 0.75;
  context.fillRect(0, canvas.height / 2 - 30, canvas.width, 60);

  context.globalAlpha = 1;
  context.fillStyle = 'white';
  context.font = '36px monospace';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillText('GAME OVER!', canvas.width / 2, canvas.height / 2);
}

const canvas = document.getElementById('game');
const context = canvas.getContext('2d');
const grid = 32;
const tetrominoSequence = [];

// keep track of what is in every cell of the game using a 2d array
// tetris playfield is 10x20, with a few rows offscreen
const playfield = [];

// populate the empty state
for (let row = -2; row < 20; row++) {
  playfield[row] = [];

  for (let col = 0; col < 10; col++) {
    playfield[row][col] = 0;
  }
}

// how to draw each tetromino
// @see https://tetris.fandom.com/wiki/SRS
const tetrominos = {
  'I': [
    [0,0,0,0],
    [1,1,1,1],
    [0,0,0,0],
    [0,0,0,0]
  ],
  'J': [
    [1,0,0],
    [1,1,1],
    [0,0,0],
  ],
  'L': [
    [0,0,1],
    [1,1,1],
    [0,0,0],
  ],
  'O': [
    [1,1],
    [1,1],
  ],
  'S': [
    [0,1,1],
    [1,1,0],
    [0,0,0],
  ],
  'Z': [
    [1,1,0],
    [0,1,1],
    [0,0,0],
  ],
  'T': [
    [0,1,0],
    [1,1,1],
    [0,0,0],
  ]
};

// color of each tetromino
const colors = {
  'I': 'cyan',
  'O': 'yellow',
  'T': 'purple',
  'S': 'green',
  'Z': 'red',
  'J': 'blue',
  'L': 'orange'
};

let count = 0;
let tetromino = getNextTetromino();
let rAF = null;  // keep track of the animation frame so we can cancel it
let gameOver = false;

// game loop
function loop() {
  rAF = requestAnimationFrame(loop);
  context.clearRect(0,0,canvas.width,canvas.height);

  // draw the playfield
  for (let row = 0; row < 20; row++) {
    for (let col = 0; col < 10; col++) {
      if (playfield[row][col]) {
        const name = playfield[row][col];
        context.fillStyle = colors[name];

        // drawing 1 px smaller than the grid creates a grid effect
        context.fillRect(col * grid, row * grid, grid-1, grid-1);
      }
    }
  }

  // draw the active tetromino
  if (tetromino) {

    // tetromino falls every 35 frames
    if (++count > 35) {
      tetromino.row++;
      count = 0;

      // place piece if it runs into anything
      if (!isValidMove(tetromino.matrix, tetromino.row, tetromino.col)) {
        tetromino.row--;
        placeTetromino();
      }
    }

    context.fillStyle = colors[tetromino.name];

    for (let row = 0; row < tetromino.matrix.length; row++) {
      for (let col = 0; col < tetromino.matrix[row].length; col++) {
        if (tetromino.matrix[row][col]) {

          // drawing 1 px smaller than the grid creates a grid effect
          context.fillRect((tetromino.col + col) * grid, (tetromino.row + row) * grid, grid-1, grid-1);
        }
      }
    }
  }
}

// listen to keyboard events to move the active tetromino
document.addEventListener('keydown', function(e) {
  if (gameOver) return;

  // left and right arrow keys (move)
  if (e.which === 37 || e.which === 39) {
    const col = e.which === 37
      ? tetromino.col - 1
      : tetromino.col + 1;

    if (isValidMove(tetromino.matrix, tetromino.row, col)) {
      tetromino.col = col;
    }
  }

  // up arrow key (rotate)
  if (e.which === 38) {
    const matrix = rotate(tetromino.matrix);
    if (isValidMove(matrix, tetromino.row, tetromino.col)) {
      tetromino.matrix = matrix;
    }
  }

  // down arrow key (drop)
  if(e.which === 40) {
    const row = tetromino.row + 1;

    if (!isValidMove(tetromino.matrix, row, tetromino.col)) {
      tetromino.row = row - 1;

      placeTetromino();
      return;
    }

    tetromino.row = row;
  }
});

// start the game
rAF = requestAnimationFrame(loop);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Basic Tetris HTML Game</title>
	<meta charset="UTF-8">
	<style>
	html, body {
	height: 100%;
	margin: 0;
	}

	body {
	background: black;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	canvas {
	border: 1px solid white;
	}
	</style>
	</head>
	<body>
	<canvas width="320" height="640" id="game"></canvas>
	<script>
	// https://tetris.fandom.com/wiki/Tetris_Guideline

	// get a random integer between the range of [min,max]
	// @see https://stackoverflow.com/a/1527820/2124254
	function getRandomInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);

	return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	// generate a new tetromino sequence
	// @see https://tetris.fandom.com/wiki/Random_Generator
	function generateSequence() {
	const sequence = ['I', 'J', 'L', 'O', 'S', 'T', 'Z'];

	while (sequence.length) {
	const rand = getRandomInt(0, sequence.length - 1);
	const name = sequence.splice(rand, 1)[0];
	tetrominoSequence.push(name);
	}
	}

	// get the next tetromino in the sequence
	function getNextTetromino() {
	if (tetrominoSequence.length === 0) {
	generateSequence();
	}

	const name = tetrominoSequence.pop();
	const matrix = tetrominos[name];

	// I and O start centered, all others start in left-middle
	const col = playfield[0].length / 2 - Math.ceil(matrix[0].length / 2);

	// I starts on row 21 (-1), all others start on row 22 (-2)
	const row = name === 'I' ? -1 : -2;

	return {
	name: name, // name of the piece (L, O, etc.)
	matrix: matrix, // the current rotation matrix
	row: row, // current row (starts offscreen)
	col: col // current col
	};
	}

	// rotate an NxN matrix 90deg
	// @see https://codereview.stackexchange.com/a/186834
	function rotate(matrix) {
	const N = matrix.length - 1;
	const result = matrix.map((row, i) =>
	row.map((val, j) => matrix[N - j][i])
	);

	return result;
	}

	// check to see if the new matrix/row/col is valid
	function isValidMove(matrix, cellRow, cellCol) {
	for (let row = 0; row < matrix.length; row++) {
	for (let col = 0; col < matrix[row].length; col++) {
	if (matrix[row][col] && (
	// outside the game bounds
	cellCol + col < 0 \|\|
	cellCol + col >= playfield[0].length \|\|
	cellRow + row >= playfield.length \|\|
	// collides with another piece
	playfield[cellRow + row][cellCol + col])
	) {
	return false;
	}
	}
	}

	return true;
	}

	// place the tetromino on the playfield
	function placeTetromino() {
	for (let row = 0; row < tetromino.matrix.length; row++) {
	for (let col = 0; col < tetromino.matrix[row].length; col++) {
	if (tetromino.matrix[row][col]) {

	// game over if piece has any part offscreen
	if (tetromino.row + row < 0) {
	return showGameOver();
	}

	playfield[tetromino.row + row][tetromino.col + col] = tetromino.name;
	}
	}
	}

	// check for line clears starting from the bottom and working our way up
	for (let row = playfield.length - 1; row >= 0; ) {
	if (playfield[row].every(cell => !!cell)) {

	// drop every row above this one
	for (let r = row; r >= 0; r--) {
	for (let c = 0; c < playfield[r].length; c++) {
	playfield[r][c] = playfield[r-1][c];
	}
	}
	}
	else {
	row--;
	}
	}

	tetromino = getNextTetromino();
	}

	// show the game over screen
	function showGameOver() {
	cancelAnimationFrame(rAF);
	gameOver = true;

	context.fillStyle = 'black';
	context.globalAlpha = 0.75;
	context.fillRect(0, canvas.height / 2 - 30, canvas.width, 60);

	context.globalAlpha = 1;
	context.fillStyle = 'white';
	context.font = '36px monospace';
	context.textAlign = 'center';
	context.textBaseline = 'middle';
	context.fillText('GAME OVER!', canvas.width / 2, canvas.height / 2);
	}

	const canvas = document.getElementById('game');
	const context = canvas.getContext('2d');
	const grid = 32;
	const tetrominoSequence = [];

	// keep track of what is in every cell of the game using a 2d array
	// tetris playfield is 10x20, with a few rows offscreen
	const playfield = [];

	// populate the empty state
	for (let row = -2; row < 20; row++) {
	playfield[row] = [];

	for (let col = 0; col < 10; col++) {
	playfield[row][col] = 0;
	}
	}

	// how to draw each tetromino
	// @see https://tetris.fandom.com/wiki/SRS
	const tetrominos = {
	'I': [
	[0,0,0,0],
	[1,1,1,1],
	[0,0,0,0],
	[0,0,0,0]
	],
	'J': [
	[1,0,0],
	[1,1,1],
	[0,0,0],
	],
	'L': [
	[0,0,1],
	[1,1,1],
	[0,0,0],
	],
	'O': [
	[1,1],
	[1,1],
	],
	'S': [
	[0,1,1],
	[1,1,0],
	[0,0,0],
	],
	'Z': [
	[1,1,0],
	[0,1,1],
	[0,0,0],
	],
	'T': [
	[0,1,0],
	[1,1,1],
	[0,0,0],
	]
	};

	// color of each tetromino
	const colors = {
	'I': 'cyan',
	'O': 'yellow',
	'T': 'purple',
	'S': 'green',
	'Z': 'red',
	'J': 'blue',
	'L': 'orange'
	};

	let count = 0;
	let tetromino = getNextTetromino();
	let rAF = null; // keep track of the animation frame so we can cancel it
	let gameOver = false;

	// game loop
	function loop() {
	rAF = requestAnimationFrame(loop);
	context.clearRect(0,0,canvas.width,canvas.height);

	// draw the playfield
	for (let row = 0; row < 20; row++) {
	for (let col = 0; col < 10; col++) {
	if (playfield[row][col]) {
	const name = playfield[row][col];
	context.fillStyle = colors[name];

	// drawing 1 px smaller than the grid creates a grid effect
	context.fillRect(col * grid, row * grid, grid-1, grid-1);
	}
	}
	}

	// draw the active tetromino
	if (tetromino) {

	// tetromino falls every 35 frames
	if (++count > 35) {
	tetromino.row++;
	count = 0;

	// place piece if it runs into anything
	if (!isValidMove(tetromino.matrix, tetromino.row, tetromino.col)) {
	tetromino.row--;
	placeTetromino();
	}
	}

	context.fillStyle = colors[tetromino.name];

	for (let row = 0; row < tetromino.matrix.length; row++) {
	for (let col = 0; col < tetromino.matrix[row].length; col++) {
	if (tetromino.matrix[row][col]) {

	// drawing 1 px smaller than the grid creates a grid effect
	context.fillRect((tetromino.col + col) * grid, (tetromino.row + row) * grid, grid-1, grid-1);
	}
	}
	}
	}
	}

	// listen to keyboard events to move the active tetromino
	document.addEventListener('keydown', function(e) {
	if (gameOver) return;

	// left and right arrow keys (move)
	if (e.which === 37 \|\| e.which === 39) {
	const col = e.which === 37
	? tetromino.col - 1
	: tetromino.col + 1;

	if (isValidMove(tetromino.matrix, tetromino.row, col)) {
	tetromino.col = col;
	}
	}

	// up arrow key (rotate)
	if (e.which === 38) {
	const matrix = rotate(tetromino.matrix);
	if (isValidMove(matrix, tetromino.row, tetromino.col)) {
	tetromino.matrix = matrix;
	}
	}

	// down arrow key (drop)
	if(e.which === 40) {
	const row = tetromino.row + 1;

	if (!isValidMove(tetromino.matrix, row, tetromino.col)) {
	tetromino.row = row - 1;

	placeTetromino();
	return;
	}

	tetromino.row = row;
	}
	});

	// start the game
	rAF = requestAnimationFrame(loop);
	</script>
	</body>
	</html>