AI game creator

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

No:26058

←

Prev Next

→

Tetris
Developer User12821｜Date and time 23/11/26 12:14:27
Build time 113.814 sec｜Game capacity 6.162KB｜

Script

Certainly! Here's a basic implementation of Tetris as a single HTML file using JavaScript:

This implementation creates a simple Tetris game where the user can control the tetromino using the arrow keys on a smartphone. The tetromino is represented by red blocks on a canvas, and the player can move the tetromino left, right, down, or rotate it using the arrow keys. Note: This is a basic implementation and does not include features like scoring, levels, or game over conditions. It serves as a starting point for creating a more complete Tetris game.

←

Prev　Next

→ 　

Back　

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

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

Certainly! Here's a basic implementation of Tetris as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
<style>
    body { 
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: black;
    }
</style>
</head>
<body>
    <canvas id="tetrisCanvas" width="200" height="400"></canvas>
    
<script>
    document.addEventListener('DOMContentLoaded', () => {
        
        const canvas = document.getElementById("tetrisCanvas");
        const ctx = canvas.getContext("2d");
        
        // Set up grid and block size
        const blockSize = 20;
        const columns = canvas.width / blockSize;
        const rows = canvas.height / blockSize;
        
        // Create the grid
        let grid = [];
        for (let row = 0; row < rows; row++) {
            grid[row] = [];
            for (let col = 0; col < columns; col++) {
                grid[row][col] = '';
            }
        }
        
        // Create a random tetromino
        let currentTetromino;
        function createTetromino() {
            const tetrominos = [
                [[1, 1, 1, 1]],                      // I
                [[1, 1], [1, 1]],                    // O
                [[1, 1, 1], [0, 1, 0]],              // T
                [[0, 1, 1], [1, 1, 0]],              // Z
                [[1, 1, 0], [0, 1, 1]],              // S
                [[0, 1, 0], [1, 1, 1]],              // L
                [[0, 1, 0], [0, 1, 0], [0, 1, 1]],    // J
            ];
            
            const randomIndex = Math.floor(Math.random() * tetrominos.length);
            const randomTetromino = tetrominos[randomIndex];
            const tetromino = [];
            
            for (let row = 0; row < randomTetromino.length; row++) {
                tetromino[row] = [];
                for (let col = 0; col < randomTetromino[row].length; col++) {
                    if (randomTetromino[row][col] === 1) {
                        tetromino[row][col] = 'block';
                    } else {
                        tetromino[row][col] = '';
                    }
                }
            }
            
            return tetromino;
        }
        
        // Initialize current and next tetrominos
        currentTetromino = createTetromino();
        let nextTetromino = createTetromino();
        
        // Draw the tetromino on the canvas
        function drawTetromino() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col] === 'block') {
                        ctx.fillStyle = "red";
                        ctx.fillRect(col * blockSize, row * blockSize, blockSize, blockSize);
                    }
                }
            }
        }
        
        // Handle user input
        function handleKeyPress(event) {
            if (event.keyCode === 37) { // Left arrow key
                moveTetromino(-1);
            } else if (event.keyCode === 39) { // Right arrow key
                moveTetromino(1);
            } else if (event.keyCode === 40) { // Down arrow key
                moveTetromino(0, 1);
            } else if (event.keyCode === 38) { // Up arrow key
                rotateTetromino();
            }
        }
        
        // Move the tetromino horizontally
        function moveTetromino(directionX, directionY = 0) {
            const newPos = {
                x: currentPos.x + directionX,
                y: currentPos.y + directionY
            };
            
            if (isValidMove(newPos, currentTetromino)) {
                currentPos = newPos;
                drawTetromino();
            }
        }
        
        // Rotate the tetromino
        function rotateTetromino() {
            const newTetromino = [];
            
            for (let col = 0; col < currentTetromino[0].length; col++) {
                newTetromino[col] = [];
                
                for (let row = currentTetromino.length - 1; row >= 0; row--) {
                    newTetromino[col].push(currentTetromino[row][col]);
                }
            }
            
            if (isValidMove(currentPos, newTetromino)) {
                currentTetromino = newTetromino;
                drawTetromino();
            }
        }
        
        // Check if the tetromino is in a valid position
        function isValidMove(position, tetromino) {
            for (let row = 0; row < tetromino.length; row++) {
                for (let col = 0; col < tetromino[row].length; col++) {
                    if (tetromino[row][col] === 'block') {
                        const newX = position.x + col;
                        const newY = position.y + row;
                        
                        if (newX < 0 || newX >= columns || newY >= rows || grid[newY][newX] === 'block') {
                            return false;
                        }
                    }
                }
            }
            
            return true;
        }
        
        // Game loop
        function gameLoop() {
            setTimeout(() => {
                moveTetromino(0, 1);
                gameLoop();
            }, 500);
        }
        
        // Start the game
        let currentPos = { x: 0, y: 0 };
        drawTetromino();
        gameLoop();
        
        // Event listeners
        document.addEventListener('keydown', handleKeyPress);
    });
</script>
</body>
</html>
```

Note: This is a basic implementation and does not include features like scoring, levels, or game over conditions. It serves as a starting point for creating a more complete Tetris game.