Horizontal Tetris
In the early versions of my site I had a flash tetris game. Feels good to bring the game back.
tetris.js
// Game constants
const BOARD_WIDTH = 16; // 16:9 ratio
const BOARD_HEIGHT = 9;
const BLOCK_SIZE = 40;
const COLORS = ['#F6D6D6','#F6E6C9','#F6F7C4','#D4F4DD','#A1EEBD','#9CE3D7','#7BD3EA'];
// Rotated Tetromino shapes for horizontal play
const SHAPES = [
// I (rotated)
[
[1, 0, 0, 0],
[1, 0, 0, 0],
[1, 0, 0, 0],
[1, 0, 0, 0]
],
// J (rotated)
[
[0, 1],
[0, 1],
[1, 1]
],
// L (rotated)
[
[1, 0],
[1, 0],
[1, 1]
],
// O (same in both directions)
[
[1, 1],
[1, 1]
],
// S (rotated)
[
[0, 1],
[1, 1],
[1, 0]
],
// T (rotated)
[
[1, 0],
[1, 1],
[1, 0]
],
// Z (rotated)
[
[1, 0],
[1, 1],
[0, 1]
]
];
// Game variables
let canvas = document.getElementById('game-board');
let ctx = canvas.getContext('2d');
let scoreDisplay = document.getElementById('score-display');
let rotateLeftBtn = document.getElementById('rotate-left');
let rotateRightBtn = document.getElementById('rotate-right');
let moveUpBtn = document.getElementById('move-up');
let moveRightBtn = document.getElementById('move-right');
let moveDownBtn = document.getElementById('move-down');
let gameOverScreen = document.getElementById('game-over');
let finalScoreDisplay = document.getElementById('final-score');
let restartButton = document.getElementById('restart-button');
let board = createBoard();
let score = 0;
let currentPiece = null;
let gameOver = false;
let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;
// Initialize the game
function init() {
board = createBoard();
score = 0;
scoreDisplay.textContent = `Score: ${score}`;
gameOver = false;
gameOverScreen.style.display = 'none';
createNewPiece();
update();
}
// Create an empty board
function createBoard() {
return Array.from(Array(BOARD_HEIGHT), () => Array(BOARD_WIDTH).fill(0));
}
// Create a new piece
function createNewPiece() {
const shapeIndex = Math.floor(Math.random() * SHAPES.length);
currentPiece = {
shape: SHAPES[shapeIndex],
color: COLORS[shapeIndex],
x: 0,
y: Math.floor(BOARD_HEIGHT / 2) - Math.floor(SHAPES[shapeIndex].length / 2)
};
// Check if game is over (collision on new piece)
if (checkCollision()) {
gameOver = true;
gameOverScreen.style.display = 'block';
finalScoreDisplay.textContent = `Score: ${score}`;
}
}
// Draw the board
function drawBoard() {
// Clear canvas
ctx.fillStyle = '#111';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw the settled pieces
for (let y = 0; y < BOARD_HEIGHT; y++) {
for (let x = 0; x < BOARD_WIDTH; x++) {
if (board[y][x]) {
drawBlock(x, y, board[y][x]);
}
}
}
// Draw the current piece
if (currentPiece) {
currentPiece.shape.forEach((row, y) => {
row.forEach((value, x) => {
if (value) {
drawBlock(currentPiece.x + x, currentPiece.y + y, currentPiece.color);
}
});
});
}
}
// Draw a single block
function drawBlock(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
ctx.strokeStyle = '#000';
ctx.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
}
// Move the current piece (dx is now for horizontal, dy for vertical)
function movePiece(dx, dy) {
currentPiece.x += dx;
currentPiece.y += dy;
if (checkCollision()) {
currentPiece.x -= dx;
currentPiece.y -= dy;
if (dx > 0) {
// Piece reached right side (equivalent to bottom in vertical tetris)
mergePiece();
clearLines();
createNewPiece();
}
return false;
}
return true;
}
// Rotate the current piece
function rotatePiece(dir) {
const originalShape = currentPiece.shape;
const rows = currentPiece.shape.length;
const cols = currentPiece.shape[0].length;
// Create a new rotated matrix
let newShape = [];
for (let i = 0; i < cols; i++) {
newShape.push(new Array(rows).fill(0));
}
if (dir > 0) {
// Rotate right (clockwise)
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
newShape[x][rows - 1 - y] = currentPiece.shape[y][x];
}
}
} else {
// Rotate left (counter-clockwise)
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
newShape[cols - 1 - x][y] = currentPiece.shape[y][x];
}
}
}
// Apply the rotation
currentPiece.shape = newShape;
// If there's a collision, try wall kicks
if (checkCollision()) {
// Try shifting piece if it collides after rotation
const verticalKicks = [-1, 1, -2, 2];
let success = false;
for (let kick of verticalKicks) {
currentPiece.y += kick;
if (!checkCollision()) {
success = true;
break;
}
currentPiece.y -= kick;
}
// If all wall kicks fail, revert rotation
if (!success) {
currentPiece.shape = originalShape;
}
}
}
// Check for collisions
function checkCollision() {
for (let y = 0; y < currentPiece.shape.length; y++) {
for (let x = 0; x < currentPiece.shape[y].length; x++) {
if (currentPiece.shape[y][x] !== 0 &&
(board[currentPiece.y + y] === undefined ||
board[currentPiece.y + y][currentPiece.x + x] === undefined ||
board[currentPiece.y + y][currentPiece.x + x] !== 0)) {
return true;
}
}
}
return false;
}
// Merge the current piece with the board
function mergePiece() {
currentPiece.shape.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
board[currentPiece.y + y][currentPiece.x + x] = currentPiece.color;
}
});
});
}
// Clear completed vertical lines (for horizontal play)
function clearLines() {
let linesCleared = 0;
// Check each column (instead of rows in traditional Tetris)
for (let x = BOARD_WIDTH - 1; x >= 0; x--) {
let columnFull = true;
for (let y = 0; y < BOARD_HEIGHT; y++) {
if (board[y][x] === 0) {
columnFull = false;
break;
}
}
if (columnFull) {
// Clear this column and shift everything LEFT of it to the RIGHT
for (let y = 0; y < BOARD_HEIGHT; y++) {
for (let shiftX = x; shiftX > 0; shiftX--) {
board[y][shiftX] = board[y][shiftX - 1];
}
board[y][0] = 0; // Clear the leftmost column
}
// Don't decrement x here since we need to check the same position again
linesCleared++;
}
}
// Update score
if (linesCleared > 0) {
score += [0, 10, 25, 50, 125][linesCleared];
scoreDisplay.textContent = `Score: ${score}`;
// Increase speed with score
dropInterval = Math.max(100, 1000 - Math.floor(score / 100) * 50);
}
}
// Game update loop
function update(time = 0) {
if (gameOver) return;
const deltaTime = time - lastTime;
lastTime = time;
dropCounter += deltaTime;
if (dropCounter > dropInterval) {
movePiece(1, 0); // Move right instead of down
dropCounter = 0;
}
drawBoard();
requestAnimationFrame(update);
}
// Event listeners for keyboard
document.addEventListener('keydown', e => {
if (gameOver) return;
switch (e.keyCode) {
case 38: // Up arrow
movePiece(0, -1);
break;
case 40: // Down arrow
movePiece(0, 1);
break;
case 39: // Right arrow
movePiece(1, 0);
break;
case 81: // Q key for rotate left
rotatePiece(-1);
break;
case 69: // E key for rotate right
rotatePiece(1);
break;
}
});
// Mobile touch controls for rotation
rotateLeftBtn.addEventListener('touchstart', e => {
e.preventDefault();
if (!gameOver) rotatePiece(-1);
});
rotateRightBtn.addEventListener('touchstart', e => {
e.preventDefault();
if (!gameOver) rotatePiece(1);
});
// Mobile touch controls for movement
moveUpBtn.addEventListener('touchstart', e => {
e.preventDefault();
if (!gameOver) movePiece(0, -1);
});
moveRightBtn.addEventListener('touchstart', e => {
e.preventDefault();
if (!gameOver) movePiece(1, 0);
});
moveDownBtn.addEventListener('touchstart', e => {
e.preventDefault();
if (!gameOver) movePiece(0, 1);
});
// Mouse controls for rotation
rotateLeftBtn.addEventListener('click', () => {
if (!gameOver) rotatePiece(-1);
});
rotateRightBtn.addEventListener('click', () => {
if (!gameOver) rotatePiece(1);
});
// Mouse controls for movement
moveUpBtn.addEventListener('click', () => {
if (!gameOver) movePiece(0, -1);
});
moveRightBtn.addEventListener('click', () => {
if (!gameOver) movePiece(1, 0);
});
moveDownBtn.addEventListener('click', () => {
if (!gameOver) movePiece(0, 1);
});
// Restart button
restartButton.addEventListener('click', init);
// Start the game
init();
