CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Old School Tetris</title>
<style>
.oldschooltetris7342-body {
font-family: 'Courier New', monospace;
background-color: #000;
color: #0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.oldschooltetris7342-container {
display: flex;
gap: 20px;
}
.oldschooltetris7342-game-area {
border: 2px solid #0f0;
display: grid;
grid-template-columns: repeat(10, 30px);
grid-template-rows: repeat(20, 30px);
}
.oldschooltetris7342-cell {
width: 30px;
height: 30px;
border: 1px solid #030;
}
.oldschooltetris7342-info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.oldschooltetris7342-next-piece {
border: 2px solid #0f0;
display: grid;
grid-template-columns: repeat(4, 20px);
grid-template-rows: repeat(4, 20px);
margin-top: 20px;
}
.oldschooltetris7342-button {
background-color: #0f0;
color: #000;
border: none;
padding: 10px 20px;
margin: 5px 0;
cursor: pointer;
font-family: 'Courier New', monospace;
font-weight: bold;
}
.oldschooltetris7342-description {
margin-top: 20px;
}
.oldschooltetris7342-instructions {
margin-top: 10px;
padding-left: 20px;
}
</style>
</head>
<body class="oldschooltetris7342-body">
<div class="oldschooltetris7342-container">
<div class="oldschooltetris7342-info">
<h1>Old School Tetris</h1>
<div>Score: <span id="score">0</span></div>
<div>Level: <span id="level">1</span></div>
<div>Next Piece:</div>
<div class="oldschooltetris7342-next-piece" id="nextPiece"></div>
<button class="oldschooltetris7342-button" id="startButton">Start</button>
<button class="oldschooltetris7342-button" id="newGameButton">New Game</button>
<button class="oldschooltetris7342-button" id="pauseButton">Pause</button>
<div class="oldschooltetris7342-description">
Classic Tetris game with a retro twist!
</div>
<ul class="oldschooltetris7342-instructions">
<li>Use arrow keys to move pieces</li>
<li>Up arrow to rotate</li>
<li>Space to drop piece instantly</li>
<li>Clear lines to score points</li>
<li>Game speeds up as you level up</li>
</ul>
</div>
<div class="oldschooltetris7342-game-area" id="gameArea"></div>
</div>
<script>
const gameArea = document.getElementById('gameArea');
const nextPieceArea = document.getElementById('nextPiece');
const scoreElement = document.getElementById('score');
const levelElement = document.getElementById('level');
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const pauseButton = document.getElementById('pauseButton');
const ROWS = 20;
const COLS = 10;
let score = 0;
let level = 1;
let gameInterval;
let currentPiece;
let nextPiece;
let gameBoard;
let isGameOver = false;
let isPaused = false;
const SHAPES = [
[[1,1,1,1]],
[[1,1],[1,1]],
[[1,1,1],[0,1,0]],
[[1,1,1],[1,0,0]],
[[1,1,1],[0,0,1]],
[[1,1,0],[0,1,1]],
[[0,1,1],[1,1,0]]
];
const COLORS = ['#00f', '#0ff', '#f0f', '#ff0', '#f00', '#0f0', '#f70'];
function initGame() {
gameBoard = Array(ROWS).fill().map(() => Array(COLS).fill(0));
score = 0;
level = 1;
scoreElement.textContent = score;
levelElement.textContent = level;
createGameArea();
createNextPieceArea();
nextPiece = getRandomPiece();
createNewPiece();
}
function createGameArea() {
gameArea.innerHTML = '';
for (let i = 0; i < ROWS * COLS; i++) {
const cell = document.createElement('div');
cell.classList.add('oldschooltetris7342-cell');
gameArea.appendChild(cell);
}
}
function createNextPieceArea() {
nextPieceArea.innerHTML = '';
for (let i = 0; i < 16; i++) {
const cell = document.createElement('div');
cell.classList.add('oldschooltetris7342-cell');
nextPieceArea.appendChild(cell);
}
}
function getRandomPiece() {
const randomShape = SHAPES[Math.floor(Math.random() * SHAPES.length)];
const color = COLORS[SHAPES.indexOf(randomShape)];
return {shape: randomShape, color: color, row: 0, col: Math.floor(COLS / 2) - Math.floor(randomShape[0].length / 2)};
}
function createNewPiece() {
currentPiece = nextPiece;
nextPiece = getRandomPiece();
drawNextPiece();
if (!canMove(currentPiece.shape, currentPiece.row, currentPiece.col)) {
gameOver();
}
}
function drawNextPiece() {
const cells = nextPieceArea.getElementsByClassName('oldschooltetris7342-cell');
Array.from(cells).forEach(cell => cell.style.backgroundColor = '');
nextPiece.shape.forEach((row, i) => {
row.forEach((cell, j) => {
if (cell) {
cells[i * 4 + j].style.backgroundColor = nextPiece.color;
}
});
});
}
function draw() {
const cells = gameArea.getElementsByClassName('oldschooltetris7342-cell');
gameBoard.forEach((row, i) => {
row.forEach((cell, j) => {
cells[i * COLS + j].style.backgroundColor = cell || '';
});
});
currentPiece.shape.forEach((row, i) => {
row.forEach((cell, j) => {
if (cell) {
cells[(currentPiece.row + i) * COLS + (currentPiece.col + j)].style.backgroundColor = currentPiece.color;
}
});
});
}
function canMove(shape, newRow, newCol) {
return shape.every((row, i) =>
row.every((cell, j) =>
!cell || (
newRow + i >= 0 &&
newRow + i < ROWS &&
newCol + j >= 0 &&
newCol + j < COLS &&
!gameBoard[newRow + i][newCol + j]
)
)
);
}
function rotate(piece) {
const newShape = piece.shape[0].map((_, i) => piece.shape.map(row => row[i]).reverse());
if (canMove(newShape, piece.row, piece.col)) {
piece.shape = newShape;
}
}
function moveDown() {
if (canMove(currentPiece.shape, currentPiece.row + 1, currentPiece.col)) {
currentPiece.row++;
draw();
return true;
}
return false;
}
function hardDrop() {
while(moveDown()) {}
placePiece();
}
function placePiece() {
currentPiece.shape.forEach((row, i) => {
row.forEach((cell, j) => {
if (cell) {
gameBoard[currentPiece.row + i][currentPiece.col + j] = currentPiece.color;
}
});
});
checkLines();
createNewPiece();
draw();
}
function checkLines() {
let linesCleared = 0;
for (let i = ROWS - 1; i >= 0; i--) {
if (gameBoard[i].every(cell => cell)) {
gameBoard.splice(i, 1);
gameBoard.unshift(Array(COLS).fill(0));
linesCleared++;
i++;
}
}
if (linesCleared > 0) {
score += linesCleared * linesCleared * 100;
scoreElement.textContent = score;
if (score >= level * 1000) {
level++;
levelElement.textContent = level;
clearInterval(gameInterval);
gameInterval = setInterval(gameLoop, 1000 - (level * 50));
}
}
}
function gameLoop() {
if (!moveDown()) {
placePiece();
}
}
function gameOver() {
clearInterval(gameInterval);
isGameOver = true;
alert('Game Over! Your score: ' + score);
}
function startGame() {
if (!isGameOver && !isPaused) {
gameInterval = setInterval(gameLoop, 1000 - (level * 50));
startButton.disabled = true;
}
}
function newGame() {
clearInterval(gameInterval);
isGameOver = false;
isPaused = false;
initGame();
startButton.disabled = false;
pauseButton.textContent = 'Pause';
}
function togglePause() {
if (isGameOver) return;
if (isPaused) {
gameInterval = setInterval(gameLoop, 1000 - (level * 50));
pauseButton.textContent = 'Pause';
} else {
clearInterval(gameInterval);
pauseButton.textContent = 'Resume';
}
isPaused = !isPaused;
}
document.addEventListener('keydown', (e) => {
if (isGameOver || isPaused) return;
switch(e.key) {
case 'ArrowLeft':
if (canMove(currentPiece.shape, currentPiece.row, currentPiece.col - 1)) {
currentPiece.col--;
draw();
}
break;
case 'ArrowRight':
if (canMove(currentPiece.shape, currentPiece.row, currentPiece.col + 1)) {
currentPiece.col++;
draw();
}
break;
case 'ArrowDown':
moveDown();
break;
case 'ArrowUp':
rotate(currentPiece);
draw();
break;
case ' ':
hardDrop();
break;
}
});
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', newGame);
pauseButton.addEventListener('click', togglePause);
initGame();
</script>
</body>
</html>