Un tetris con físicas de gelatina's game

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

No:12645

←

Prev Next

→

Un tetris con físicas de gelatina
Developer User3408｜Date and time 23/8/21 9:56:55
Build time 32.795 sec｜Game capacity 6.484KB｜

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 Gelatina</title>
	<style>
		canvas {
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas id="tetrisCanvas" width="240" height="400"></canvas>
	
	<script>
		// Pictogramas para las piezas del tetris
		const pictogramas = [
			"🔴", // Pieza roja
			"🟡", // Pieza amarilla
			"🟢", // Pieza verde
			"🔵", // Pieza azul
			"🟣", // Pieza morada
			"🟠", // Pieza naranja
			"🟤"  // Pieza marrón
		];
		
		// Configuración del juego
		const TAMANIO_PIEZA = 20; // Tamaño de la pieza en píxeles
		const COLUMNAS = 10; // Cantidad de columnas en el tablero
		const FILAS = 20; // Cantidad de filas en el tablero
		
		// Colores para cada pieza del tetris
		const colores = [
			"#FF0000", // Rojo
			"#FFFF00", // Amarillo
			"#00FF00", // Verde
			"#0000FF", // Azul
			"#FF00FF", // Morado
			"#FFA500", // Naranja
			"#A52A2A"  // Marrón
		];
		
		// Matriz que representa el tablero del tetris
		const tablero = [];
		for (let fila = 0; fila < FILAS; fila++) {
			tablero[fila] = [];
			for (let columna = 0; columna < COLUMNAS; columna++) {
				tablero[fila][columna] = "";
			}
		}
		
		// Pieza actual en el juego
		let piezaActual = {
			figura: null,
			x: 0,
			y: 0
		};
		
		// Función para generar una nueva pieza al azar
		function generarNuevaPieza() {
			const indice = Math.floor(Math.random() * pictogramas.length);
			const nuevaPieza = {
				figura: pictogramas[indice],
				x: Math.floor((COLUMNAS - 1) / 2),
				y: 0
			};
			piezaActual = nuevaPieza;
		}
		
		// Función para dibujar el tablero y las piezas
		function dibujar() {
			const canvas = document.getElementById("tetrisCanvas");
			const ctx = canvas.getContext("2d");
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			// Dibujar el tablero
			for (let fila = 0; fila < FILAS; fila++) {
				for (let columna = 0; columna < COLUMNAS; columna++) {
					ctx.fillStyle = tablero[fila][columna] !== "" ? colores[pictogramas.indexOf(tablero[fila][columna])] : "#FFFFFF";
					ctx.fillRect(columna * TAMANIO_PIEZA, fila * TAMANIO_PIEZA, TAMANIO_PIEZA, TAMANIO_PIEZA);
					ctx.strokeStyle = "#000000";
					ctx.strokeRect(columna * TAMANIO_PIEZA, fila * TAMANIO_PIEZA, TAMANIO_PIEZA, TAMANIO_PIEZA);
				}
			}
			
			// Dibujar la pieza actual
			ctx.fillStyle = colores[pictogramas.indexOf(piezaActual.figura)];
			for (let fila = 0; fila < piezaActual.figura.length; fila++) {
				for (let columna = 0; columna < piezaActual.figura.length; columna++) {
					if (piezaActual.figura[fila][columna] !== "") {
						ctx.fillRect((piezaActual.x + columna) * TAMANIO_PIEZA, (piezaActual.y + fila) * TAMANIO_PIEZA, TAMANIO_PIEZA, TAMANIO_PIEZA);
						ctx.strokeStyle = "#000000";
						ctx.strokeRect((piezaActual.x + columna) * TAMANIO_PIEZA, (piezaActual.y + fila) * TAMANIO_PIEZA, TAMANIO_PIEZA, TAMANIO_PIEZA);
					}
				}
			}
		}
		
		// Función para mover la pieza actual hacia abajo
		function moverAbajo() {
			piezaActual.y++;
			if (colision()) {
				piezaActual.y--;
				fijarPieza();
				eliminarFilasCompletas();
				generarNuevaPieza();
				if (colision()) {
					// El juego ha terminado
					alert("¡Game Over!");
					location.reload();
				}
			}
		}
		
		// Función para mover la pieza actual a la izquierda
		function moverIzquierda() {
			piezaActual.x--;
			if (colision()) {
				piezaActual.x++;
			}
		}
		
		// Función para mover la pieza actual a la derecha
		function moverDerecha() {
			piezaActual.x++;
			if (colision()) {
				piezaActual.x--;
			}
		}
		
		// Función para rotar la pieza actual
		function rotar() {
			const figuraOriginal = piezaActual.figura;
			const figuraRotada = [];
			for (let fila = 0; fila < figuraOriginal.length; fila++) {
				figuraRotada[fila] = [];
				for (let columna = 0; columna < figuraOriginal.length; columna++) {
					figuraRotada[fila][columna] = figuraOriginal[figuraOriginal.length - columna - 1][fila];
				}
			}
			piezaActual.figura = figuraRotada;
			if (colision()) {
				piezaActual.figura = figuraOriginal;
			}
		}
		
		// Función para comprobar si hay colisión
		function colision() {
			const figura = piezaActual.figura;
			const x = piezaActual.x;
			const y = piezaActual.y;
			for (let fila = 0; fila < figura.length; fila++) {
				for (let columna = 0; columna < figura.length; columna++) {
					if (figura[fila][columna] !== "") {
						if (y + fila >= FILAS || x + columna < 0 || x + columna >= COLUMNAS || tablero[y + fila][x + columna] !== "") {
							return true;
						}
					}
				}
			}
			return false;
		}
		
		// Función para fijar la pieza actual en el tablero
		function fijarPieza() {
			const figura = piezaActual.figura;
			const x = piezaActual.x;
			const y = piezaActual.y;
			for (let fila = 0; fila < figura.length; fila++) {
				for (let columna = 0; columna < figura.length; columna++) {
					if (figura[fila][columna] !== "") {
						tablero[y + fila][x + columna] = figura[fila][columna];
					}
				}
			}
		}
		
		// Función para eliminar las filas completas
		function eliminarFilasCompletas() {
			let filasCompletas = 0;
			for (let fila = 0; fila < FILAS; fila++) {
				let filaCompleta = true;
				for (let columna = 0; columna < COLUMNAS; columna++) {
					if (tablero[fila][columna] === "") {
						filaCompleta = false;
						break;
					}
				}
				if (filaCompleta) {
					tablero.splice(fila, 1);
					tablero.unshift([]);
					for (let columna = 0; columna < COLUMNAS; columna++) {
						tablero[0][columna] = "";
					}
					filasCompletas++;
				}
			}
			if (filasCompletas > 0) {
				// Aumentar la puntuación o realizar alguna otra acción
			}
		}
		
		// Manejadores de eventos para el control del juego en dispositivos móviles
		window.addEventListener("keydown", function(event) {
			switch (event.key) {
				case "ArrowUp":
				case "w":
				case "W":
					rotar();
					break;
				case "ArrowDown":
				case "s":
				case "S":
					moverAbajo();
					break;
				case "ArrowLeft":
				case "a":
				case "A":
					moverIzquierda();
					break;
				case "ArrowRight":
				case "d":
				case "D":
					moverDerecha();
					break;
			}
			dibujar();
		});
		
		// Función de inicio
		function iniciarJuego() {
			generarNuevaPieza();
			setInterval(function() {
				moverAbajo();
				dibujar();
			}, 1000);
		}
		
		// Iniciar el juego al cargar la página
		document.addEventListener("DOMContentLoaded", function() {
			iniciarJuego();
		});
	</script>
</body>
</html>