A Kirby game where kirby is in tetris's game

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

No:10726

102

←

Prev Next

→

A Kirby game where kirby is in tetris
Developer User3408｜Date and time 23/8/2 9:41:39
Build time 60.928 sec｜Game capacity 9.274KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Juego de Kirby Tetris</title>
    <style>
        #game-board {
            width: 250px;
            height: 500px;
            border: 1px solid black;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Pictogramas utilizados
        const kirby = '👾';
        const block = '🧱';

// Tamaño del tablero y Tetriminos (bloques)
        const boardWidth = 10;
        const boardHeight = 20;
        const tetriminos = [
            [[1, 1, 1, 1]],                          // I
            [[1, 1], [1, 1]],                        // O
            [[1, 0], [1, 1], [0, 1]],                // S
            [[0, 1], [1, 1], [1, 0]],                // Z
            [[1, 1, 1], [0, 1, 0]],                  // T
            [[1, 1, 0], [0, 1, 1]],                  // L
            [[0, 1, 1], [1, 1, 0]]                   // J
        ];

// Lógica del juego
        const game = {
            board: [],
            currTetrimino: null,
            currX: 0,
            currY: 0,
            gameOver: false,
            score: 0,
      
            // Inicialización del juego
            init() {
                for (let row = 0; row < boardHeight; row++) {
                    game.board[row] = [];
                    for (let col = 0; col < boardWidth; col++) {
                        game.board[row][col] = '';
                    }
                }
          
                game.newTetrimino();
                game.drawBoard();
                game.inputListener();
                game.update();
            },
          
            // Genera un nuevo Tetrimino aleatorio
            newTetrimino() {
                const rand = Math.floor(Math.random() * tetriminos.length);
                game.currTetrimino = { shape: tetriminos[rand], x: 0, y: 0 };
            },
          
            // Lógica para mover el Tetrimino hacia abajo
            moveDown() {
                if (!game.collision(0, 1, game.currTetrimino.shape)) {
                    game.currY++;
                } else {
                    game.mergeTetrimino();
                    game.checkTetris();
                    game.newTetrimino();
          
                    if (game.collision(0, 0, game.currTetrimino.shape)) {
                        game.gameOver = true;
                        alert('¡Fin del juego! Puntuación: ' + game.score);
                        return;
                    }
                }
          
                game.drawBoard();
                setTimeout(game.moveDown, 1000);
            },
          
            // Lógica para mover el Tetrimino hacia la izquierda
            moveLeft() {
                if (!game.collision(-1, 0, game.currTetrimino.shape)) {
                    game.currX--;
                    game.drawBoard();
                }
            },
          
            // Lógica para mover el Tetrimino hacia la derecha
            moveRight() {
                if (!game.collision(1, 0, game.currTetrimino.shape)) {
                    game.currX++;
                    game.drawBoard();
                }
            },
          
            // Lógica para rotar el Tetrimino
            rotate() {
                const rotated = game.rotateTetrimino(game.currTetrimino.shape);
          
                if (!game.collision(0, 0, rotated)) {
                    game.currTetrimino.shape = rotated;
                    game.drawBoard();
                }
            },
          
            // Combinar el Tetrimino actual con el tablero
            mergeTetrimino() {
                const shape = game.currTetrimino.shape;
          
                for (let row = 0; row < shape.length; row++) {
                    for (let col = 0; col < shape[row].length; col++) {
                        if (shape[row][col]) {
                            const tetriminoRow = row + game.currY;
                            const tetriminoCol = col + game.currX;
                            game.board[tetriminoRow][tetriminoCol] = kirby;
                        }
                    }
                }
            },
          
            // Verificar si se ha formado una fila completa y eliminarla
            checkTetris() {
                let completedRows = 0;
          
                outer: for (let row = boardHeight - 1; row >= 0; row--) {
                    for (let col = 0; col < boardWidth; col++) {
                        if (game.board[row][col] === '') {
                            continue outer;
                        }
                    }
          
                    // Mover todas las filas superiores hacia abajo
                    for (let y = row; y > 0; y--) {
                        for (let col = 0; col < boardWidth; col++) {
                            game.board[y][col] = game.board[y - 1][col];
                        }
                    }
          
                    // Limpiar la primera fila
                    for (let col = 0; col < boardWidth; col++) {
                        game.board[0][col] = '';
                    }
          
                    completedRows++;
                }
          
                // Actualizar la puntuación según las filas completas
                if (completedRows > 0) {
                    game.score += completedRows * 10;
                }
            },
          
            // Detener la caída del Tetrimino si hay colisión
            collision(dx, dy, shape) {
                for (let row = 0; row < shape.length; row++) {
                    for (let col = 0; col < shape[row].length; col++) {
                        if (!shape[row][col]) {
                            continue;
                        }
          
                        const tetriminoX = col + game.currX + dx;
                        const tetriminoY = row + game.currY + dy;
          
                        if (
                            tetriminoX < 0 ||
                            tetriminoX >= boardWidth ||
                            tetriminoY >= boardHeight ||
                            game.board[tetriminoY][tetriminoX]
                        ) {
                            return true;
                        }
                    }
                }
                return false;
            },
          
            // Rotar el Tetrimino actual
            rotateTetrimino(shape) {
                const rotatedShape = [];
                const rows = shape.length;
                const cols = shape[0].length;
          
                for (let col = 0; col < cols; col++) {
                    rotatedShape[col] = [];
                    for (let row = 0; row < rows; row++) {
                        rotatedShape[col][row] = shape[rows - row - 1][col];
                    }
                }
          
                return rotatedShape;
            },
          
            // Dibujar el tablero y el Tetrimino actual
            drawBoard() {
                const boardContainer = document.getElementById('game-board');
                let html = '';
          
                for (let row = 0; row < boardHeight; row++) {
                    for (let col = 0; col < boardWidth; col++) {
                        const cellContent = game.board[row][col] ? kirby : block;
                        html += `<span>${cellContent}</span>`;
                    }
                    html += '<br>';
                }
          
                for (let row = 0; row < game.currTetrimino.shape.length; row++) {
                    for (let col = 0; col < game.currTetrimino.shape[row].length; col++) {
                        if (game.currTetrimino.shape[row][col]) {
                            const tetriminoRow = row + game.currY;
                            const tetriminoCol = col + game.currX;
                            const tetriminoCell = game.board[tetriminoRow][tetriminoCol];
                            if (!tetriminoCell) {
                                html += `<span>${kirby}</span>`;
                            }
                        }
                    }
                    html += '<br>';
                }
          
                boardContainer.innerHTML = html;
            },
          
            // Listeners para las teclas del juego
            inputListener() {
                document.addEventListener('keydown', function (event) {
                    if (event.keyCode === 37) { // Izquierda
                        game.moveLeft();
                    } else if (event.keyCode === 39) { // Derecha
                        game.moveRight();
                    } else if (event.keyCode === 40) { // Abajo
                        game.moveDown();
                    } else if (event.keyCode === 38) { // Arriba (rotar)
                        game.rotate();
                    }
                });
            },
          
            // Actualiza el estado del juego
            update() {
                if (!game.gameOver) {
                    game.moveDown();
                }
            }
        };

game.init();
    </script>
</body>
</html>