Tetris but with emojis's game

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

No:19827

←

Prev Next

→

Tetris but with emojis
Developer User8620｜Date and time 23/10/7 3:40:06
Build time 46.84 sec｜Game capacity 9.19KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #gameContainer {
            display: flex;
            flex-wrap: wrap;
            width: 240px;
            height: 480px;
            border: 2px solid #000;
        }
        .cell {
            width: 32px;
            height: 32px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="gameContainer"></div>

// Game board dimensions
        const ROWS = 15;
        const COLS = 8;

// Initialize game board
        const gameContainer = document.getElementById("gameContainer");
        const gameBoard = [];
        for (let row = 0; row < ROWS; row++) {
            gameBoard[row] = [];
            for (let col = 0; col < COLS; col++) {
                gameBoard[row][col] = "";
                const cell = document.createElement("div");
                cell.className = "cell";
                gameContainer.appendChild(cell);
            }
        }

// Current piece coordinates
        let currentPiece = {
            row: 0,
            col: Math.floor(COLS / 2),
            shape: getRandomShape(),
        };

// Game loop interval
        let interval;

// Start the game
        function startGame() {
            interval = setInterval(() => {
                moveDown();
            }, 500);
        }

// Move the current piece down
        function moveDown() {
            if (canMoveDown()) {
                currentPiece.row++;
                drawPiece();
            } else {
                placePiece();
                checkFullRows();
                generateNewPiece();
            }
        }

// Move the current piece left
        function moveLeft() {
            if (canMoveLeft()) {
                currentPiece.col--;
                drawPiece();
            }
        }

// Move the current piece right
        function moveRight() {
            if (canMoveRight()) {
                currentPiece.col++;
                drawPiece();
            }
        }

// Rotate the current piece
        function rotate() {
            const oldShape = currentPiece.shape;
            currentPiece.shape = rotateShape(currentPiece.shape);

if (!isValidMove()) {
                currentPiece.shape = oldShape;
            }

drawPiece();
        }

// Check if the current piece can move down
        function canMoveDown() {
            for (let row = currentPiece.row + 1; row < currentPiece.row + currentPiece.shape.length + 1; row++) {
                for (let col = currentPiece.col; col < currentPiece.col + currentPiece.shape[row - currentPiece.row].length; col++) {
                    if (currentPiece.shape[row - currentPiece.row][col - currentPiece.col] !== "" &&
                    (row >= ROWS || gameBoard[row][col] !== "")) {
                        return false;
                    }
                }
            }
            return true;
        }

// Check if the current piece can move left
        function canMoveLeft() {
            for (let row = currentPiece.row; row < currentPiece.row + currentPiece.shape.length; row++) {
                for (let col = currentPiece.col - 1; col >= currentPiece.col - 1 - (currentPiece.shape[row - currentPiece.row].length - 1); col--) {
                    if (currentPiece.shape[row - currentPiece.row][col - currentPiece.col + 1] !== "" &&
                    (col < 0 || gameBoard[row][col] !== "")) {
                        return false;
                    }
                }
            }
            return true;
        }

// Check if the current piece can move right
        function canMoveRight() {
            for (let row = currentPiece.row; row < currentPiece.row + currentPiece.shape.length; row++) {
                for (let col = currentPiece.col + currentPiece.shape[row - currentPiece.row].length; col > currentPiece.col + 1; col--) {
                    if (currentPiece.shape[row - currentPiece.row][col - currentPiece.col - 1] !== "" &&
                    (col >= COLS || gameBoard[row][col] !== "")) {
                        return false;
                    }
                }
            }
            return true;
        }

// Check if the current piece rotation is valid
        function isValidMove() {
            for (let row = currentPiece.row; row < currentPiece.row + currentPiece.shape.length; row++) {
                for (let col = currentPiece.col; col < currentPiece.col + currentPiece.shape[row - currentPiece.row].length; col++) {
                    if (currentPiece.shape[row - currentPiece.row][col - currentPiece.col] !== "" &&
                    (col < 0 || col >= COLS ||
                    row >= ROWS || gameBoard[row][col] !== "")) {
                        return false;
                    }
                }
            }
            return true;
        }

// Place the current piece on the game board
        function placePiece() {
            for (let row = currentPiece.row; row < currentPiece.row + currentPiece.shape.length; row++) {
                for (let col = currentPiece.col; col < currentPiece.col + currentPiece.shape[row - currentPiece.row].length; col++) {
                    if (currentPiece.shape[row - currentPiece.row][col - currentPiece.col] !== "") {
                        gameBoard[row][col] = currentPiece.shape[row - currentPiece.row][col - currentPiece.col];
                    }
                }
            }
        }

// Generate a new random piece
        function generateNewPiece() {
            currentPiece.row = 0;
            currentPiece.col = Math.floor(COLS / 2);
            currentPiece.shape = getRandomShape();
        }

// Check and remove full rows
        function checkFullRows() {
            for (let row = ROWS - 1; row >= 0; row--) {
                if (gameBoard[row].every(cell => cell !== "")) {
                    gameBoard.splice(row, 1);
                    gameBoard.unshift(Array(COLS).fill(""));
                }
            }
        }

// Draw the game board and current piece
        function drawPiece() {
            const cells = gameContainer.getElementsByClassName("cell");
            for (let i = 0; i < cells.length; i++) {
                cells[i].innerHTML = "";
            }

for (let row = 0; row < ROWS; row++) {
                for (let col = 0; col < COLS; col++) {
                    if (gameBoard[row][col] !== "") {
                        const block = document.createElement("span");
                        block.innerHTML = gameBoard[row][col];
                        cells[row * COLS + col].appendChild(block);
                    }
                }
            }

for (let row = currentPiece.row; row < currentPiece.row + currentPiece.shape.length; row++) {
                for (let col = currentPiece.col; col < currentPiece.col + currentPiece.shape[row - currentPiece.row].length; col++) {
                    if (currentPiece.shape[row - currentPiece.row][col - currentPiece.col] !== "") {
                        const block = document.createElement("span");
                        block.innerHTML = currentPiece.shape[row - currentPiece.row][col - currentPiece.col];
                        cells[row * COLS + col].appendChild(block);
                    }
                }
            }
        }

// Rotate a shape 90 degrees clockwise
        function rotateShape(shape) {
            const rows = shape.length;
            const cols = shape[0].length;
            const rotatedShape = Array(cols).fill("").map(() => Array(rows).fill(""));

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

return rotatedShape;
        }

// Return a random shape from the blocks array
        function getRandomShape() {
            const randomIndex = Math.floor(Math.random() * blocks.length);
            return JSON.parse(JSON.stringify(blocks[randomIndex])); // Create a deep copy of the shape
        }

// Handle keyboard events
        document.addEventListener("keydown", (event) => {
            switch (event.key) {
                case "ArrowLeft":
                    moveLeft();
                    break;
                case "ArrowRight":
                    moveRight();
                    break;
                case "ArrowDown":
                    moveDown();
                    break;
                case "ArrowUp":
                    rotate();
                    break;
            }
        });

// Start the game
        startGame();
    </script>
</body>
</html>