AI game creator

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

No:42631

←

Prev Next

→

Tetris com setas
Developer User18853｜Date and time 24/2/12 11:26:10
Build time 24.845 sec｜Game capacity 8.477KB｜

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 com setas</title>
    <style>
        #gameGrid {
            display: grid;
            width: 300px;
            height: 600px;
            margin: 0 auto;
            border: 2px solid black;
            background-color: lightgray;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(20, 1fr);
        }

.cell {
            border: 1px solid white;
            background-color: gray;
        }
    </style>
</head>

<body>
    <script>
        // Definir as peças do jogo Tetris
        const tetrominoes = [
            [
                [1, 1, 1, 1] // I
            ],
            [
                [1, 1, 0],
                [0, 1, 1] // Z
            ],
            [
                [0, 1, 1],
                [1, 1, 0] // S
            ],
            [
                [1, 1, 1],
                [0, 0, 1] // L
            ],
            [
                [1, 1, 1],
                [1, 0, 0] // J
            ],
            [
                [1, 1, 1],
                [0, 1, 0] // T
            ],
            [
                [1, 1],
                [1, 1], // O
            ]
        ];

// Definir as setas do jogo
        const KEY = {
            LEFT: 37,
            UP: 38,
            RIGHT: 39,
            DOWN: 40
        };

// Variáveis do jogo
        let grid = [];
        let currentTetromino = [];
        let currentX, currentY;
        let timer;
        let gameOver = false;

// Inicializar o jogo
        function initialize() {
            grid = createGrid();
            currentTetromino = generateTetromino();
            currentX = 3;
            currentY = 0;
            drawTetromino();
            timer = setInterval(moveDown, 1000);
        }

// Criar o tabuleiro do jogo
        function createGrid() {
            const rows = 20;
            const cols = 10;
            const grid = Array.from({ length: rows }, () => Array(cols).fill(0));
            return grid;
        }

// Gerar uma nova peça Tetromino aleatoriamente
        function generateTetromino() {
            const rand = Math.floor(Math.random() * tetrominoes.length);
            return tetrominoes[rand];
        }

// Desenhar a peça Tetromino no tabuleiro
        function drawTetromino() {
            clearGrid();
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        const cell = document.getElementById(`cell-${currentY + row}-${currentX + col}`);
                        cell.style.backgroundColor = 'red';
                    }
                }
            }
        }

// Limpar o tabuleiro
        function clearGrid() {
            const cells = document.getElementsByClassName('cell');
            for (let i = 0; i < cells.length; i++) {
                cells[i].style.backgroundColor = 'gray';
            }
        }

// Mover a peça Tetromino para a direita
        function moveRight() {
            if (!gameOver) {
                if (canMove(currentTetromino, currentX + 1, currentY)) {
                    currentX++;
                    drawTetromino();
                }
            }
        }

// Mover a peça Tetromino para a esquerda
        function moveLeft() {
            if (!gameOver) {
                if (canMove(currentTetromino, currentX - 1, currentY)) {
                    currentX--;
                    drawTetromino();
                }
            }
        }

// Mover a peça Tetromino para baixo
        function moveDown() {
            if (!gameOver) {
                if (canMove(currentTetromino, currentX, currentY + 1)) {
                    currentY++;
                    drawTetromino();
                } else {
                    lockTetromino();
                    clearLines();
                    currentTetromino = generateTetromino();
                    currentX = 3;
                    currentY = 0;
                    drawTetromino();
                    if (!canMove(currentTetromino, currentX, currentY)) {
                        clearInterval(timer);
                        gameOver = true;
                        alert("Game Over!");
                    }
                }
            }
        }

// Rotacionar a peça Tetromino
        function rotateTetromino() {
            if (!gameOver) {
                const nextTetromino = currentTetromino[0].map((_, index) =>
                    currentTetromino.map((row) => row[index]).reverse()
                );
                if (canMove(nextTetromino, currentX, currentY)) {
                    currentTetromino = nextTetromino;
                    drawTetromino();
                }
            }
        }

// Verificar se é possível mover a peça Tetromino para as novas coordenadas
        function canMove(tetromino, posX, posY) {
            for (let row = 0; row < tetromino.length; row++) {
                for (let col = 0; col < tetromino[row].length; col++) {
                    if (tetromino[row][col]) {
                        const nextX = posX + col;
                        const nextY = posY + row;
                        if (
                            nextY >= grid.length ||
                            nextX < 0 ||
                            nextX >= grid[0].length ||
                            (grid[nextY][nextX] !== 0 && !isOccupiedByCurrentTetromino(nextX, nextY))
                        ) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

// Verificar se a célula está ocupada pela peça Tetromino atual
        function isOccupiedByCurrentTetromino(x, y) {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col] && currentX + col === x && currentY + row === y) {
                        return true;
                    }
                }
            }
            return false;
        }

// Travar a peça Tetromino no tabuleiro
        function lockTetromino() {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        grid[currentY + row][currentX + col] = 1;
                    }
                }
            }
        }

// Limpar as linhas preenchidas
        function clearLines() {
            for (let row = 0; row < grid.length; row++) {
                if (grid[row].every((cell) => cell === 1)) {
                    for (let r = row; r > 0; r--) {
                        grid[r] = [...grid[r - 1]];
                    }
                    grid[0] = Array(10).fill(0);
                }
            }
        }

// Tratar as teclas pressionadas
        function handleKeyPress(event) {
            if (event.keyCode === KEY.LEFT) {
                moveLeft();
            } else if (event.keyCode === KEY.RIGHT) {
                moveRight();
            } else if (event.keyCode === KEY.DOWN) {
                moveDown();
            } else if (event.keyCode === KEY.UP) {
                rotateTetromino();
            }
        }

// Criar o tabuleiro visual
        function createGameGrid() {
            const gameGrid = document.createElement('div');
            gameGrid.setAttribute('id', 'gameGrid');

for (let row = 0; row < 20; row++) {
                for (let col = 0; col < 10; col++) {
                    const cell = document.createElement('div');
                    cell.setAttribute('id', `cell-${row}-${col}`);
                    cell.setAttribute('class', 'cell');
                    gameGrid.appendChild(cell);
                }
            }

return gameGrid;
        }

// Adicionar o tabuleiro visual ao documento
        document.body.appendChild(createGameGrid());

// Iniciar o jogo
        initialize();

// Adicionar o evento de pressionar a tecla
        document.addEventListener('keydown', handleKeyPress);

</script>
</body>

</html>