Changed around line 1
+ class Tetris {
+ constructor() {
+ this.board = Array(20).fill().map(() => Array(10).fill(0));
+ this.score = 0;
+ this.level = 1;
+ this.lines = 0;
+ this.gameBoard = document.getElementById('game-board');
+ this.nextPiecePreview = document.getElementById('next-piece-preview');
+ this.isPaused = false;
+ this.isGameOver = false;
+
+ this.pieces = [
+ [[1,1,1,1]], // I
+ [[1,1,1],[0,1,0]], // T
+ [[1,1,1],[1,0,0]], // L
+ [[1,1,1],[0,0,1]], // J
+ [[1,1],[1,1]], // O
+ [[1,1,0],[0,1,1]], // S
+ [[0,1,1],[1,1,0]] // Z
+ ];
+
+ this.currentPiece = null;
+ this.currentPiecePosition = {x: 0, y: 0};
+ this.nextPiece = null;
+
+ this.initializeGame();
+ this.bindControls();
+ }
+
+ initializeGame() {
+ this.createBoard();
+ this.nextPiece = this.getRandomPiece();
+ this.spawnNewPiece();
+ }
+
+ createBoard() {
+ this.gameBoard.innerHTML = '';
+ for (let i = 0; i < 200; i++) {
+ const cell = document.createElement('div');
+ cell.classList.add('cell');
+ this.gameBoard.appendChild(cell);
+ }
+ }
+
+ getRandomPiece() {
+ return this.pieces[Math.floor(Math.random() * this.pieces.length)];
+ }
+
+ spawnNewPiece() {
+ this.currentPiece = this.nextPiece;
+ this.nextPiece = this.getRandomPiece();
+ this.currentPiecePosition = {
+ x: Math.floor((10 - this.currentPiece[0].length) / 2),
+ y: 0
+ };
+ this.updateDisplay();
+ this.updateNextPiecePreview();
+ }
+
+ updateDisplay() {
+ const cells = this.gameBoard.children;
+ // Clear board
+ for (let y = 0; y < 20; y++) {
+ for (let x = 0; x < 10; x++) {
+ cells[y * 10 + x].style.backgroundColor =
+ this.board[y][x] ? '#3498db' : '#95a5a6';
+ }
+ }
+ // Draw current piece
+ this.currentPiece.forEach((row, y) => {
+ row.forEach((cell, x) => {
+ if (cell) {
+ const boardX = this.currentPiecePosition.x + x;
+ const boardY = this.currentPiecePosition.y + y;
+ if (boardY >= 0 && boardY < 20 && boardX >= 0 && boardX < 10) {
+ cells[boardY * 10 + boardX].style.backgroundColor = '#e74c3c';
+ }
+ }
+ });
+ });
+ }
+
+ updateNextPiecePreview() {
+ // Implementation for next piece preview
+ }
+
+ moveLeft() {
+ this.currentPiecePosition.x--;
+ if (this.checkCollision()) {
+ this.currentPiecePosition.x++;
+ }
+ this.updateDisplay();
+ }
+
+ moveRight() {
+ this.currentPiecePosition.x++;
+ if (this.checkCollision()) {
+ this.currentPiecePosition.x--;
+ }
+ this.updateDisplay();
+ }
+
+ moveDown() {
+ this.currentPiecePosition.y++;
+ if (this.checkCollision()) {
+ this.currentPiecePosition.y--;
+ this.lockPiece();
+ this.clearLines();
+ this.spawnNewPiece();
+ if (this.checkCollision()) {
+ this.gameOver();
+ }
+ }
+ this.updateDisplay();
+ }
+
+ rotate() {
+ const rotated = this.currentPiece[0].map((_, i) =>
+ this.currentPiece.map(row => row[i]).reverse()
+ );
+ const previousPiece = this.currentPiece;
+ this.currentPiece = rotated;
+ if (this.checkCollision()) {
+ this.currentPiece = previousPiece;
+ }
+ this.updateDisplay();
+ }
+
+ checkCollision() {
+ return this.currentPiece.some((row, y) =>
+ row.some((cell, x) => {
+ if (!cell) return false;
+ const boardX = this.currentPiecePosition.x + x;
+ const boardY = this.currentPiecePosition.y + y;
+ return boardX < 0 || boardX >= 10 || boardY >= 20 ||
+ (boardY >= 0 && this.board[boardY][boardX]);
+ })
+ );
+ }
+
+ lockPiece() {
+ this.currentPiece.forEach((row, y) => {
+ row.forEach((cell, x) => {
+ if (cell) {
+ const boardY = this.currentPiecePosition.y + y;
+ const boardX = this.currentPiecePosition.x + x;
+ if (boardY >= 0 && boardY < 20 && boardX >= 0 && boardX < 10) {
+ this.board[boardY][boardX] = 1;
+ }
+ }
+ });
+ });
+ }
+
+ clearLines() {
+ let linesCleared = 0;
+ for (let y = 19; y >= 0; y--) {
+ if (this.board[y].every(cell => cell === 1)) {
+ this.board.splice(y, 1);
+ this.board.unshift(Array(10).fill(0));
+ linesCleared++;
+ y++;
+ }
+ }
+ if (linesCleared > 0) {
+ this.updateScore(linesCleared);
+ }
+ }
+
+ updateScore(linesCleared) {
+ const points = [40, 100, 300, 1200];
+ this.score += points[linesCleared - 1] * this.level;
+ this.lines += linesCleared;
+ this.level = Math.floor(this.lines / 10) + 1;
+
+ document.getElementById('score').textContent = this.score;
+ document.getElementById('level').textContent = this.level;
+ document.getElementById('lines').textContent = this.lines;
+ }
+
+ bindControls() {
+ document.addEventListener('keydown', (e) => {
+ if (this.isPaused || this.isGameOver) return;
+
+ switch(e.key) {
+ case 'ArrowLeft':
+ this.moveLeft();
+ break;
+ case 'ArrowRight':
+ this.moveRight();
+ break;
+ case 'ArrowDown':
+ this.moveDown();
+ break;
+ case 'ArrowUp':
+ this.rotate();
+ break;
+ case ' ':
+ while (!this.checkCollision()) {
+ this.moveDown();
+ }
+ break;
+ case 'p':
+ this.togglePause();
+ break;
+ }
+ });
+
+ document.getElementById('start-btn').addEventListener('click', () => {
+ this.startGame();
+ });
+
+ document.getElementById('pause-btn').addEventListener('click', () => {
+ this.togglePause();
+ });
+ }
+
+ startGame() {
+ if (!this.gameInterval) {
+ this.gameInterval = setInterval(() => {
+ if (!this.isPaused && !this.isGameOver) {
+ this.moveDown();
+ }
+ }, 1000 - (this.level - 1) * 50);
+ }
+ }
+
+ togglePause() {
+ this.isPaused = !this.isPaused;
+ document.getElementById('pause-btn').textContent =
+ this.isPaused ? 'Resume' : 'Pause';
+ }
+
+ gameOver() {
+ this.isGameOver = true;
+ clearInterval(this.gameInterval);
+ alert(`Game Over! Score: ${this.score}`);
+ }
+ }
+
+ document.addEventListener('DOMContentLoaded', () => {
+ const game = new Tetris();
+ });
