Tetris Game Code In Javascript | Tetris Game Code Html Css Javascript
Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Tetris Game. We use HTML, Css, and javascript for this Tetris Game. I hope you enjoy our blog so let’s start with a basic HTML structure for the Tetris Game.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="score"></div>
<canvas id="tetris" width="240" height="400" />
<script src="tetris.js"></script>
</body>
</html>
There is all the HTML code for the Tetris Game. Now, you can see an output with CSS, then we write javascript for the Tetris Game.
output
 |
| Blank Output with Blank html tag |
CSS code
body{
background: #202028;
color: #fff;
font-family: sans-serif;
font-size: 2em;
text-align: center;
}
canvas{
border:solid 0.2em #fff;
height:90vh;
}
Css Updated output
Javascript code
"use strict";
const canvas = document.getElementById("tetris");
const context = canvas.getContext("2d");
context.scale(20, 20);
function arenaSweep() {
let rowCount = 1;
outer: for (let y = arena.length - 1; y > 0; --y) {
for (let x = 0; x < arena[y].length; ++x) {
if (arena[y][x] === 0) {
continue outer;
}
}
const row = arena.splice(y, 1)[0].fill(0);
arena.unshift(row);
++y;
player.score += rowCount * 10;
rowCount *= 2;
}
}
function collide(arena, player) {
const m = player.matrix;
const o = player.pos;
for (let y = 0; y < m.length; ++y) {
for (let x = 0; x < m[y].length; ++x) {
if (m[y][x] !== 0 && (arena[y + o.y] && arena[y + o.y][x + o.x]) !== 0) {
return true;
}
}
}
return false;
}
function createMatrix(w, h) {
const matrix = [];
while (h--) {
matrix.push(new Array(w).fill(0));
}
return matrix;
}
function createPiece(type) {
if (type === "I") {
return [
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
];
} else if (type === "L") {
return [
[0, 2, 0],
[0, 2, 0],
[0, 2, 2],
];
} else if (type === "J") {
return [
[0, 3, 0],
[0, 3, 0],
[3, 3, 0],
];
} else if (type === "O") {
return [
[4, 4],
[4, 4],
];
} else if (type === "Z") {
return [
[5, 5, 0],
[0, 5, 5],
[0, 0, 0],
];
} else if (type === "S") {
return [
[0, 6, 6],
[6, 6, 0],
[0, 0, 0],
];
} else if (type === "T") {
return [
[0, 7, 0],
[7, 7, 7],
[0, 0, 0],
];
}
}
function drawMatrix(matrix, offset) {
matrix.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
context.fillStyle = colors[value];
context.fillRect(x + offset.x, y + offset.y, 1, 1);
}
});
});
}
function draw() {
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
drawMatrix(arena, { x: 0, y: 0 });
drawMatrix(player.matrix, player.pos);
}
function merge(arena, player) {
player.matrix.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
arena[y + player.pos.y][x + player.pos.x] = value;
}
});
});
}
function rotate(matrix, dir) {
for (let y = 0; y < matrix.length; ++y) {
for (let x = 0; x < y; ++x) {
[matrix[x][y], matrix[y][x]] = [matrix[y][x], matrix[x][y]];
}
}
if (dir > 0) {
matrix.forEach((row) => row.reverse());
} else {
matrix.reverse();
}
}
function playerDrop() {
player.pos.y++;
if (collide(arena, player)) {
player.pos.y--;
merge(arena, player);
playerReset();
arenaSweep();
updateScore();
}
dropCounter = 0;
}
function playerMove(offset) {
player.pos.x += offset;
if (collide(arena, player)) {
player.pos.x -= offset;
}
}
function playerReset() {
const pieces = "TJLOSZI";
player.matrix = createPiece(pieces[(pieces.length * Math.random()) | 0]);
player.pos.y = 0;
player.pos.x =
((arena[0].length / 2) | 0) - ((player.matrix[0].length / 2) | 0);
if (collide(arena, player)) {
arena.forEach((row) => row.fill(0));
player.score = 0;
updateScore();
}
}
function playerRotate(dir) {
const pos = player.pos.x;
let offset = 1;
rotate(player.matrix, dir);
while (collide(arena, player)) {
player.pos.x += offset;
offset = -(offset + (offset > 0 ? 1 : -1));
if (offset > player.matrix[0].length) {
rotate(player.matrix, -dir);
player.pos.x = pos;
return;
}
}
}
let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;
function update(time = 0) {
const deltaTime = time - lastTime;
dropCounter += deltaTime;
if (dropCounter > dropInterval) {
playerDrop();
}
lastTime = time;
draw();
requestAnimationFrame(update);
}
function updateScore() {
document.getElementById("score").innerText = "Score: " + player.score;
}
document.addEventListener("keydown", (event) => {
if (event.keyCode === 37) {
playerMove(-1);
} else if (event.keyCode === 39) {
playerMove(1);
} else if (event.keyCode === 40) {
playerDrop();
} else if (event.keyCode === 81) {
playerRotate(-1);
} else if (event.keyCode === 87) {
playerRotate(1);
}
});
const colors = [
null,
"#FF0D72",
"#0DC2FF",
"#0DFF72",
"#F538FF",
"#FF8E0D",
"#FFE138",
"#3877FF",
];
const arena = createMatrix(12, 20);
const player = {
pos: { x: 0, y: 0 },
matrix: null,
score: 0,
};
playerReset();
updateScore();
update();
Final output
Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like the Tetris Game. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
In this post, we learn how to create Tetris Game using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
