AI game creator

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

No:21036

←

Prev Next

→

Tetris
Developer User9304｜Date and time 23/10/13 1:11:17
Build time 220.938 sec｜Game capacity 10.705KB｜

Script

Claro, aquí tienes un ejemplo básico de un juego de Tetris implementado en un solo archivo HTML:

Puntuación: 0

Este código implementa un juego básico de Tetris utilizando solo HTML y JavaScript dentro de un solo archivo HTML. El juego se adapta a la operación en un smartphone y utiliza pictogramas simples para representar las piezas. Espero que esto te ayude a comenzar con tu juego de Tetris.

←

Prev　Next

→ 　

Back　

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

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

Claro, aquí tienes un ejemplo básico de un juego de Tetris implementado en un solo archivo HTML:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        #gameboard {
            position: relative;
            width: 240px;
            height: 480px;
            border: 1px solid black;
            background-color: #f5f5f5;
        }

.block {
            position: absolute;
            width: 19px;
            height: 19px;
        }

#tetromino {
            width: 38px;
            height: 38px;
        }

.i-piece {
            background-color: cyan;
        }

.j-piece {
            background-color: blue;
        }

.l-piece {
            background-color: orange;
        }

.o-piece {
            background-color: yellow;
        }

.s-piece {
            background-color: green;
        }

.t-piece {
            background-color: purple;
        }

.z-piece {
            background-color: red;
        }

#score {
            text-align: center;
            margin-top: 20px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="gameboard"></div>
    <div id="score">Puntuación: 0</div>

// Definición de las piezas
        var tetrominoes = {
            i: [[1, 1, 1, 1]],
            j: [[1, 1, 1],
                [0, 0, 1]],
            l: [[1, 1, 1],
                [1, 0, 0]],
            o: [[1, 1],
                [1, 1]],
            s: [[0, 1, 1],
                [1, 1, 0]],
            t: [[1, 1, 1],
                [0, 1, 0]],
            z: [[1, 1, 0],
                [0, 1, 1]]
        };

// Variables del juego
        var gameInterval;
        var currentPiece;
        var currentPieceX;
        var currentPieceY;

// Inicio del juego
        function startGame() {
            score = 0;
            scoreText.innerHTML = "Puntuación: " + score;

gameInterval = setInterval(movePieceDown, 1000);

// Generar pieza inicial
            generateNewPiece();
        }

// Generar una nueva pieza aleatoria
        function generateNewPiece() {
            var pieceTypes = Object.keys(tetrominoes);
            var randomPieceType = pieceTypes[Math.floor(Math.random() * pieceTypes.length)];
            var randomPiece = tetrominoes[randomPieceType];

currentPiece = randomPiece;
            currentPieceX = 4;
            currentPieceY = 0;

drawPiece();
        }

// Dibujar la pieza actual en el tablero
        function drawPiece() {
            gameboard.innerHTML = ""; // Limpiar tablero

for (var y = 0; y < currentPiece.length; y++) {
                for (var x = 0; x < currentPiece[y].length; x++) {
                    if (currentPiece[y][x]) {
                        var block = document.createElement('div');
                        block.className = "block " + getPieceClass(currentPiece);
                        block.style.left = (currentPieceX + x) * 20 + "px";
                        block.style.top = (currentPieceY + y) * 20 + "px";
                        gameboard.appendChild(block);
                    }
                }
            }
        }

// Obtener la clase CSS correspondiente a una pieza
        function getPieceClass(piece) {
            if (piece === tetrominoes.i) {
                return "i-piece";
            } else if (piece === tetrominoes.j) {
                return "j-piece";
            } else if (piece === tetrominoes.l) {
                return "l-piece";
            } else if (piece === tetrominoes.o) {
                return "o-piece";
            } else if (piece === tetrominoes.s) {
                return "s-piece";
            } else if (piece === tetrominoes.t) {
                return "t-piece";
            } else if (piece === tetrominoes.z) {
                return "z-piece";
            }
        }

// Mover la pieza hacia abajo
        function movePieceDown() {
            if (canMovePiece(currentPiece, currentPieceX, currentPieceY + 1)) {
                currentPieceY++;
                drawPiece();
            } else {
                placePieceOnBoard();
                clearLines();
            }
        }

// Mover la pieza hacia la izquierda
        function movePieceLeft() {
            if (canMovePiece(currentPiece, currentPieceX - 1, currentPieceY)) {
                currentPieceX--;
                drawPiece();
            }
        }

