AI game creator

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

No:9380

←

Prev Next

→

Tetris
Developer User4346｜Date and time 23/7/24 3:18:19
Build time 45.421 sec｜Game capacity 5.939KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Тетрис</title>
    <style>
        canvas {
            border: 1px solid #000;
            background: #FFF;
        }
    </style>
</head>
<body>
<script>
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    canvas.width = 300;
    canvas.height = 600;
    document.body.appendChild(canvas);

const blockSize = 30;
    const cols = canvas.width / blockSize;
    const rows = canvas.height / blockSize;
    const emptyColor = "#FFF";

const shapes = [
        [
            [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, 1],
            [1, 0, 0]
        ],
        [
            [1, 1, 1],
            [0, 0, 1]
        ]
    ];

const colors = [
        "#FF0D72",
        "#0DC2FF",
        "#0DFF72",
        "#F538FF",
        "#FF8E0D",
        "#FFE138",
        "#3877FF"
    ];

let grid = [];
    for (let row = 0; row < rows; row++) {
        grid[row] = [];
        for (let col = 0; col < cols; col++) {
            grid[row][col] = emptyColor;
        }
    }

function drawSquare(x, y, color) {
        context.fillStyle = color;
        context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
        context.strokeStyle = "#000";
        context.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
    }

const piece = {
        shape: [],
        color: ""
    };

function generatePiece() {
        const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
        piece.shape = randomShape;
        piece.color = colors[Math.floor(Math.random() * colors.length)];
        piece.x = Math.floor(cols / 2) - Math.floor(piece.shape[0].length / 2);
        piece.y = 0;
    }

function rotatePiece() {
        const originalShape = piece.shape;
        piece.shape = piece.shape[0].map((_, i) => piece.shape.map(row => row[i])).reverse();
        if (!validMove()) {
            piece.shape = originalShape;
        }
    }

function moveLeft() {
        piece.x--;
        if (!validMove()) {
            piece.x++;
        }
    }

function moveRight() {
        piece.x++;
        if (!validMove()) {
            piece.x--;
        }
    }

function playGame() {
        document.addEventListener("keydown", handleKeyPress);
        generatePiece();
        setInterval(() => {
            drawGrid();
            drawPiece();
            moveDown();
        }, 500);
    }

playGame();
</script>
</body>
</html>