AI game creator

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

No:52587

235

←

Prev Next

→

Tetris
Developer User18878｜Date and time 24/3/23 8:01:14
Build time 3.093 sec｜Game capacity 5.979KB｜

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>
```