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

No:45073

121

Tetris
Developer User19571｜Date and time 24/2/20 5:56:31
Build time 17.997 sec｜Game capacity 4.818KB｜

Tetris Pictogram Game

Use the arrow keys to play:

→ 　

0　

0　

　
　
　
　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>

<head>
    <title>Tetris Pictogram Game</title>
    <style>
        body {
            text-align: center;
        }

#gameBoard {
            display: inline-block;
            border: 2px solid black;
            margin-top: 20px;
        }

.row {
            display: flex;
        }

.cell {
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <h1>Tetris Pictogram Game</h1>
    <p>Use the arrow keys to play:</p>
    <div id="gameBoard"></div>
    <script>
        const ROWS = 10;
        const COLS = 20;

const tetrominos = {
            straight: [
                [1, 1, 1, 1]
            ],
            square: [
                [1, 1],
                [1, 1]
            ],
            tBlock: [
                [0, 1, 0],
                [1, 1, 1]
            ],
            lBlock: [
                [1, 0],
                [1, 0],
                [1, 1]
            ]
        };

let gameBoard = document.getElementById("gameBoard");
        let boardMatrix = Array.from({ length: COLS }, () => Array(ROWS).fill(0));

let currentTetromino = tetrominos.square;
        let currentX = 0;
        let currentY = 0;
        let score = 0;

function drawBoard() {
            let content = "";
            boardMatrix.forEach(row => {
                content += "<div class='row'>";
                row.forEach(cell => {
                    if (cell === 1) {
                        content += "<div class='cell'>⬛</div>";
                    } else {
                        content += "<div class='cell'></div>";
                    }
                });
                content += "</div>";
            });
            gameBoard.innerHTML = content;
        }

function checkCollision(matrix, x, y) {
            for (let i = 0; i < matrix.length; i++) {
                for (let j = 0; j < matrix[0].length; j++) {
                    if (matrix[i][j] === 1 && boardMatrix[x + i][y + j] === 1) {
                        return true;
                    }
                }
            }
            return false;
        }

function rotateTetromino(matrix) {
            let newMatrix = [];
            for (let i = 0; i < matrix[0].length; i++) {
                let newRow = [];
                for (let j = matrix.length - 1; j >= 0; j--) {
                    newRow.push(matrix[j][i]);
                }
                newMatrix.push(newRow);
            }
            return newMatrix;
        }

function gameloop() {
            if (!checkCollision(currentTetromino, currentX + 1, currentY)) {
                currentX++;
            } else {
                // Freeze tetromino on board
                for (let i = 0; i < currentTetromino.length; i++) {
                    for (let j = 0; j < currentTetromino[0].length; j++) {
                        if (currentTetromino[i][j] === 1) {
                            boardMatrix[currentX + i][currentY + j] = 1;
                        }
                    }
                }

// Check and clear completed rows
                for (let i = COLS - 1; i >= 0; i--) {
                    if (boardMatrix[i].every(cell => cell === 1)) {
                        boardMatrix.splice(i, 1);
                        boardMatrix.unshift(Array(ROWS).fill(0));
                        score++;
                    }
                }

currentX = 0;
                currentY = 0;
                currentTetromino = tetrominos.square;
            }

drawBoard();
            setTimeout(gameloop, 500);
        }

document.addEventListener("keydown", function(event) {
            switch (event.key) {
                case "ArrowLeft":
                    if (!checkCollision(currentTetromino, currentX, currentY - 1)) {
                        currentY--;
                    }
                    break;
                case "ArrowRight":
                    if (!checkCollision(currentTetromino, currentX, currentY + 1)) {
                        currentY++;
                    }
                    break;
                case "ArrowDown":
                    if (!checkCollision(currentTetromino, currentX + 1, currentY)) {
                        currentX++;
                    }
                    break;
                case "ArrowUp":
                    let rotatedTetromino = rotateTetromino(currentTetromino);
                    if (!checkCollision(rotatedTetromino, currentX, currentY)) {
                        currentTetromino = rotatedTetromino;
                    }
                    break;
            }

drawBoard();
        });

gameloop();
    </script>
</body>

</html>