Tetris Game with HTML CSS and JavaScript
You can move the pieces by your keyboard Left➡️ and Right ⬅️arrow .For rotate you can press Up⬆️ and Down ⬇️key.
You can only move the pieces in specific ways; your game is over if your pieces reach the top of the screen; and you can only remove pieces from the screen by filling all the blank space in a line
Video Tutorial of Tetris Game
Tetris [Source Codes]
To Create Tetris with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html>
- <head>
- <title>Tetris Game</title>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <canvas width="320" height="640" id="game"></canvas>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- html, body {
- height: 100%;
- margin: 0;
- }
-
- body {
- background: #282A35;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- canvas {
- background: #CFD0D0;
- border: 25px dashed #787878;
- }
-
Now paste the following codes into your script.js file
- function getRandomInt(min, max) {
- min = Math.ceil(min);
- max = Math.floor(max);
-
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
-
- 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);
- }
- }
-
- function getNextTetromino() {
- if (tetrominoSequence.length === 0) {
- generateSequence();
- }
-
- const name = tetrominoSequence.pop();
- const matrix = tetrominos[name];
-
- const col = playfield[0].length / 2 - Math.ceil(matrix[0].length / 2);
-
- const row = name === 'I' ? -1 : -2;
-
- return {
- name: name,
- matrix: matrix,
- row: row,
- col: col
- };
- }
-
- function rotate(matrix) {
- const N = matrix.length - 1;
- const result = matrix.map((row, i) =>
- row.map((val, j) => matrix[N - j][i])
- );
-
- return result;
- }
-
- 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;
- }
-
- 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]) {
-
-
- if (tetromino.row + row < 0) {
- return showGameOver();
- }
-
- playfield[tetromino.row + row][tetromino.col + col] = tetromino.name;
- }
- }
- }
-
-
- for (let row = playfield.length - 1; row >= 0; ) {
- if (playfield[row].every(cell => !!cell)) {
-
-
- 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();
- }
-
- 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 = [];
-
- const playfield = [];
-
- for (let row = -2; row < 20; row++) {
- playfield[row] = [];
-
- for (let col = 0; col < 10; col++) {
- playfield[row][col] = 0;
- }
- }
-
-
- 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],
- ]
- };
-
-
- const colors = {
- 'I': '#D70044',
- 'O': '#D08100',
- 'T': '#93007A',
- 'S': '#21A000',
- 'Z': '#FF3C41',
- 'J': '#0101EE',
- 'L': '#DD0117'
- };
-
- let count = 0;
- let tetromino = getNextTetromino();
- let rAF = null;
- let gameOver = false;
-
- function loop() {
- rAF = requestAnimationFrame(loop);
- context.clearRect(0,0,canvas.width,canvas.height);
-
-
- 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];
-
- context.fillRect(col * grid, row * grid, grid-1, grid-1);
- }
- }
- }
-
- if (tetromino) {
-
- if (++count > 35) {
- tetromino.row++;
- count = 0;
-
- 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]) {
- context.fillRect((tetromino.col + col) * grid, (tetromino.row + row) * grid, grid-1, grid-1);
- }
- }
- }
- }
- }
-
- document.addEventListener('keydown', function(e) {
- if (gameOver) return;
-
- 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;
- }
- }
-
- if (e.which === 38) {
- const matrix = rotate(tetromino.matrix);
- if (isValidMove(matrix, tetromino.row, tetromino.col)) {
- tetromino.matrix = matrix;
- }
- }
-
- 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;
- }
- });
-
- rAF = requestAnimationFrame(loop);
-
If you face any difficulties while creating Tetris Game or your code is not working as expected, you can download the source code files by clicking download button.