AI game creator

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

No:31054

←

Prev Next

→

テトリス
Developer User15001｜Date and time 23/12/24 21:10:59
Build time 37.713 sec｜Game capacity 6.346KB｜

Script

←

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;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

.game-board {
            display: grid;
            grid-template-columns: repeat(10, 50px);
            grid-template-rows: repeat(20, 50px);
            width: 500px;
            height: 1000px;
            background-color: #fff;
            border: 2px solid #000;
        }

.cell {
            border: 1px solid #e1e1e1;
            background-color: #e1e1e1;
        }

.cell.active {
            background-color: #ffacac;
        }
    </style>
</head>
<body>
    <div class="game-board"></div>

function createTetromino() {
                const tetrominos = [
                    [[1, 1, 1, 1]],
                    [[1, 1], [1, 1]],
                    [[1, 1, 0], [0, 1, 1]],
                    [[0, 1, 1], [1, 1, 0]],
                    [[1, 1, 1], [0, 1, 0]]
                ];

const randomIndex = Math.floor(Math.random() * tetrominos.length);
                const tetromino = tetrominos[randomIndex];
                const div = document.createElement("div");
                div.classList.add("tetromino");

for (let i = 0; i < tetromino.length; i++) {
                    for (let j = 0; j < tetromino[i].length; j++) {
                        if (tetromino[i][j]) {
                            const cell = document.createElement("div");
                            cell.classList.add("cell");
                            div.appendChild(cell);
                        }
                    }
                }

board.appendChild(div);
                const left = Math.floor((board.offsetWidth - div.offsetWidth) / 2);
                div.style.left = left + "px";
                currentTetromino = div;
            }

function moveTetromino(dx, dy) {
                const left = parseInt(currentTetromino.style.left) || 0;
                const top = parseInt(currentTetromino.style.top) || 0;
                const newLeft = left + dx;
                const newTop = top + dy;
                currentTetromino.style.left = newLeft + "px";
                currentTetromino.style.top = newTop + "px";

if (newLeft < 0 || newLeft + currentTetromino.offsetWidth > board.offsetWidth) {
                    currentTetromino.style.left = left + "px";
                }

if (newTop + currentTetromino.offsetHeight > board.offsetHeight) {
                    currentTetromino.style.top = top + "px";
                    fixTetromino();
                    createTetromino();
                }
            }

function fixTetromino() {
                const cells = currentTetromino.querySelectorAll(".cell");

for (let i = 0; i < cells.length; i++) {
                    const cell = cells[i];
                    const rect = cell.getBoundingClientRect();
                    const cellLeft = rect.left - board.getBoundingClientRect().left;
                    const cellTop = rect.top - board.getBoundingClientRect().top;

const boardCell = document.createElement("div");
                    boardCell.classList.add("cell", "active");
                    boardCell.style.left = cellLeft + "px";
                    boardCell.style.top = cellTop + "px";
                    board.appendChild(boardCell);
                }

currentTetromino.remove();
            }

function rotateTetromino() {
                const cells = currentTetromino.querySelectorAll(".cell");
                const tetrominoCells = Array.from(cells);
                const tetrominoWidth = tetrominoCells[0].offsetHeight;
                const tetrominoHeight = tetrominoCells[0].offsetWidth;
                const oldTetromino = currentTetromino;

currentTetromino = document.createElement("div");
                currentTetromino.classList.add("tetromino");

for (let i = 0; i < tetrominoWidth; i++) {
                    for (let j = tetrominoHeight -1; j >= 0; j--) {
                        const cell = tetrominoCells.shift();
                        currentTetromino.appendChild(cell);
                    }
                }

oldTetromino.remove();
                board.appendChild(currentTetromino);

const left = parseInt(currentTetromino.style.left) || 0;
                const top = parseInt(currentTetromino.style.top) || 0;
                const newLeft = Math.min(left, board.offsetWidth - currentTetromino.offsetWidth);
                const newTop = Math.min(top, board.offsetHeight - currentTetromino.offsetHeight);
                currentTetromino.style.left = newLeft + "px";
                currentTetromino.style.top = newTop + "px";
            }

function initialize() {
                for (let i = 0; i < 20; i++) {
                    cells[i] = [];
                    for (let j = 0; j < 10; j++) {
                        cells[i][j] = 0;
                    }
                }

createTetromino();

window.requestAnimationFrame(update);
            }

function update() {
                moveTetromino(0, 10);
                window.requestAnimationFrame(update);
            }

initialize();
        });
    </script>
</body>
</html>