AI game creator

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

No:30673

163

←

Prev Next

→

テトリス
Developer User10397｜Date and time 23/12/23 17:59:14
Build time 37.838 sec｜Game capacity 7.638KB｜

Script

Game Over

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-size: 3rem;
        }

#game-board {
            border: 1px solid black;
            width: 20rem;
            height: 40rem;
        }

#game-over {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            color: red;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <div id="game-over">Game Over</div>

const board = Array.from({length: boardHeight}, () => Array(boardWidth).fill(0));
        let currentPiece;
        let currentPosition;
        let isGameOver;

const tetrominos = [
            [
                [1, 1, 1, 1]
            ],
            [
                [1, 1],
                [1, 1]
            ],
            [
                [0, 1, 1],
                [1, 1, 0]
            ],
            [
                [1, 1, 0],
                [0, 1, 1]
            ],
            [
                [1, 0, 0],
                [1, 1, 1]
            ],
            [
                [0, 0, 1],
                [1, 1, 1]
            ],
            [
                [1, 1, 1],
                [0, 0, 1]
            ]
        ];

const tetrominoColors = ['🔴', '🔵', '🟡', '🟢', '🟠', '🟣', '🟤'];

function drawBoard() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';

for (let row = 0; row < board.length; row++) {
                for (let col = 0; col < board[row].length; col++) {
                    const cell = document.createElement('div');
                    cell.style.width = cellSize + 'px';
                    cell.style.height = cellSize + 'px';

if (board[row][col]) {
                        cell.innerHTML = tetrominoColors[board[row][col] - 1];
                    }

gameBoard.appendChild(cell);
                }
            }
        }

function movePieceDown() {
            if (isCollision(0, 1, currentPiece, currentPosition)) {
                placePiece();
                return;
            }

clearPiece();
            currentPosition.y++;
            drawPiece();
        }

function movePieceLeft() {
            if (isCollision(-1, 0, currentPiece, currentPosition)) {
                return;
            }

clearPiece();
            currentPosition.x--;
            drawPiece();
        }

function movePieceRight() {
            if (isCollision(1, 0, currentPiece, currentPosition)) {
                return;
            }

clearPiece();
            currentPosition.x++;
            drawPiece();
        }

function rotatePiece() {
            const rotatedPiece = rotate(currentPiece);
            if (isCollision(0, 0, rotatedPiece, currentPosition)) {
                return;
            }

clearPiece();
            currentPiece = rotatedPiece;
            drawPiece();
        }

checkRows();

if (!isGameOver) {
                generatePiece();
            }
        }

function checkRows() {
            let fullRows = [];

for (let row = 0; row < boardHeight; row++) {
                if (board[row].every(cell => cell)) {
                    fullRows.push(row);
                }
            }

if (fullRows.length > 0) {
                fullRows.forEach(row => board.splice(row, 1));
                for (let i = 0; i < fullRows.length; i++) {
                    board.unshift(Array(boardWidth).fill(0));
                }
            }
        }

function generatePiece() {
            currentPosition = {
                x: Math.floor(boardWidth / 2) - 1,
                y: 0
            };

const randomIndex = Math.floor(Math.random() * tetrominos.length);
            currentPiece = tetrominos[randomIndex];

if (isCollision(0, 0, currentPiece, currentPosition)) {
                isGameOver = true;
                const gameOver = document.getElementById('game-over');
                gameOver.style.display = 'block';
                return;
            }

drawPiece();
        }

generatePiece();
        setInterval(movePieceDown, 1000);

</script>
</body>
</html>