Telegram Group Join Now
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.
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
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.