AI game creator

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

No:38019

172

←

Prev Next

→

Tetris
Developer User17196｜Date and time 24/1/22 5:55:18
Build time 26.8 sec｜Game capacity 10.23KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tetris</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="tetris" width="240" height="400"></canvas>

// Set up the initial game state
            const gridSize = 20;
            const rows = canvas.height / gridSize;
            const columns = canvas.width / gridSize;
            const emptyCellColor = '#ffffff';
            const grid = createGrid(rows, columns);

let currentPiece = generateRandomPiece();
            let pieceX = Math.floor(columns / 2) - Math.floor(currentPiece[0].length / 2);
            let pieceY = 0;

let score = 0;

// Handle user input for mobile devices
            const swipeThresholdX = 30;
            const swipeThresholdY = 30;
            let touchStartX = 0;
            let touchStartY = 0;

document.addEventListener('touchstart', handleTouchStart);
            document.addEventListener('touchmove', handleTouchMove);

// Game loop
            function gameLoop() {
                update();
                draw();
                requestAnimationFrame(gameLoop);
            }

function update() {
                if (isCollision(pieceX, pieceY + 1, currentPiece, grid)) {
                    mergePiece();
                    checkForCompletedRows();
                    currentPiece = generateRandomPiece();
                    pieceX = Math.floor(columns / 2) - Math.floor(currentPiece[0].length / 2);
                    pieceY = 0;

if (isCollision(pieceX, pieceY, currentPiece, grid)) {
                        // Game over
                        alert('Game Over!');
                        resetGame();
                    }
                } else {
                    pieceY++;
                }
            }

function draw() {
                drawGrid();
                drawPiece();
                drawScore();
            }

function drawGrid() {
                context.fillStyle = emptyCellColor;
                context.fillRect(0, 0, canvas.width, canvas.height);

for (let row = 0; row < rows; row++) {
                    for (let col = 0; col < columns; col++) {
                        const cellX = col * gridSize;
                        const cellY = row * gridSize;
                        const cell = grid[row][col];

if (cell) {
                            context.fillStyle = cell;
                            context.fillRect(cellX, cellY, gridSize, gridSize);
                        }
                    }
                }
            }

function drawPiece() {
                for (let row = 0; row < currentPiece.length; row++) {
                    for (let col = 0; col < currentPiece[row].length; col++) {
                        if (currentPiece[row][col]) {
                            const cellX = (pieceX + col) * gridSize;
                            const cellY = (pieceY + row) * gridSize;

context.fillStyle = currentPiece[row][col];
                            context.fillRect(cellX, cellY, gridSize, gridSize);
                        }
                    }
                }
            }

function drawScore() {
                context.fillStyle = '#000000';
                context.font = '16px Arial';
                context.fillText(`Score: ${score}`, 10, 20);
            }

function handleTouchStart(event) {
                touchStartX = event.touches[0].clientX;
                touchStartY = event.touches[0].clientY;
            }

function handleTouchMove(event) {
                const touchEndX = event.touches[0].clientX;
                const touchEndY = event.touches[0].clientY;
                const deltaX = touchEndX - touchStartX;
                const deltaY = touchEndY - touchStartY;

if (Math.abs(deltaX) > Math.abs(deltaY)) {
                    if (deltaX > swipeThresholdX) {
                        movePieceRight();
                    } else if (deltaX < -swipeThresholdX) {
                        movePieceLeft();
                    }
                } else {
                    if (deltaY > swipeThresholdY) {
                        rotatePiece();
                    }
                }
            }

function rotatePiece() {
                const rotatedPiece = rotateMatrix(currentPiece);

if (!isCollision(pieceX, pieceY, rotatedPiece, grid)) {
                    currentPiece = rotatedPiece;
                }
            }

function movePieceLeft() {
                if (!isCollision(pieceX - 1, pieceY, currentPiece, grid)) {
                    pieceX--;
                }
            }

function movePieceRight() {
                if (!isCollision(pieceX + 1, pieceY, currentPiece, grid)) {
                    pieceX++;
                }
            }

function dropPiece() {
                while (!isCollision(pieceX, pieceY + 1, currentPiece, grid)) {
                    pieceY++;
                }
            }

function mergePiece() {
                for (let row = 0; row < currentPiece.length; row++) {
                    for (let col = 0; col < currentPiece[row].length; col++) {
                        if (currentPiece[row][col]) {
                            const gridRow = pieceY + row;
                            const gridCol = pieceX + col;

grid[gridRow][gridCol] = currentPiece[row][col];
                        }
                    }
                }
            }

function checkForCompletedRows() {
                let rowsToClear = [];

for (let row = 0; row < rows; row++) {
                    if (grid[row].every(cell => cell !== emptyCellColor)) {
                        rowsToClear.push(row);
                    }
                }

if (rowsToClear.length > 0) {
                    clearRows(rowsToClear);
                    score += rowsToClear.length * 10;
                }
            }

function clearRows(rowsToClear) {
                for (let row of rowsToClear) {
                    grid.splice(row, 1);
                    grid.unshift(new Array(columns).fill(emptyCellColor));
                }
            }

function isCollision(x, y, piece, grid) {
                for (let row = 0; row < piece.length; row++) {
                    for (let col = 0; col < piece[row].length; col++) {
                        if (piece[row][col]) {
                            const gridX = x + col;
                            const gridY = y + row;

if (gridY >= rows || gridX < 0 || gridX >= columns || gridY < 0 || grid[gridY][gridX] !== emptyCellColor) {
                                return true;
                            }
                        }
                    }
                }

return false;
            }

function resetGame() {
                grid.splice(0, rows);
                grid.unshift(new Array(columns).fill(emptyCellColor));
                score = 0;
            }

function rotateMatrix(matrix) {
                const rows = matrix.length;
                const columns = matrix[0].length;
                const result = [];

for (let col = 0; col < columns; col++) {
                    const newRow = [];

for (let row = rows - 1; row >= 0; row--) {
                        newRow.push(matrix[row][col]);
                    }

result.push(newRow);
                }

return result;
            }

function generateRandomPiece() {
                const pieces = [
                    // S
                    [
                        ['empty', 'piece', 'piece'],
                        ['piece', 'piece', 'empty'],
                        ['empty', 'empty', 'empty']
                    ],
                    // Z
                    [
                        ['piece', 'piece', 'empty'],
                        ['empty', 'piece', 'piece'],
                        ['empty', 'empty', 'empty']
                    ],
                    // T
                    [
                        ['empty', 'piece', 'empty'],
                        ['piece', 'piece', 'piece'],
                        ['empty', 'empty', 'empty']
                    ],
                    // O
                    [
                        ['piece', 'piece'],
                        ['piece', 'piece']
                    ],
                    // L
                    [
                        ['empty', 'empty', 'piece'],
                        ['piece', 'piece', 'piece'],
                        ['empty', 'empty', 'empty']
                    ],
                    // J
                    [
                        ['piece', 'empty', 'empty'],
                        ['piece', 'piece', 'piece'],
                        ['empty', 'empty', 'empty']
                    ],
                    // I
                    [
                        ['empty', 'empty', 'empty', 'empty'],
                        ['piece', 'piece', 'piece', 'piece'],
                        ['empty', 'empty', 'empty', 'empty'],
                        ['empty', 'empty', 'empty', 'empty']
                    ]
                ];

return pieces[Math.floor(Math.random() * pieces.length)];
            }

function createGrid(rows, columns) {
                const grid = [];

for (let row = 0; row < rows; row++) {
                    grid.push(new Array(columns).fill(emptyCellColor));
                }

return grid;
            }

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