Un juego simple que se traté lo mismo que tetris's game

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

No:40452

←

Prev Next

→

Un juego simple que se traté lo mismo que tetris
Developer User18058｜Date and time 24/2/2 22:32:50
Build time 34.415 sec｜Game capacity 8.047KB｜

Script

Por supuesto, aquí tienes un ejemplo de un juego simple que se asemeja a Tetris, implementado en un solo archivo HTML y usando JavaScript:

Este juego tiene una mecánica similar a Tetris. Debes usar las flechas del teclado para mover y rotar las piezas mientras caen hacia abajo. El objetivo es llenar líneas completas con las piezas para eliminarlas y ganar puntos. Si la pila de piezas alcanza la parte superior del tablero, el juego termina. Espero que esto sea lo que estabas buscando. ¡Diviértete jugando!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Por supuesto, aquí tienes un ejemplo de un juego simple que se asemeja a Tetris, implementado en un solo archivo HTML y usando JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tetris</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="240" height="400"></canvas>

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

// Definición de las piezas
        const pieces = [
            [[1, 1, 1, 1]],   // I
            [[1, 1], [1, 1]], // O
            [[1, 1, 0], [0, 1, 1]],  // S
            [[0, 1, 1], [1, 1, 0]],  // Z
            [[1, 1, 1], [0, 1, 0]],  // T
            [[1, 1, 1], [0, 0, 1]],  // L
            [[1, 1, 1], [1, 0, 0]]   // J
        ];

// Definición de colores para las piezas
        const colors = ['cyan', 'yellow', 'green', 'red', 'purple', 'orange', 'blue'];

// Función para dibujar una pieza en el tablero
        function drawPiece(piece, x, y, color) {
            context.fillStyle = color;
            for (let row = 0; row < piece.length; row++) {
                for (let col = 0; col < piece[row].length; col++) {
                    if (piece[row][col]) {
                        context.fillRect((x + col) * blockSize, (y + row) * blockSize, blockSize, blockSize);
                    }
                }
            }
        }

// Función para dibujar el tablero completo
        function drawBoard() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            for (let row = 0; row < board.length; row++) {
                for (let col = 0; col < board[row].length; col++) {
                    const piece = board[row][col];
                    if (piece) {
                        drawPiece([[1]], col, row, colors[piece]);
                    }
                }
            }
        }

// Función para comprobar si una pieza puede moverse en una dirección
        function canMove(piece, x, y) {
            for (let row = 0; row < piece.length; row++) {
                for (let col = 0; col < piece[row].length; col++) {
                    if (piece[row][col]) {
                        const newX = x + col;
                        const newY = y + row;
                        if (newX < 0 || newX >= columns || newY >= rows || board[newY][newX]) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

// Función para unir una pieza al tablero
        function mergePiece(piece, x, y) {
            for (let row = 0; row < piece.length; row++) {
                for (let col = 0; col < piece[row].length; col++) {
                    if (piece[row][col]) {
                        board[y + row][x + col] = activePiece.colorIndex;
                    }
                }
            }
        }

// Función para eliminar una línea completa y sumar puntos
        function removeLine() {
            for (let row = rows - 1; row >= 0; row--) {
                if (board[row].every(cell => cell !== '')) {
                    board.splice(row, 1);
                    board.unshift(new Array(columns).fill(''));
                    score += 10;
                }
            }
            scoreDisplay.textContent = 'Puntos: ' + score;
        }

// Función para rotar una pieza
        function rotatePiece(piece) {
            const newPiece = [];
            for (let row = 0; row < piece[0].length; row++) {
                newPiece[row] = [];
                for (let col = 0; col < piece.length; col++) {
                    newPiece[row][col] = piece[piece.length - col - 1][row];
                }
            }
            return newPiece;
        }

// Clase para la pieza activa
        class ActivePiece {
            constructor() {
                this.piece = pieces[Math.floor(Math.random() * pieces.length)];
                this.x = Math.floor((columns - this.piece[0].length) / 2);
                this.y = -1;
                this.colorIndex = Math.floor(Math.random() * colors.length);
            }

draw() {
                drawPiece(this.piece, this.x, this.y, colors[this.colorIndex]);
            }

moveDown() {
                if (canMove(this.piece, this.x, this.y + 1)) {
                    this.y++;
                } else {
                    mergePiece(this.piece, this.x, this.y);
                    removeLine();
                    if (board[0].some(cell => cell !== '')) {
                        alert(`¡Perdiste! Puntos: ${score}`);
                        resetGame();
                    } else {
                        this.piece = pieces[Math.floor(Math.random() * pieces.length)];
                        this.x = Math.floor((columns - this.piece[0].length) / 2);
                        this.y = -1;
                        this.colorIndex = Math.floor(Math.random() * colors.length);
                    }
                }
            }

moveLeft() {
                if (canMove(this.piece, this.x - 1, this.y)) {
                    this.x--;
                }
            }

moveRight() {
                if (canMove(this.piece, this.x + 1, this.y)) {
                    this.x++;
                }
            }

rotate() {
                const rotatedPiece = rotatePiece(this.piece);
                if (canMove(rotatedPiece, this.x, this.y)) {
                    this.piece = rotatedPiece;
                }
            }
        }

// Creación de la pieza activa inicial
        let activePiece = new ActivePiece();

// Función para controlar las acciones del jugador
        function handleInput(event) {
            switch (event.key) {
                case 'ArrowUp':
                    activePiece.rotate();
                    break;
                case 'ArrowDown':
                    activePiece.moveDown();
                    break;
                case 'ArrowLeft':
                    activePiece.moveLeft();
                    break;
                case 'ArrowRight':
                    activePiece.moveRight();
                    break;
                default:
                    break;
            }
        }

// Reiniciar el juego
        function resetGame() {
            board.forEach(row => row.fill(''));
            score = 0;
            scoreDisplay.textContent = 'Puntos: 0';
            activePiece = new ActivePiece();
        }

// Iniciar el juego
        function startGame() {
            document.addEventListener('keydown', handleInput);
            setInterval(function () {
                activePiece.moveDown();
                drawBoard();
                activePiece.draw();
            }, 500); // Velocidad de caída (500 ms)
        }

// Iniciar el juego cuando la página se carga
        startGame();
    </script>
</body>
</html>
```

Espero que esto sea lo que estabas buscando. ¡Diviértete jugando!