AI game creator

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

No:7424

2385

←

Prev Next

→

Tetris
Developer User3510｜Date and time 23/7/7 17:35:31
Build time 32.257 sec｜Game capacity 5.951KB｜

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 {
            background-color: #000000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

canvas {
            border: 1px solid #ffffff;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="240" height="400"></canvas>

const ROWS = 20;
        const COLS = 10;
        const BLOCK_SIZE = 20;

const tetriminoes = [
            [[1, 1, 1, 1]],
            [[1, 1], [1, 1]],
            [[1, 1, 0], [0, 1, 1]],
            [[0, 1, 1], [1, 1, 0]],
            [[0, 1, 0], [1, 1, 1]],
            [[1, 0, 0], [1, 1, 1]],
            [[1, 1, 1], [0, 0, 1]]
        ];
        const tetriminoColors = [
            '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff', '#ffa500'
        ];

let grid = createGrid();
        let currentTetrimino = getRandomTetrimino();
        let currentPosition = { x: 0, y: 0 };

function createGrid() {
            return Array.from({ length: ROWS }, () => Array(COLS).fill(0));
        }

function getRandomTetrimino() {
            const index = Math.floor(Math.random() * tetriminoes.length);
            return tetriminoes[index];
        }

function drawBlock(x, y, color) {
            context.fillStyle = color;
            context.fillRect(x, y, BLOCK_SIZE, BLOCK_SIZE);
            context.strokeStyle = '#000000';
            context.strokeRect(x, y, BLOCK_SIZE, BLOCK_SIZE);
        }

function drawGrid() {
            for (let row = 0; row < ROWS; row++) {
                for (let col = 0; col < COLS; col++) {
                    const colorIndex = grid[row][col];

if (colorIndex > 0) {
                        drawBlock(col * BLOCK_SIZE, row * BLOCK_SIZE, tetriminoColors[colorIndex - 1]);
                    }
                }
            }
        }

function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawGrid();
            drawTetrimino();
        }

function rotateTetrimino() {
            const originalTetrimino = currentTetrimino;
            currentTetrimino = currentTetrimino[0].map((_, index) =>
                currentTetrimino.map(row => row[index])
            );
            if (isCollision()) {
                currentTetrimino = originalTetrimino;
            }
        }

function moveLeft() {
            currentPosition.x -= 1;
            if (isCollision()) {
                currentPosition.x += 1;
            }
        }

function moveRight() {
            currentPosition.x += 1;
            if (isCollision()) {
                currentPosition.x -= 1;
            }
        }

function handleKeyPress(event) {
            switch (event.keyCode) {
                case 37: // Left arrow
                    moveLeft();
                    break;
                case 39: // Right arrow
                    moveRight();
                    break;
                case 40: // Down arrow
                    moveDown();
                    break;
                case 38: // Up arrow
                    rotateTetrimino();
                    break;
            }
        }

setInterval(() => {
            moveDown();
            draw();
        }, 1000);

document.addEventListener('keydown', handleKeyPress);
    </script>
</body>
</html>