A game that mixes tetris and tetris's game

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

No:12547

116

←

Prev Next

→

A game that mixes tetris and tetris
Developer User3408｜Date and time 23/8/19 16:17:42
Build time 46.973 sec｜Game capacity 8.839KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris Fusion</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="300" height="600"></canvas>

// Representación del tablero de juego
        const board = [];
        for (let row = 0; row < rows; row++) {
            board[row] = [];
            for (let col = 0; col < columns; col++) {
                board[row][col] = 0;
            }
        }

// Representación de las piezas del juego
        const pieces = [
            [[1, 1, 1, 1]],                   // Pieza T
            [[1, 1], [1, 1]],                 // Pieza cuadrada
            [[1, 1, 0], [0, 1, 1]],           // Pieza Z
            [[0, 1, 1], [1, 1, 0]],           // Pieza S
            [[1, 0, 0], [1, 1, 1]],           // Pieza L
            [[0, 0, 1], [1, 1, 1]],           // Pieza J
            [[1, 1, 1], [0, 1, 0]]            // Pieza palo
        ];

// Estado inicial de la pieza actual
        let currentPiece = {
            // Coordenadas iniciales del centro de la pieza
            x: Math.floor(columns / 2) - 1,
            y: 0,
            // Representación de la pieza
            shape: pieces[0],
            // Índice de la pieza actual en el array de piezas
            index: 0
        };

// Función para dibujar un bloque en el canvas
        function drawBlock(x, y, color) {
            context.fillStyle = color;
            context.fillRect(x * blockWidth, y * blockHeight, blockWidth, blockHeight);
            context.strokeStyle = 'black';
            context.strokeRect(x * blockWidth, y * blockHeight, blockWidth, blockHeight);
        }

// Función para dibujar el tablero y las piezas actuales
        function drawBoard() {
            for (let row = 0; row < rows; row++) {
                for (let col = 0; col < columns; col++) {
                    const color = board[row][col] === 0 ? 'white' : 'purple';
                    drawBlock(col, row, color);
                }
            }

drawCurrentPiece();
        }

// Función para dibujar la pieza actual
        function drawCurrentPiece() {
            const { shape, x, y } = currentPiece;
            for (let row = 0; row < shape.length; row++) {
                for (let col = 0; col < shape[row].length; col++) {
                    if (shape[row][col]) {
                        const blockX = x + col;
                        const blockY = y + row;
                        drawBlock(blockX, blockY, 'blue');
                    }
                }
            }
        }

// Función para verificar si una posición es válida en el tablero
        function isValidPosition(row, col, shape) {
            for (let rowOffset = 0; rowOffset < shape.length; rowOffset++) {
                for (let colOffset = 0; colOffset < shape[rowOffset].length; colOffset++) {
                    if (
                        shape[rowOffset][colOffset] &&
                        (row + rowOffset >= rows ||
                            col + colOffset < 0 ||
                            col + colOffset >= columns ||
                            board[row + rowOffset][col + colOffset])
                    ) {
                        return false;
                    }
                }
            }
            return true;
        }

// Función para mover la pieza hacia abajo
        function movePieceDown() {
            if (!gameOver) {
                if (isValidPosition(currentPiece.y + 1, currentPiece.x, currentPiece.shape)) {
                    currentPiece.y++;
                } else {
                    placePiece();
                    checkCompletedRows();
                    generateNewPiece();
                    if (!isValidPosition(currentPiece.y, currentPiece.x, currentPiece.shape)) {
                        gameOver = true;
                    }
                }
            }
        }

// Función para mover la pieza hacia la izquierda
        function movePieceLeft() {
            if (!gameOver) {
                if (isValidPosition(currentPiece.y, currentPiece.x - 1, currentPiece.shape)) {
                    currentPiece.x--;
                }
            }
        }

// Función para mover la pieza hacia la derecha
        function movePieceRight() {
            if (!gameOver) {
                if (isValidPosition(currentPiece.y, currentPiece.x + 1, currentPiece.shape)) {
                    currentPiece.x++;
                }
            }
        }

// Función para rotar la pieza actual
        function rotatePiece() {
            if (!gameOver) {
                const rotatedPiece = [];
                const shape = currentPiece.shape;
                const size = shape.length;
                for (let row = 0; row < size; row++) {
                    rotatedPiece[row] = [];
                    for (let col = 0; col < size; col++) {
                        rotatedPiece[row][col] = shape[size - col - 1][row];
                    }
                }
                if (isValidPosition(currentPiece.y, currentPiece.x, rotatedPiece)) {
                    currentPiece.shape = rotatedPiece;
                }
            }
        }

// Función para colocar la pieza actual en el tablero
        function placePiece() {
            const { shape, x, y } = currentPiece;
            for (let row = 0; row < shape.length; row++) {
                for (let col = 0; col < shape[row].length; col++) {
                    if (shape[row][col]) {
                        const blockX = x + col;
                        const blockY = y + row;
                        if (blockY >= 0) {
                            board[blockY][blockX] = 1;
                        }
                    }
                }
            }
        }

// Función para comprobar si se completaron filas en el tablero
        function checkCompletedRows() {
            let fullRows = 0;
            for (let row = 0; row < rows; row++) {
                if (board[row].every(block => block === 1)) {
                    board.splice(row, 1);
                    board.unshift(Array(columns).fill(0));
                    fullRows++;
                }
            }

if (fullRows > 0) {
                score += fullRows * 10;
            }
        }

// Función para generar una nueva pieza en la parte superior del tablero
        function generateNewPiece() {
            const newIndex = Math.floor(Math.random() * pieces.length);
            currentPiece = {
                x: Math.floor(columns / 2) - 1,
                y: 0,
                shape: pieces[newIndex],
                index: newIndex
            };
        }

// Función para manejar los eventos de teclado
        function handleKeyPress(event) {
            if (!gameOver) {
                if (event.keyCode === 37) { // Flecha izquierda
                    movePieceLeft();
                } else if (event.keyCode === 39) { // Flecha derecha
                    movePieceRight();
                } else if (event.keyCode === 40) { // Flecha abajo
                    movePieceDown();
                } else if (event.keyCode === 38) { // Flecha arriba
                    rotatePiece();
                }
            }
        }

// Función principal del juego
        function gameLoop() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBoard();

if (!gameOver) {
                movePieceDown();
            } else {
                context.fillStyle = 'black';
                context.font = '30px Arial';
                context.fillText('Game Over', 80, canvas.height / 2);
            }

context.fillStyle = 'black';
            context.font = '20px Arial';
            context.fillText('Score: ' + score, 10, 30);

if (!gameOver) {
                requestAnimationFrame(gameLoop);
            }
        }

// Iniciar el juego
        document.addEventListener('keydown', handleKeyPress);
        gameLoop();
    </script>
</body>
</html>