AI game creator

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

No:24126

←

Prev Next

→

Tetris
Developer User11310｜Date and time 23/11/6 1:57:10
Build time 197.118 sec｜Game capacity 11.26KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris Game</title>
    <style>
        #tetris {
            border: solid 1px #555;
            margin: 0 auto;
            display: flex;
            align-items: flex-start;
            padding: 10px;
            width: 304px;
            height: 600px;
            background-color: #000;
            overflow: hidden;
        }
        
        .tetris-row {
            display: flex;
            align-items: center;
            width: 100%;
            height: 20px;
        }
        
        .tetris-cell {
            width: 20px;
            height: 20px;
            background-color: #333;
            border: solid 1px #000;
        }
        
        #score {
            text-align: center;
            color: #fff;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div id="tetris"></div>
    <div id="score">Score: 0</div>

const ROWS = 20;
            const COLS = 10;
            const EMPTY_CELL = 'empty';
            const ACTIVE_CELL = 'active';

let grid = createEmptyGrid();
            let currentPiece = generateRandomPiece();
            let score = 0;

// Function to create an empty grid
            function createEmptyGrid() {
                const emptyGrid = [];
                for (let row = 0; row < ROWS; row++) {
                    emptyGrid[row] = [];
                    for (let col = 0; col < COLS; col++) {
                        emptyGrid[row][col] = EMPTY_CELL;
                    }
                }
                return emptyGrid;
            }

// Function to generate a random tetromino piece
            function generateRandomPiece() {
                const pieces = [
                    [[1, 1, 1, 1]],
                    [[1, 1], [1, 1]],
                    [[1, 1, 1], [0, 1, 0]],
                    [[0, 1, 1], [1, 1, 0]],
                    [[1, 1, 0], [0, 1, 1]],
                    [[1, 0, 0], [1, 1, 1]],
                    [[0, 0, 1], [1, 1, 1]]
                ];

const randomIndex = Math.floor(Math.random() * pieces.length);
                return pieces[randomIndex];
            }

// Function to draw the tetromino piece on the grid
            function drawPiece() {
                for (let row = 0; row < currentPiece.length; row++) {
                    for (let col = 0; col < currentPiece[row].length; col++) {
                        if (currentPiece[row][col]) {
                            grid[row][col + 3] = ACTIVE_CELL;
                        }
                    }
                }
            }

// Function to remove the tetromino piece from the grid
            function clearPiece() {
                for (let row = 0; row < currentPiece.length; row++) {
                    for (let col = 0; col < currentPiece[row].length; col++) {
                        if (currentPiece[row][col]) {
                            grid[row][col + 3] = EMPTY_CELL;
                        }
                    }
                }
            }

// Function to check if tetromino can move down
            function canMoveDown() {
                for (let row = ROWS - 1; row >= 0; row--) {
                    for (let col = 0; col < COLS; col++) {
                        if (grid[row][col] === ACTIVE_CELL) {
                            if (row === ROWS - 1 || grid[row + 1][col] === EMPTY_CELL) {
                                return false;
                            }
                        }
                    }
                }
                return true;
            }

// Function to move the tetromino piece down
            function moveDown() {
                if (canMoveDown()) {
                    clearPiece();
                    for (let row = ROWS - 1; row >= 0; row--) {
                        for (let col = 0; col < COLS; col++) {
                            if (grid[row][col] === ACTIVE_CELL) {
                                grid[row][col] = EMPTY_CELL;
                                grid[row + 1][col] = ACTIVE_CELL;
                            }
                        }
                    }
                } else {
                    checkLines();
                    currentPiece = generateRandomPiece();

if (!canMoveDown()) {
                        endGame();
                    }
                }
                drawGrid();
            }

// Function to check if any lines are completed and need to be cleared
            function checkLines() {
                let linesCleared = 0;
                for (let row = ROWS - 1; row >= 0; row--) {
                    if (grid[row].every(cell => cell === ACTIVE_CELL)) {
                        grid.splice(row, 1);  // Remove the completed line
                        grid.unshift(Array(COLS).fill(EMPTY_CELL));  // Add new empty row to the top
                        linesCleared++;
                    }
                }

if (linesCleared > 0) {
                    score += linesCleared * 100;
                    scoreDisplay.innerText = `Score: ${score}`;
                }
            }

// Function to end the game
            function endGame() {
                alert("Game Over! Your score is " + score);
                grid = createEmptyGrid();
                score = 0;
                scoreDisplay.innerText = `Score: ${score}`;
            }

