A game that is a mixture of tetris and tetris or double tetris.'s game | AI game creator

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

No:10450

208

A game that is a mixture of tetris and tetris or d..ALL
Developer User3408｜Date and time 23/7/31 12:47:06
Build time 52.499 sec｜Game capacity 9.105KB｜

0

→ 　

0　

0　

　
　
　
　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Doble Tetris</title>
    <style>
        body {
            background-color: #000;
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }

#tetris {
            background-color: #111;
            border: 2px solid #666;
            width: 300px;
            height: 600px;
            margin: 0 auto;
        }

#tetris canvas {
            display: block;
            margin: 20px auto;
            border: 1px solid #333;
        }

#score {
            color: #fff;
            text-align: center;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div id="tetris">
        <canvas id="tetris-board" width="240" height="480"></canvas>
        <div id="score">0</div>
    </div>

<script>
        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('tetris-board');
            const context = canvas.getContext('2d');
        
            // Set the width and height of each block in Tetris
            const blockSize = 24;
            const columnCount = 10;
            const rowCount = 20;
        
            // Calculate the actual width and height of the canvas
            canvas.width = blockSize * columnCount;
            canvas.height = blockSize * rowCount;
        
            // Initialize the playing area
            const playfield = [];
            for (let row = 0; row < rowCount; row++) {
                playfield[row] = [];
                for (let col = 0; col < columnCount; col++) {
                    playfield[row][col] = 0;
                }
            }
        
            // Define the different Tetris shapes
            const shapes = [
                [1, 1, 1, 1], // I
                [1, 1, 1, 0, 1], // J
                [1, 1, 1, 0, 0, 0, 1], // L
                [1, 1, 0, 0, 1, 1], // O
                [0, 1, 1, 1, 1], // Z
                [1, 1, 0, 1, 1, 0, 1] // T
            ];
        
            // Define the colors of the Tetris blocks
            const colors = [
                '#000', // Empty
                '#e91e63', // Pink
                '#9c27b0', // Purple
                '#9e9e9e', // Gray
                '#f44336', // Red
                '#03a9f4', // Blue
                '#ff9800' // Orange
            ];
        
            // Initialize the current piece
            let currentShape = getRandomShape();
            let currentX = 0;
            let currentY = 0;
        
            // Initialize the score
            let score = 0;
        
            // Generate a random Tetris shape
            function getRandomShape() {
                const randomIndex = Math.floor(Math.random() * shapes.length);
                const shape = shapes[randomIndex];
        
                return {
                    shape: shape,
                    color: colors[randomIndex + 1],
                    row: 0,
                    col: Math.floor((columnCount - shape.length) / 2)
                };
            }
        
            // Draw a Tetris shape
            function drawShape(shape, x, y, color) {
                shape.forEach((row, rowIndex) => {
                    row.forEach((block, colIndex) => {
                        if (block) {
                            drawBlock(x + colIndex, y + rowIndex, color);
                        }
                    });
                });
            }
        
            // Draw a single block
            function drawBlock(x, y, color) {
                context.fillStyle = color;
                context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
                context.strokeStyle = '#333';
                context.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
            }
        
            // Clear the playing area
            function clearPlayfield() {
                playfield.forEach((row, rowIndex) => {
                    row.forEach((block, colIndex) => {
                        playfield[rowIndex][colIndex] = 0;
                    });
                });
            }
        
            // Check if a piece collides with the playfield or other pieces
            function hasCollision() {
                for (let row = 0; row < currentShape.shape.length; row++) {
                    for (let col = 0; col < currentShape.shape[row].length; col++) {
                        if (
                            currentShape.shape[row][col] &&
                            (playfield[currentShape.row + row] &&
                                playfield[currentShape.row + row][currentShape.col + col]) !== 0
                        ) {
                            return true;
                        }
                    }
                }
        
                return false;
            }
        
            // Rotate a Tetris shape
            function rotateShape(shape) {
                const rowCount = shape.length;
                const colCount = shape[0].length;
        
                const newShape = [];
                for (let row = 0; row < rowCount; row++) {
                    newShape[row] = [];
                    for (let col = 0; col < colCount; col++) {
                        newShape[row][col] = shape[colCount - col - 1][row];
                    }
                }
        
                return newShape;
            }
        
            // Merge the current piece into the playfield
            function mergePiece() {
                currentShape.shape.forEach((row, rowIndex) => {
                    row.forEach((block, colIndex) => {
                        if (block) {
                            playfield[currentY + rowIndex][currentX + colIndex] = 1;
                        }
                    });
                });
            }
        
            // Check if a row is full and should be cleared
            function checkRows() {
                for (let row = 0; row < rowCount; row++) {
                    if (playfield[row].every(block => block !== 0)) {
                        playfield.splice(row, 1);
                        playfield.unshift(Array(columnCount).fill(0));
        
                        score += 10;
                    }
                }
            }
        
            // Draw the Tetris playfield
            function drawPlayfield() {
                playfield.forEach((row, rowIndex) => {
                    row.forEach((block, colIndex) => {
                        if (block) {
                            drawBlock(colIndex, rowIndex, colors[block]);
                        }
                    });
                });
            }
        
            // Game loop
            function gameLoop() {
                clearPlayfield();
        
                if (currentShape) {
                    if (hasCollision()) {
                        mergePiece();
                        checkRows();
        
                        if (currentY <= 0) {
                            // Game over
                            score = 0;
                            playfield.forEach(row => {
                                row.fill(0);
                            });
                        } else {
                            currentShape = getRandomShape();
                            currentX = 0;
                            currentY = 0;
                        }
                    }
        
                    drawShape(
                        currentShape.shape,
                        currentShape.col,
                        currentShape.row,
                        currentShape.color
                    );
                }
        
                drawPlayfield();
                document.getElementById('score').innerText = score.toString();
        
                setTimeout(gameLoop, 1000 / 3);
            }
        
            // Handle key presses
            document.addEventListener('keydown', event => {
                switch (event.keyCode) {
                    case 37: // Left arrow
                        currentX--;
                        if (hasCollision()) currentX++; // Revert
                        break;
        
                    case 38: // Up arrow
                        const rotatedShape = rotateShape(currentShape.shape);
                        if (!hasCollision(rotatedShape)) {
                            currentShape.shape = rotatedShape;
                        }
                        break;
        
                    case 39: // Right arrow
                        currentX++;
                        if (hasCollision()) currentX--; // Revert
                        break;
        
                    case 40: // Down arrow
                        currentY++;
                        if (hasCollision()) currentY--; // Revert
                        break;
                }
            });
        
            // Start the game loop
            gameLoop();
        });
    </script>
</body>
</html>