AI game creator

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

No:23803

←

Prev Next

→

Tetris
Developer User11149｜Date and time 23/11/3 17:29:12
Build time 163.357 sec｜Game capacity 9.109KB｜

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>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

body {
            background-color: #222;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

#game-board {
           overflow: hidden;
           background-color: #444;
           border: 2px solid #333;
           width: 300px;
           height: 600px;
           position: relative;
        }

.cell {
           width: 30px;
           height: 30px;
           position: absolute;
        }

.tetromino {
            background-color: #ccc;
            border: 2px solid #aaa;
        }

.active {
            background-color: #ff6666;
            border: 2px solid #ff0000;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Initialize game board and variables
        const board = document.getElementById('game-board');
        const boardWidth = 10;
        const boardHeight = 20;
        const cellSize = 30;

let cells = [];
        let currentTetromino = null;

function init() {
            // Create game board cells
            for (let row = 0; row < boardHeight; row++) {
                for (let col = 0; col < boardWidth; col++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.style.top = (row * cellSize) + 'px';
                    cell.style.left = (col * cellSize) + 'px';
                    board.appendChild(cell);
                    cells.push(cell);
                }
            }

// Start game loop
            setInterval(gameLoop, 500);
        }

function getRandomTetromino() {
            const randomIdx = Math.floor(Math.random() * tetrominoes.length);
            return tetrominoes[randomIdx];
        }

function draw() {
            cells.forEach(cell => cell.classList.remove('tetromino', 'active'));

for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        const cellIndex = (row * boardWidth) + col;
                        const cell = cells[cellIndex];
                        cell.classList.add('tetromino');
                    }
                }
            }
        }

function moveLeft() {
            const canMoveLeft = currentTetromino.every((row, rowIndex) => {
                return row.every((cell, colIndex) => {
                    if (!cell) return true;
                    const newColIndex = colIndex - 1;
                    if (newColIndex < 0) return false;
                    const cellIndex = (rowIndex * boardWidth) + newColIndex;
                    const cell = cells[cellIndex];
                    return !cell.classList.contains('tetromino');
                });
            });

if (canMoveLeft) {
                currentTetromino.forEach((row, rowIndex) => {
                    row.forEach((cell, colIndex) => {
                        if (cell) {
                            const cellIndex = (rowIndex * boardWidth) + colIndex;
                            cells[cellIndex].classList.remove('tetromino');
                        }
                    });
                });
    
                currentTetromino.forEach((row, rowIndex) => {
                    row.forEach((cell, colIndex) => {
                        if (cell) {
                            const cellIndex = (rowIndex * boardWidth) + colIndex - 1;
                            cells[cellIndex].classList.add('tetromino');
                        }
                    });
                });
            }
        }

function moveRight() {
            const canMoveRight = currentTetromino.every((row, rowIndex) => {
                return row.every((cell, colIndex) => {
                    if (!cell) return true;
                    const newColIndex = colIndex + 1;
                    if (newColIndex >= boardWidth) return false;
                    const cellIndex = (rowIndex * boardWidth) + newColIndex;
                    const cell = cells[cellIndex];
                    return !cell.classList.contains('tetromino');
                });
            });

if (canMoveRight) {
                currentTetromino.forEach((row, rowIndex) => {
                    row.forEach((cell, colIndex) => {
                        if (cell) {
                            const cellIndex = (rowIndex * boardWidth) + colIndex;
                            cells[cellIndex].classList.remove('tetromino');
                        }
                    });
                });
    
                currentTetromino.forEach((row, rowIndex) => {
                    row.forEach((cell, colIndex) => {
                        if (cell) {
                            const cellIndex = (rowIndex * boardWidth) + colIndex + 1;
                            cells[cellIndex].classList.add('tetromino');
                        }
                    });
                });
            }
        }

function moveDown() {
            const canMoveDown = currentTetromino.some((row, rowIndex) => {
                return row.some((cell, colIndex) => {
                    if (!cell) return false;
                    const newRowindex = rowIndex + 1;
                    if (newRowindex >= boardHeight) return false;
                    const cellIndex = (newRowindex * boardWidth) + colIndex;
                    const cell = cells[cellIndex];
                    return !cell.classList.contains('tetromino');
                });
            });

if (canMoveDown) {
                currentTetromino.forEach((row, rowIndex) => {
                    row.forEach((cell, colIndex) => {
                        if (cell) {
                            const cellIndex = (rowIndex * boardWidth) + colIndex;
                            cells[cellIndex].classList.remove('tetromino');
                        }
                    });
                });
    
                currentTetromino.forEach((row, rowIndex) => {
                    row.forEach((cell, colIndex) => {
                        if (cell) {
                            const cellIndex = ((rowIndex + 1) * boardWidth) + colIndex;
                            cells[cellIndex].classList.add('tetromino');
                        }
                    });
                });
            } else {
                currentTetromino.forEach((row, rowIndex) => {
                    row.forEach((cell, colIndex) => {
                        if (cell) {
                            const cellIndex = (rowIndex * boardWidth) + colIndex;
                            cells[cellIndex].classList.add('active');
                        }
                    });
                });

currentTetromino = null;
            }
        }

function checkCollision() {
            if (!currentTetromino) return false;

const willCollide = currentTetromino.some((row, rowIndex) => {
                return row.some((cell, colIndex) => {
                    if (!cell) return false;
                    const cellIndex = (rowIndex * boardWidth) + colIndex;
                    const cell = cells[cellIndex];
                    return cell.classList.contains('active');
                });
            });

return willCollide;
        }

function endGame() {
            alert('Game Over!');
            location.reload();
        }

// Keyboard input event listeners
        document.addEventListener('keydown', function (event) {
            switch (event.keyCode) {
                case 37: // Left arrow
                    moveLeft();
                    break;
                case 38: // Up arrow
                    // Rotate the tetromino
                    break;
                case 39: // Right arrow
                    moveRight();
                    break;
                case 40: // Down arrow
                    moveDown();
                    break;
            }
        });

window.addEventListener('load', () => {
            init();
        });
    </script>
</body>
</html>