// Mover la pieza hacia la derecha
        function movePieceRight() {
            if (canMovePiece(currentPiece, currentPieceX + 1, currentPieceY)) {
                currentPieceX++;
                drawPiece();
            }
        }

// Rotar la pieza
        function rotatePiece() {
            var newPiece = transposeMatrix(currentPiece);
            newPiece.reverse();

if (canMovePiece(newPiece, currentPieceX, currentPieceY)) {
                currentPiece = newPiece;
                drawPiece();
            }
        }

// Transponer una matriz
        function transposeMatrix(matrix) {
            return matrix[0].map(function (_, i) {
                return matrix.map(function (row) {
                    return row[i];
                });
            });
        }

// Verificar si una pieza puede moverse a una nueva posición
        function canMovePiece(piece, newX, newY) {
            for (var y = 0; y < piece.length; y++) {
                for (var x = 0; x < piece[y].length; x++) {
                    if (piece[y][x]) {
                        var newXPos = newX + x;
                        var newYPos = newY + y;

if (newXPos < 0 || newXPos >= 10 || newYPos >= 20) {
                            return false; // Mover fuera de los límites del tablero
                        }

if (newYPos >= 0 && gameboard.childNodes.length > 0) {
                            var block = document.querySelector('.block[style="left: ' + newXPos * 20 + 'px; top: ' + newYPos * 20 + 'px;"]');
                            if (block && !isBlockPartOfCurrentPiece(block)) {
                                return false; // Mover a una posición ocupada por otro bloque fijo
                            }
                        }
                    }
                }
            }

return true;
        }

// Verificar si un bloque es parte de la pieza actual
        function isBlockPartOfCurrentPiece(block) {
            for (var y = 0; y < currentPiece.length; y++) {
                for (var x = 0; x < currentPiece[y].length; x++) {
                    if (currentPiece[y][x]) {
                        var blockLeft = parseFloat(block.style.left.replace("px", ""));
                        var blockTop = parseFloat(block.style.top.replace("px", ""));
                        var pieceX = blockLeft / 20;
                        var pieceY = blockTop / 20;

if (pieceX === currentPieceX + x && pieceY === currentPieceY + y) {
                            return true;
                        }
                    }
                }
            }

return false;
        }

// Colocar la pieza actual en el tablero y generar una nueva pieza
        function placePieceOnBoard() {
            for (var y = 0; y < currentPiece.length; y++) {
                for (var x = 0; x < currentPiece[y].length; x++) {
                    if (currentPiece[y][x]) {
                        var block = document.createElement('div');
                        block.className = "block " + getPieceClass(currentPiece);
                        block.style.left = (currentPieceX + x) * 20 + "px";
                        block.style.top = (currentPieceY + y) * 20 + "px";
                        gameboard.appendChild(block);
                    }
                }
            }

generateNewPiece();
        }

// Eliminar líneas completas y aumentar la puntuación
        function clearLines() {
            var linesToClear = [];
            var allBlocks = Array.from(gameboard.getElementsByClassName('block'));

for (var y = 0; y < 20; y++) {
                var lineBlocks = allBlocks.filter(function (block) {
                    return parseFloat(block.style.top.replace("px", "")) / 20 === y;
                });

if (lineBlocks.length === 10) {
                    linesToClear.push(y);
                }
            }

if (linesToClear.length > 0) {
                linesToClear.forEach(function (line) {
                    var lineBlocks = allBlocks.filter(function (block) {
                        return parseFloat(block.style.top.replace("px", "")) / 20 === line;
                    });

lineBlocks.forEach(function (block) {
                        block.remove();
                    });
                });

// Mover bloques por encima de las líneas eliminadas hacia abajo
                allBlocks.forEach(function (block) {
                    var blockTop = parseFloat(block.style.top.replace("px", ""));
                    if (blockTop < linesToClear[0] * 20) {
                        block.style.top = (blockTop + 20) + "px";
                    }
                });

score += linesToClear.length;
                scoreText.innerHTML = "Puntuación: " + score;
            }
        }

// Eventos de teclado
        document.addEventListener('keydown', function (event) {
            switch (event.keyCode) {
                case 37: // Flecha izquierda
                    movePieceLeft();
                    break;
                case 39: // Flecha derecha
                    movePieceRight();
                    break;
                case 40: // Flecha abajo
                    movePieceDown();
                    break;
                case 38: // Flecha arriba (rotar)
                    rotatePiece();
                    break;
            }
        });

// Iniciar juego al cargar la página
        startGame();
    </script>
</body>
</html>
```

Espero que esto te ayude a comenzar con tu juego de Tetris.