A game that is a mix of tetris and tetris and double tetris title.'s game

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

No:10602

215

←

Prev Next

→

A game that is a mix of tetris and tetris and doub..ALL
Developer User3408｜Date and time 23/8/1 8:45:21
Build time 41.648 sec｜Game capacity 7.048KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Doble Tetris</title>
    <style>
        #game-container {
            width: 240px;
            height: 355px;
            background-color: #222;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <canvas id="game-canvas"></canvas>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('game-canvas');
            const context = canvas.getContext('2d');
            
            const COLS = 10;
            const ROWS = 20;
            const BLOCK_SIZE = 20;
            const SHAPE_WIDTH = 4;
            const SHAPE_HEIGHT = 4;
            const SHAPES = [
                [[1, 1, 1, 1]],
                [[1, 1], [1, 1]],
                [[1, 1, 1], [0, 1, 0]],
                [[1, 1, 1], [1, 0, 0]],
                [[1, 1, 1], [0, 0, 1]],
                [[1, 1, 0], [0, 1, 1]],
                [[0, 1, 1], [1, 1, 0]]
            ];
            
            let board, currentShape, currentX, currentY, score;
            
            // Initialize the game
            function init() {
                board = [];
                for (let row = 0; row < ROWS; row++) {
                    board[row] = [];
                    for (let col = 0; col < COLS; col++) {
                        board[row][col] = 0;
                    }
                }
                score = 0;
                newShape();
            }
            
            // Generate a new random shape
            function newShape() {
                const index = Math.floor(Math.random() * SHAPES.length);
                currentShape = SHAPES[index];
                currentX = Math.floor(COLS / 2) - Math.floor(SHAPE_WIDTH / 2);
                currentY = 0;
                if (collision()) {
                    gameOver();
                }
            }
            
            // Check for collision
            function collision() {
                for (let row = 0; row < SHAPE_HEIGHT; row++) {
                    for (let col = 0; col < SHAPE_WIDTH; col++) {
                        if (currentShape[row] && currentShape[row][col] && (
                            board[currentY + row] && board[currentY + row][currentX + col]) !== 0
                        ) {
                            return true;
                        }
                    }
                }
                return false;
            }
            
            // Merge current shape into the board
            function merge() {
                for (let row = 0; row < SHAPE_HEIGHT; row++) {
                    for (let col = 0; col < SHAPE_WIDTH; col++) {
                        if (currentShape[row] && currentShape[row][col]) {
                            board[currentY + row][currentX + col] = 1;
                        }
                    }
                }
                // Check if any lines are filled and clear them
                for (let row = ROWS - 1; row >= 0; row--) {
                    if (board[row].every(cell => cell === 1)) {
                        board.splice(row, 1);
                        board.unshift(Array(COLS).fill(0));
                        score++;
                    }
                }
                newShape();
            }
            
            // Handle key events
            document.addEventListener('keydown', event => {
                if (event.keyCode === 37) { // Left arrow key
                    move(-1);
                } else if (event.keyCode === 39) { // Right arrow key
                    move(1);
                } else if (event.keyCode === 40) { // Down arrow key
                    drop();
                } else if (event.keyCode === 38) { // Up arrow key
                    rotate();
                }
            });
            
            // Move the current shape horizontally
            function move(direction) {
                currentX += direction;
                if (collision()) {
                    currentX -= direction;
                }
            }
            
            // Drop the current shape down
            function drop() {
                currentY++;
                if (collision()) {
                    currentY--;
                    merge();
                }
            }
            
            // Rotate the current shape
            function rotate() {
                const prevShape = currentShape;
                currentShape = currentShape[0].map((_, i) => currentShape.map(row => row[i])).reverse();
                if (collision()) {
                    currentShape = prevShape;
                }
            }
            
            // Game over
            function gameOver() {
                alert(`Game Over!\nFinal Score: ${score}`);
                init();
            }
            
            // Draw the game
            function draw() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.fillStyle = '#000';
                context.fillRect(0, 0, canvas.width, canvas.height);
                drawBoard();
                drawShape();
            }
            
            // Draw the board
            function drawBoard() {
                for (let row = 0; row < ROWS; row++) {
                    for (let col = 0; col < COLS; col++) {
                        if (board[row][col]) {
                            context.fillStyle = '#888';
                            context.fillRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                            context.strokeStyle = '#444';
                            context.strokeRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                        }
                    }
                }
            }
            
            // Draw the current shape
            function drawShape() {
                for (let row = 0; row < SHAPE_HEIGHT; row++) {
                    for (let col = 0; col < SHAPE_WIDTH; col++) {
                        if (currentShape[row] && currentShape[row][col]) {
                            context.fillStyle = '#333';
                            context.fillRect((currentX + col) * BLOCK_SIZE, (currentY + row) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                            context.strokeStyle = '#222';
                            context.strokeRect((currentX + col) * BLOCK_SIZE, (currentY + row) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                        }
                    }
                }
            }
            
            // The game loop
            function loop() {
                draw();
                drop();
                if (score >= 20) {
                    gameOver();
                } else {
                    setTimeout(() => requestAnimationFrame(loop), 1000 / score);
                }
            }
            
            // Start the game
            init();
            loop();
        });
    </script>
</body>
</html>