AI game creator

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

No:19381

←

Prev Next

→

Tetris
Developer User8592｜Date and time 23/10/3 11:24:42
Build time 42.712 sec｜Game capacity 10.593KB｜

Script

Score: 0

Start

Restart

←

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>
        #game-board {
            width: 240px;
            height: 480px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
            background-color: #f2f2f2;
        }

.tetromino {
            width: 30px;
            height: 30px;
            position: absolute;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

#score {
            text-align: center;
            padding: 20px;
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-weight: bold;
        }

#controls {
            text-align: center;
            margin-top: 20px;
        }

.button {
            display: inline-block;
            width: 100px;
            height: 40px;
            margin: 0 5px;
            font-family: Arial, sans-serif;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            border: 1px solid #ccc;
            background-color: #f2f2f2;
            transition: background-color 0.3s;
        }

.button:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <div id="score">Score: 0</div>
    <div id="controls">
        <div class="button" onclick="startGame()">Start</div>
        <div class="button" onclick="restartGame()">Restart</div>
    </div>

const rows = 16;
        const cols = 8;
        const tetrominoes = [
            [[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]],
            [[1, 1, 0], [0, 1, 1]],
            [[0, 1, 0], [1, 1, 1]]
        ];
        const colors = ["red", "blue", "green", "orange", "purple", "yellow", "pink"];
        let currentTetromino;
        let currentPosition;
        let currentColor;
        let score;
        let interval;

function startGame() {
            initializeGame();
            interval = setInterval(moveTetrominoDown, 500);
            controls.style.display = "none";
        }

function restartGame() {
            clearInterval(interval);
            initializeGame();
            updateScore(0);
            controls.style.display = "none";
        }

function initializeGame() {
            clearBoard();
            currentTetromino = getRandomTetromino();
            currentPosition = { row: 0, col: 3 };
            currentColor = getRandomColor();
            score = 0;
            renderTetromino();
            document.addEventListener("keydown", handleKeyPress);
        }

function clearBoard() {
            while (gameBoard.firstChild) {
                gameBoard.firstChild.remove();
            }
        }

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

function getRandomColor() {
            const randomIndex = Math.floor(Math.random() * colors.length);
            return colors[randomIndex];
        }

function updateScore(newScore) {
            score = newScore;
            scoreElement.textContent = "Score: " + score;
        }