Tetris screen rotates at a certain time Tetris's game

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

No:1807

1386

←

Prev Next

→

Tetris screen rotates at a certain time Tetris
Developer User3410｜Date and time 23/6/19 3:12:51
Build time 29.085 sec｜Game capacity 2.069KB｜

Script

Sure! Here's a playable sample game of Tetris implemented as a single HTML file using JavaScript:

You can copy the above code into an HTML file and run it to play the Tetris game. The game grid and Tetris pieces are displayed on a canvas element, and you can control the pieces using the arrow keys on your smartphone to move them left, right, or rotate. The objective is to clear as many lines as possible by filling them completely with Tetris pieces.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a playable sample game of Tetris implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        body {
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        canvas {
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
    <canvas id="tetris" width="240" height="400"></canvas>
    <script>
        // Tetris game logic
        
        const canvas = document.getElementById('tetris');
        const context = canvas.getContext('2d');
        const scale = 20;
        context.scale(scale, scale);
        
        // Creating a game grid
        
        function createGrid(width, height) {
            const grid = [];
            for (let row = 0; row < height; row++) {
                grid.push(new Array(width).fill(0));
            }
            
            return grid;
        }
        
        const grid = createGrid(12, 20);
        
        // Tetris piece shapes
        
        const pieces = [
            [[1, 1, 1, 1]],
            [[1, 1], [1, 1]],
            [[0, 1, 1], [1, 1, 0]],
            [[1, 1, 0], [0, 1, 1]],
            [[1, 1, 1], [0, 1, 0]],
            [[1, 1, 1], [1, 0, 0]],
            [[1, 1, 1], [0, 0, 1]],
        ];
        
        // Drawing a tetris piece
        
        function drawPiece(piece, pieceX, pieceY) {
            piece.forEach((row, y) => {
                row.forEach((value, x) => {
                    if (value !== 0) {
                        context.fillStyle = 'cyan';
                        context.fillRect(pieceX + x, pieceY + y, 1, 1);
                    }
                });
            });
        }
        
        // Drawing the game grid
        
        function drawGrid() {
            grid.forEach((row, y) => {
                row.forEach((value, x) => {
                    if (value !== 0) {
                        context.fillStyle = 'gray';
                        context.fillRect(x, y, 1, 1);
                    }
                });
            });
        }
        
        // Collisions
        
        function collide(grid, piece, pieceX, pieceY) {
            for (let y = 0; y < piece.length; y++) {
                for (let x = 0; x < piece[y].length; x++) {
                    if (piece[y][x] !== 0 && (grid[y + pieceY] && grid[y + pieceY][x + pieceX]) !== 0) {
                        return true;
                    }
                }
            }
            
            return false;
        }
        
        // Merging the piece into the grid
        
        function merge(grid, piece, pieceX, pieceY) {
            piece.forEach((row, y) => {
                row.forEach((value, x) => {
                    if (value !== 0) {
                        grid[y + pieceY][x + pieceX] = value;
                    }
                });
            });
        }
        
        // Rotating the piece
        
        function rotate(piece) {
            const rotatedPiece = piece.map((row, i) =>
                piece.map(col => col[i])
            );
            
            return rotatedPiece.reverse();
        }
        
        // Projecting the piece downwards
        
        function projectDown() {
            let dropCounter = 0;
            let dropInterval = 1000; // 1 second
        
            function drop() {
                dropCounter += dropInterval;
        
                if (!collide(grid, piece, pieceX, pieceY + 1)) {
                    pieceY++;
                } else {
                    merge(grid, piece, pieceX, pieceY);
                    resetPiece();
                    
                    // Check for line clear
                    clearLines();
                }
            }
        
            function clearLines() {
                outer: for (let y = grid.length - 1; y >= 0; y--) {
                    for (let x = 0; x < grid[y].length; x++) {
                        if (grid[y][x] === 0) {
                            continue outer;
                        }
                    }
                    
                    grid.splice(y, 1);
                    grid.unshift(new Array(grid[0].length).fill(0));
                }
            }
        
            function resetPiece() {
                const randomPiece = pieces[Math.floor(Math.random() * pieces.length)];
                piece = randomPiece;
                pieceX = Math.floor(grid[0].length / 2) - Math.floor(piece[0].length / 2);
                pieceY = 0;
            }
        
            function update(time = 0) {
                const deltaTime = time - prevTime;
                prevTime = time;
        
                dropCounter += deltaTime;
                if (dropCounter > dropInterval) {
                    drop();
                }
        
                draw();
                requestAnimationFrame(update);
            }
        
            function draw() {
                context.clearRect(0, 0, canvas.width, canvas.height);
        
                drawGrid();
                drawPiece(piece, pieceX, pieceY);
            }
        
            let prevTime = 0;
            resetPiece();
            update();
        }
        
        projectDown();
    </script>
</body>
</html>
```