A game that is a mix of tetris and tetris and double tetris title.'s game

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

No:10603

115

←

Prev Next

→

A game that is a mix of tetris and tetris and doub..ALL
Developer User3408｜Date and time 23/8/1 8:47:59
Build time 56.263 sec｜Game capacity 9.524KB｜

Script

Puntuación: 0

Tiempo: 0s

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Doble Tetris</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
        }
        #container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        #gameBoard {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 600px;
            border: 2px solid #333;
            background-color: white;
        }
        .cell {
            width: 30px;
            height: 30px;
            background-color: #f2f2f2;
            border: 1px solid #ccc;
        }
        #score {
            display: flex;
            justify-content: space-between;
            margin: 20px auto;
            width: 300px;
            font-size: 24px;
        }
        #startButton {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="gameBoard"></div>
    </div>
    <div id="score">
        <div>Puntuación: <span id="scoreValue">0</span></div>
        <div>Tiempo: <span id="time">0</span>s</div>
    </div>
    <button id="startButton">Iniciar Juego</button>

// Constants
            const ROWS = 20;
            const COLS = 10;

// Tetromino shapes
            const shapes = [
                [[1, 1, 1, 1]],              // I shape
                [[1, 1], [1, 1]],            // O shape
                [[0, 1, 1], [1, 1, 0]],      // Z shape
                [[1, 1, 0], [0, 1, 1]],      // S shape
                [[1, 1, 1], [0, 1, 0]],      // T shape
                [[1, 1, 1], [0, 0, 1]],      // L shape
                [[1, 1, 1], [1, 0, 0]]       // J shape
            ];

// Variables
            let gameBoard = [];
            let currentShape;
            let currentPosition;
            let intervalId;
            let isGameActive;
            let score;
            let time;

// Create the game board
            function createGameBoard() {
                for (let row = 0; row < ROWS; row++) {
                    gameBoard[row] = [];
                    for (let col = 0; col < COLS; col++) {
                        gameBoard[row][col] = 0;
                    }
                }
            }

// Render the game board
            function renderGameBoard() {
                const gameBoardContainer = document.getElementById("gameBoard");
                gameBoardContainer.innerHTML = "";

for (let row = 0; row < ROWS; row++) {
                    for (let col = 0; col < COLS; col++) {
                        const cell = document.createElement("div");
                        cell.className = gameBoard[row][col] ? "cell filled" : "cell";
                        gameBoardContainer.appendChild(cell);
                    }
                }
            }

// Generate a random shape
            function generateShape() {
                const randomIndex = Math.floor(Math.random() * shapes.length);
                currentShape = shapes[randomIndex];
                currentPosition = { row: 0, col: Math.floor(COLS / 2) - 1 };
            }

// Move the current shape down
            function moveDown() {
                const { row, col } = currentPosition;
                if (isValidMove(currentShape, row + 1, col)) {
                    currentPosition.row++;
                } else {
                    mergeShape();
                    checkForLineClear();
                    generateShape();
                    if (!isValidMove(currentShape, 0, col)) {
                        endGame();
                        return;
                    }
                }
                renderGameBoard();
            }

// Move the current shape left
            function moveLeft() {
                const { row, col } = currentPosition;
                if (isValidMove(currentShape, row, col - 1)) {
                    currentPosition.col--;
                    renderGameBoard();
                }
            }

// Move the current shape right
            function moveRight() {
                const { row, col } = currentPosition;
                if (isValidMove(currentShape, row, col + 1)) {
                    currentPosition.col++;
                    renderGameBoard();
                }
            }

// Rotate the current shape
            function rotateShape() {
                const rotatedShape = rotate(currentShape);
                if (isValidMove(rotatedShape, currentPosition.row, currentPosition.col)) {
                    currentShape = rotatedShape;
                    renderGameBoard();
                }
            }

// Merge the current shape into the game board
            function mergeShape() {
                const { row, col } = currentPosition;
                for (let r = 0; r < currentShape.length; r++) {
                    for (let c = 0; c < currentShape[r].length; c++) {
                        if (currentShape[r][c]) {
                            gameBoard[row + r][col + c] = 1;
                        }
                    }
                }
            }

// Check if the move is valid
            function isValidMove(shape, newRow, newCol) {
                for (let r = 0; r < shape.length; r++) {
                    for (let c = 0; c < shape[r].length; c++) {
                        if (shape[r][c]) {
                            const nextRow = newRow + r;
                            const nextCol = newCol + c;
                            if (
                                nextRow >= ROWS ||
                                nextCol < 0 ||
                                nextCol >= COLS ||
                                gameBoard[nextRow][nextCol]
                            ) {
                                return false;
                            }
                        }
                    }
                }
                return true;
            }

// Check for and clear completed lines
            function checkForLineClear() {
                let linesCleared = 0;
                outerLoop: for (let row = ROWS - 1; row >= 0; row--) {
                    for (let col = 0; col < COLS; col++) {
                        if (!gameBoard[row][col]) {
                            continue outerLoop;
                        }
                    }
                    gameBoard.splice(row, 1);
                    gameBoard.unshift(new Array(COLS).fill(0));
                    linesCleared++;
                }

if (linesCleared) {
                    updateScore(linesCleared);
                }
            }

// Rotate a given shape
            function rotate(shape) {
                const rows = shape.length;
                const cols = shape[0].length;
                const rotatedShape = [];

for (let col = 0; col < cols; col++) {
                    const newRow = [];
                    for (let row = rows - 1; row >= 0; row--) {
                        newRow.push(shape[row][col]);
                    }
                    rotatedShape.push(newRow);
                }

return rotatedShape;
            }

// Update the score
            function updateScore(linesCleared) {
                score += linesCleared * 10;
                document.getElementById("scoreValue").textContent = score;
            }

// Update the time
            function updateTime() {
                time++;
                document.getElementById("time").textContent = time;
            }

// Start the game
            function startGame() {
                if (isGameActive) {
                    return;
                }

isGameActive = true;
                score = 0;
                time = 0;
                createGameBoard();
                generateShape();

intervalId = setInterval(function () {
                    moveDown();
                }, 500);

setInterval(function () {
                    updateTime();
                }, 1000);

document.addEventListener("keydown", handleKeyPress);
                document.getElementById("startButton").style.display = "none";
            }

// End the game
            function endGame() {
                clearInterval(intervalId);
                isGameActive = false;
                document.removeEventListener("keydown", handleKeyPress);
                document.getElementById("startButton").style.display = "block";
            }

// Handle key press events
            function handleKeyPress(event) {
                if (event.keyCode === 37) {
                    moveLeft();
                } else if (event.keyCode === 39) {
                    moveRight();
                } else if (event.keyCode === 40) {
                    moveDown();
                } else if (event.keyCode === 38) {
                    rotateShape();
                }
            }

document.getElementById("startButton").addEventListener("click", startGame);
        });
    </script>
</body>
</html>