AI game creator

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

No:39684

←

Prev Next

→

Tetris
Developer User17775｜Date and time 24/1/29 20:21:23
Build time 40.657 sec｜Game capacity 8.055KB｜

Script

Sure! Here's an example of a simple Tetris game implemented as a single HTML file using JavaScript. Please note that this implementation is not a fully-featured game, but rather a basic version to give you an idea. You can further enhance it with additional features and graphics as needed.

To play the game, you can open the HTML file in a web browser (preferably on a smartphone) and use the keyboard controls (Arrow keys) to move the tetrominoes and rotate them (Up Arrow). You can also restart the game by pressing Enter when the game is over. Please note that this implementation uses basic keyboard controls instead of smartphone touch controls. Implementing touch controls would require additional code and event handling specifically tailored for touch devices.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #fafafa;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="240" height="400"></canvas>

// Define tetromino shapes
        var shapes = [
            [    // I-shape
                [1, 1, 1, 1]
            ],
            [    // J-shape
                [1, 1, 1],
                [0, 0, 1]
            ],
            [    // L-shape
                [1, 1, 1],
                [1, 0, 0]
            ],
            [    // O-shape
                [1, 1],
                [1, 1]
            ],
            [    // S-shape
                [0, 1, 1],
                [1, 1, 0]
            ],
            [    // T-shape
                [1, 1, 1],
                [0, 1, 0]
            ],
            [    // Z-shape
                [1, 1, 0],
                [0, 1, 1]
            ]
        ];

// Create grid and initialize game
        function createGrid() {
            for (var row = 0; row < 20; row++) {
                grid[row] = [];
                for (var col = 0; col < 10; col++) {
                    grid[row][col] = 0;
                }
            }
        }

// Generate a random tetromino
        function generateTetromino() {
            var rand = Math.floor(Math.random() * shapes.length);
            var shape = shapes[rand];
            var col = Math.floor(Math.random() * (10 - shape[0].length + 1));
            var row = 0;

return {
                shape: shape,
                row: row,
                col: col
            };
        }

// Draw a tetromino on the canvas
        function drawTetromino() {
            for (var row = 0; row < piece.shape.length; row++) {
                for (var col = 0; col < piece.shape[row].length; col++) {
                    if (piece.shape[row][col]) {
                        drawBlock(piece.col + col, piece.row + row);
                    }
                }
            }
        }

// Draw a single block on the canvas
        function drawBlock(col, row) {
            ctx.fillStyle = "#000";
            ctx.fillRect(col * 24, row * 24, 24, 24);
            ctx.strokeStyle = "#fff";
            ctx.strokeRect(col * 24, row * 24, 24, 24);
        }

// Clear the canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

// Move the tetromino down
        function moveDown() {
            if (!collision(0, 1, piece.shape)) {
                piece.row++;
            } else {
                mergePiece();
            }
        }

// Move the tetromino left
        function moveLeft() {
            if (!collision(-1, 0, piece.shape)) {
                piece.col--;
            }
        }

// Move the tetromino right
        function moveRight() {
            if (!collision(1, 0, piece.shape)) {
                piece.col++;
            }
        }

// Rotate the tetromino
        function rotate() {
            var rotated = rotateMatrix(piece.shape);
            if (!collision(0, 0, rotated)) {
                piece.shape = rotated;
            }
        }

// Rotate a matrix
        function rotateMatrix(matrix) {
            var rows = matrix.length;
            var cols = matrix[0].length;
            var res = [];
            
            for (var col = 0; col < cols; col++) {
                res[col] = [];
                for (var row = 0; row < rows; row++) {
                    res[col][row] = matrix[row][col];
                }
            }
            
            return res.reverse();
        }

// Check for collision with the walls or other blocks
        function collision(offsetCol, offsetRow, matrix) {
            for (var row = 0; row < matrix.length; row++) {
                for (var col = 0; col < matrix[row].length; col++) {
                    if (matrix[row][col] && (
                        grid[piece.row + row + offsetRow] &&
                        grid[piece.row + row + offsetRow][piece.col + col + offsetCol]) !== 0) {
                        return true;
                    }
                }
            }

return false;
        }

// Merge the piece with the grid
        function mergePiece() {
            for (var row = 0; row < piece.shape.length; row++) {
                for (var col = 0; col < piece.shape[row].length; col++) {
                    if (piece.shape[row][col]) {
                        grid[piece.row + row][piece.col + col] = 1;
                    }
                }
            }
            checkRows();
            piece = generateTetromino();
            if (collision(0, 0, piece.shape)) {
                gameOver = true;
            }
        }

// Check for completed rows and clear them
        function checkRows() {
            for (var i = grid.length - 1; i >= 0; i--) {
                if (grid[i].every(block => block === 1)) {
                    grid.splice(i, 1);
                    grid.unshift(new Array(10).fill(0));
                    score += 10;
                }
            }
        }

// Draw the grid on the canvas
        function drawGrid() {
            for (var row = 0; row < 20; row++) {
                for (var col = 0; col < 10; col++) {
                    if (grid[row][col]) {
                        drawBlock(col, row);
                    }
                }
            }
        }

// Main game loop
        function gameLoop() {
            if (!gameOver) {
                clearCanvas();
                drawGrid();
                drawTetromino();
                moveDown();
            } else {
                ctx.fillStyle = "#000";
                ctx.font = "24px Arial";
                ctx.fillText("Game Over!", 70, canvas.height / 2);
            }
        }

// Start the game
        function startGame() {
            createGrid();
            piece = generateTetromino();
            setInterval(gameLoop, 500);
        }

// Keyboard controls
        document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowLeft") {
                moveLeft();
            } else if (event.key === "ArrowRight") {
                moveRight();
            } else if (event.key === "ArrowDown") {
                moveDown();
            } else if (event.key === "ArrowUp") {
                rotate();
            } else if (event.key === "Enter" && gameOver) {
                location.reload();
            }
        });

// Start the game when the page loads
        startGame();
    </script>
</body>
</html>
```

Please note that this implementation uses basic keyboard controls instead of smartphone touch controls. Implementing touch controls would require additional code and event handling specifically tailored for touch devices.