A Kirby game where kirby is in tetris's game

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

No:10727

102

←

Prev Next

→

A Kirby game where kirby is in tetris
Developer User3408｜Date and time 23/8/2 9:42:55
Build time 56.121 sec｜Game capacity 7.94KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego de Kirby Tetris</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // Definir las dimensiones del juego
        const canvasWidth = 10;
        const canvasHeight = 20;
        const blockSize = 30;

// Cargar las imágenes
        const kirbyImage = new Image();
        kirbyImage.src = "kirby.png";
        const blockImage = new Image();
        blockImage.src = "block.png";

// Definir las piezas del tetris
        const tetrominoes = [
            // Forma I
            [
                [1, 1, 1, 1]
            ],
            // Forma J
            [
                [1, 0, 0],
                [1, 1, 1]
            ],
            // Forma L
            [
                [0, 0, 1],
                [1, 1, 1]
            ],
            // Forma O
            [
                [1, 1],
                [1, 1]
            ],
            // Forma S
            [
                [0, 1, 1],
                [1, 1, 0]
            ],
            // Forma T
            [
                [0, 1, 0],
                [1, 1, 1]
            ],
            // Forma Z
            [
                [1, 1, 0],
                [0, 1, 1]
            ]
        ];

// Variables del juego
        let canvas, ctx;
        let kirbyX, kirbyY;
        let currentTetromino, currentTetrominoColor;
        let grid;

// Inicializar el juego
        function init() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            canvas.width = canvasWidth * blockSize;
            canvas.height = canvasHeight * blockSize;

kirbyX = 3;
            kirbyY = 0;
            currentTetromino = getRandomTetromino();
            currentTetrominoColor = getRandomColor();

grid = [];
            for (let row = 0; row < canvasHeight; row++) {
                grid[row] = [];
                for (let col = 0; col < canvasWidth; col++) {
                    grid[row][col] = "white";
                }
            }

setInterval(gameLoop, 500);
        }

// Función principal del juego
        function gameLoop() {
            draw();
            update();
        }

// Dibujar el juego en el canvas
        function draw() {
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

for (let row = 0; row < canvasHeight; row++) {
                for (let col = 0; col < canvasWidth; col++) {
                    drawBlock(col, row, grid[row][col]);
                }
            }

drawKirby();
            drawTetromino();
        }

// Dibujar un bloque en una posición específica
        function drawBlock(x, y, color) {
            ctx.drawImage(blockImage, x * blockSize, y * blockSize, blockSize, blockSize);
            ctx.fillStyle = color;
            ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
        }

// Dibujar Kirby
        function drawKirby() {
            ctx.drawImage(kirbyImage, kirbyX * blockSize, kirbyY * blockSize, blockSize, blockSize);
        }

// Dibujar el tetromino actual
        function drawTetromino() {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        let blockX = kirbyX + col;
                        let blockY = kirbyY + row;
                        drawBlock(blockX, blockY, currentTetrominoColor);
                    }
                }
            }
        }

// Actualizar el estado del juego
        function update() {
            if (canMoveDown()) {
                kirbyY++;
            } else {
                mergeTetromino();
                clearLines();
                spawnNewTetromino();
            }
        }

// Verificar si Kirby puede moverse hacia abajo
        function canMoveDown() {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        let nextRow = kirbyY + row + 1;
                        if (nextRow >= canvasHeight || grid[nextRow][kirbyX + col] !== "white") {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

// Unir el tetromino actual a la cuadrícula
        function mergeTetromino() {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        let blockX = kirbyX + col;
                        let blockY = kirbyY + row;
                        grid[blockY][blockX] = currentTetrominoColor;
                    }
                }
            }
        }

// Limpiar líneas completas de la cuadrícula
        function clearLines() {
            for (let row = canvasHeight - 1; row >= 0; row--) {
                let isRowFull = grid[row].every(block => block !== "white");
                if (isRowFull) {
                    grid.splice(row, 1);
                    grid.unshift(new Array(canvasWidth).fill("white"));
                }
            }
        }

// Generar un tetromino aleatorio
        function getRandomTetromino() {
            const randomIndex = Math.floor(Math.random() * tetrominoes.length);
            return tetrominoes[randomIndex];
        }

// Generar un color aleatorio
        function getRandomColor() {
            const colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF", "#FFA500"];
            const randomIndex = Math.floor(Math.random() * colors.length);
            return colors[randomIndex];
        }

// Manejar los eventos del teclado
        document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowLeft" && canMoveLeft()) {
                kirbyX--;
            } else if (event.key === "ArrowRight" && canMoveRight()) {
                kirbyX++;
            } else if (event.key === "ArrowDown") {
                while (canMoveDown()) {
                    kirbyY++;
                }
            }
        });

// Verificar si Kirby puede moverse hacia la izquierda
        function canMoveLeft() {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        let nextCol = kirbyX + col - 1;
                        if (nextCol < 0 || grid[kirbyY + row][nextCol] !== "white") {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

// Verificar si Kirby puede moverse hacia la derecha
        function canMoveRight() {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        let nextCol = kirbyX + col + 1;
                        if (nextCol >= canvasWidth || grid[kirbyY + row][nextCol] !== "white") {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

// Iniciar el juego
        init();
    </script>
</body>
</html>