// Function to handle keyboard controls
            function handleKey(event) {
                if (event.keyCode === 37) {  // Left arrow key
                    moveLeft();
                } else if (event.keyCode === 39) {  // Right arrow key
                    moveRight();
                } else if (event.keyCode === 40) {  // Down arrow key
                    moveDown();
                } else if (event.keyCode === 38) {  // Up arrow key
                    rotatePiece();
                }
            }

// Function to move the tetromino piece left
            function moveLeft() {
                if (canMoveLeft()) {
                    clearPiece();
                    for (let row = 0; row < ROWS; row++) {
                        for (let col = 0; col < COLS; col++) {
                            if (grid[row][col] === ACTIVE_CELL) {
                                grid[row][col] = EMPTY_CELL;
                                grid[row][col - 1] = ACTIVE_CELL;
                            }
                        }
                    }
                    drawGrid();
                }
            }

// Function to check if tetromino can move left
            function canMoveLeft() {
                for (let row = 0; row < ROWS; row++) {
                    for (let col = 0; col < COLS; col++) {
                        if (grid[row][col] === ACTIVE_CELL) {
                            if (col === 0 || grid[row][col - 1] === EMPTY_CELL) {
                                return false;
                            }
                        }
                    }
                }
                return true;
            }

// Function to move the tetromino piece right
            function moveRight() {
                if (canMoveRight()) {
                    clearPiece();
                    for (let row = 0; row < ROWS; row++) {
                        for (let col = COLS - 1; col >= 0; col--) {
                            if (grid[row][col] === ACTIVE_CELL) {
                                grid[row][col] = EMPTY_CELL;
                                grid[row][col + 1] = ACTIVE_CELL;
                            }
                        }
                    }
                    drawGrid();
                }
            }

// Function to check if tetromino can move right
            function canMoveRight() {
                for (let row = 0; row < ROWS; row++) {
                    for (let col = COLS - 1; col >= 0; col--) {
                        if (grid[row][col] === ACTIVE_CELL) {
                            if (col === COLS - 1 || grid[row][col + 1] === EMPTY_CELL) {
                                return false;
                            }
                        }
                    }
                }
                return true;
            }

// Function to rotate the tetromino piece
            function rotatePiece() {
                const rotatedPiece = [];
                const pieceWidth = currentPiece[0].length;

for (let col = 0; col < pieceWidth; col++) {
                    const newRow = [];
                    for (let row = currentPiece.length - 1; row >= 0; row--) {
                        newRow.push(currentPiece[row][col]);
                    }
                    rotatedPiece.push(newRow);
                }

if (canRotate(rotatedPiece)) {
                    clearPiece();
                    currentPiece = rotatedPiece;
                    drawPiece();
                    drawGrid();
                }
            }

// Function to check if tetromino can be rotated
            function canRotate(rotatedPiece) {
                const rotatedPieceHeight = rotatedPiece.length;
                const rotatedPieceWidth = rotatedPiece[0].length;

for (let row = 0; row < rotatedPieceHeight; row++) {
                    for (let col = 0; col < rotatedPieceWidth; col++) {
                        const gridRow = row;
                        const gridCol = col + 3;

if (
                            rotatedPiece[row][col] &&
                            (gridRow < 0 || gridRow >= ROWS || gridCol < 0 || gridCol >= COLS || grid[gridRow][gridCol] === EMPTY_CELL)
                        ) {
                            return false;
                        }
                    }
                }

return true;
            }

// Function to draw the grid
            function drawGrid() {
                tetrisGrid.innerHTML = '';
                for (let row = 0; row < ROWS; row++) {
                    const tetrisRow = document.createElement('div');
                    tetrisRow.classList.add('tetris-row');
                    for (let col = 0; col < COLS; col++) {
                        const tetrisCell = document.createElement('div');
                        tetrisCell.classList.add('tetris-cell');
                        tetrisCell.style.backgroundColor = grid[row][col] === ACTIVE_CELL ? '#7FDBFF' : '#333';
                        tetrisRow.appendChild(tetrisCell);
                    }
                    tetrisGrid.appendChild(tetrisRow);
                }
            }

// Bind keyboard controls
            document.addEventListener('keydown', handleKey);

// Start the game
            drawGrid();
            drawPiece();
            setInterval(moveDown, 1000);
        });
    </script>
</body>
</html>