AI game creator

Click here for free DL of the app version that can save data.

No:10706

←

Prev Next

→

A two-sided Tetris
Developer User3408｜Date and time 23/8/2 6:11:19
Build time 59.646 sec｜Game capacity 5.821KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>Tetris de Dos Caras</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="tetrisCanvas" width="240" height="400"></canvas>

// Definir las formas de las piezas de Tetris
	const SHAPES = [
	  [[1, 1, 1, 1]], // I
	  [[1, 1], [1, 1]], // O
	  [[1, 1, 0], [0, 1, 1]], // Z
	  [[0, 1, 1], [1, 1, 0]], // S
	  [[1, 1, 1], [0, 1, 0]], // T
	  [[1, 1, 1], [0, 0, 1]], // L
	  [[1, 1, 1], [1, 0, 0]] // J
	];

// Definir los colores de las piezas de Tetris
	const COLORS = [
	  'cyan', 'yellow', 'red', 'green', 'purple', 'orange', 'blue'
	];

// Obtener el canvas y su contexto
	const canvas = document.getElementById('tetrisCanvas');
	const ctx = canvas.getContext('2d');

// Definir la estructura del tablero
	let board = [];
	for (let row = 0; row < ROWS; row++) {
	  board[row] = [];
	  for (let col = 0; col < COLS; col++) {
	    board[row][col] = '';
	  }
	}

// Definir la pieza actual y su posición
	let currentPiece;
	let currentPieceRow;
	let currentPieceCol;
	let currentPieceColor;

// Función para obtener una pieza aleatoria
	function getRandomPiece() {
	  const randomIndex = Math.floor(Math.random() * SHAPES.length);
	  const shape = SHAPES[randomIndex];
	  const color = COLORS[randomIndex];
	  return { shape, color };
	}

// Función para dibujar el tablero y las piezas
	function draw() {
	  ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar el tablero
	  for (let row = 0; row < ROWS; row++) {
	    for (let col = 0; col < COLS; col++) {
	      if (board[row][col]) {
	        ctx.fillStyle = board[row][col];
	        ctx.fillRect(col * CELL_SIZE, row * CELL_SIZE, CELL_SIZE, CELL_SIZE);
	      }
	    }
	  }

// Dibujar la pieza actual
	  if (currentPiece) {
	    for (let row = 0; row < currentPiece.shape.length; row++) {
	      for (let col = 0; col < currentPiece.shape[row].length; col++) {
	        if (currentPiece.shape[row][col]) {
	          ctx.fillStyle = currentPiece.color;
	          ctx.fillRect((currentPieceCol + col) * CELL_SIZE, (currentPieceRow + row) * CELL_SIZE, CELL_SIZE, CELL_SIZE);
	        }
	      }
	    }
	  }
	}

// Función para verificar si la pieza puede moverse a la posición deseada
	function canMovePiece(rowOffset, colOffset) {
	  for (let row = 0; row < currentPiece.shape.length; row++) {
	    for (let col = 0; col < currentPiece.shape[row].length; col++) {
	      if (currentPiece.shape[row][col]) {
	        const newRow = currentPieceRow + row + rowOffset;
	        const newCol = currentPieceCol + col + colOffset;

if (newRow < 0 || newRow >= ROWS || newCol < 0 || newCol >= COLS || board[newRow][newCol]) {
	          return false;
	        }
	      }
	    }
	  }

return true;
	}

// Función para mover la pieza hacia abajo
	function movePieceDown() {
	  if (canMovePiece(1, 0)) {
	    currentPieceRow++;
	  } else {
	    placePiece();
	    clearRows();
	    spawnNewPiece();
	  }
	}

// Función para mover la pieza hacia la izquierda
	function movePieceLeft() {
	  if (canMovePiece(0, -1)) {
	    currentPieceCol--;
	  }
	}

// Función para mover la pieza hacia la derecha
	function movePieceRight() {
	  if (canMovePiece(0, 1)) {
	    currentPieceCol++;
	  }
	}

// Función para rotar la pieza
	function rotatePiece() {
	  const originalShape = currentPiece.shape;
	  const rotatedShape = [];
	  const shapeSize = currentPiece.shape.length;

for (let row = 0; row < shapeSize; row++) {
	    rotatedShape[row] = [];
	    for (let col = 0; col < shapeSize; col++) {
	      rotatedShape[row][col] = currentPiece.shape[col][shapeSize - 1 - row];
	    }
	  }

currentPiece.shape = rotatedShape;

if (!canMovePiece(0, 0)) {
	    currentPiece.shape = originalShape;
	  }
	}

// Función para fijar la pieza en el tablero
	function placePiece() {
	  for (let row = 0; row < currentPiece.shape.length; row++) {
	    for (let col = 0; col < currentPiece.shape[row].length; col++) {
	      if (currentPiece.shape[row][col]) {
	        board[currentPieceRow + row][currentPieceCol + col] = currentPiece.color;
	      }
	    }
	  }
	}

// Función para eliminar las filas completas
	function clearRows() {
	  for (let row = 0; row < ROWS; row++) {
	    if (board[row].every(cell => cell !== '')) {
	      board.splice(row, 1);
	      board.unshift(Array(COLS).fill(''));
	    }
	  }
	}

// Función para iniciar el juego
	function startGame() {
	  board = [];
	  for (let row = 0; row < ROWS; row++) {
	    board[row] = [];
	    for (let col = 0; col < COLS; col++) {
	      board[row][col] = '';
	    }
	  }

spawnNewPiece();

setInterval(() => {
	    movePieceDown();
	    draw();
	  }, 1000 / 2);
	}

// Función para generar una nueva pieza
	function spawnNewPiece() {
	  const { shape, color } = getRandomPiece();
	  currentPiece = { shape, color };

currentPieceRow = 0;
	  currentPieceCol = Math.floor(COLS / 2) - Math.floor(shape.length / 2);
	  currentPieceColor = color;

if (!canMovePiece(0, 0)) {
	    gameOver();
	  }
	}

// Función para finalizar el juego
	function gameOver() {
	  alert('¡Juego terminado! Puntuación: ??'); // Puedes implementar la puntuación si lo deseas
	  startGame();
	}

// Funciones para manejar los eventos de teclado
	function handleKeyDown(event) {
	  switch (event.keyCode) {
	    case 37: // Left arrow
	      movePieceLeft();
	      break;
	    case 39: // Right arrow
	      movePieceRight();
	      break;
	    case 40: // Down arrow
	      movePieceDown();
	      break;
	    case 38: // Up arrow
	      rotatePiece();
	      break;
	  }
	}

document.addEventListener('keydown', handleKeyDown);

startGame();
	</script>
</body>
</html>