AI game creator

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

No:21714

186

←

Prev Next

→

Tetris
Developer User10008｜Date and time 23/10/17 19:38:03
Build time 207.676 sec｜Game capacity 7.987KB｜

Script

Sure! Here's an example of a simple Tetris game implemented as a single HTML file using JavaScript:

In this implementation, the game is played using the keyboard arrow keys to move the tetromino and the up arrow key to rotate it. The goal is to clear as many lines as possible by filling complete rows with tetromino blocks. Once a row is filled completely, it will be cleared, and the remaining blocks will shift down. If the blocks reach the top of the grid, the game is over. Note: This is a simplified version of Tetris and can be further expanded and improved based on specific requirements and design preferences.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple Tetris game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="200" height="400"></canvas>

// Define the block sizes and colors
        const blockSize = 20;
        const blockColors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFA500'];

// Tetris grid
        const gridWidth = 10;
        const gridHeight = 20;
        let grid = [];

// Timer variables
        let dropTimer;
        let dropInterval = 1000; // Drop every second

// Active tetromino
        let currentTetromino;
        let tetrominoX;
        let tetrominoY;

// Tetromino shapes
        const tetrominos = [
            [[1, 1, 1, 1]], // I
            [[1, 1], [1, 1]], // O
            [[1, 0, 0], [1, 1, 1]], // L
            [[0, 0, 1], [1, 1, 1]], // J
            [[1, 1, 0], [0, 1, 1]], // Z
            [[0, 1, 1], [1, 1, 0]], // S
            [[1, 1, 1], [0, 1, 0]] // T
        ];

// Generate a random tetromino shape
        function randomTetromino() {
            const randomIndex = Math.floor(Math.random() * tetrominos.length);
            const randomTetromino = tetrominos[randomIndex];
            return randomTetromino;
        }

// Initialize the grid with empty slots
        function createGrid() {
            for (let row = 0; row < gridHeight; row++) {
                grid[row] = [];
                for (let col = 0; col < gridWidth; col++) {
                    grid[row][col] = '';
                }
            }
        }

// Draw a block on the canvas
        function drawBlock(x, y, color) {
            context.fillStyle = color;
            const startX = x * blockSize;
            const startY = y * blockSize;
            context.fillRect(startX, startY, blockSize, blockSize);
        }

// Draw the entire grid
        function drawGrid() {
            for (let row = 0; row < gridHeight; row++) {
                for (let col = 0; col < gridWidth; col++) {
                    const blockColor = grid[row][col];
                    if (blockColor !== '') {
                        drawBlock(col, row, blockColor);
                    }
                }
            }
        }

// Draw the current tetromino
        function drawTetromino() {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        const x = tetrominoX + col;
                        const y = tetrominoY + row;
                        drawBlock(x, y, blockColors[tetrominos.indexOf(currentTetromino)]);
                    }
                }
            }
        }

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

// Move the current tetromino down
        function moveDown() {
            tetrominoY++;
            if (collision()) {
                tetrominoY--;
                mergeTetromino();
                clearLines();
                spawnTetromino();
            }
        }

// Move the current tetromino left
        function moveLeft() {
            tetrominoX--;
            if (collision()) {
                tetrominoX++;
            }
        }

// Move the current tetromino right
        function moveRight() {
            tetrominoX++;
            if (collision()) {
                tetrominoX--;
            }
        }

// Rotate the current tetromino
        function rotateTetromino() {
            const originalTetromino = currentTetromino;
            currentTetromino = rotateMatrix(currentTetromino);
            if (collision()) {
                currentTetromino = originalTetromino;
            }
        }

// Check for collision with the edges or other blocks
        function collision() {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col] && (grid[tetrominoY + row] && grid[tetrominoY + row][tetrominoX + col]) !== '') {
                        return true;
                    }
                }
            }
            return false;
        }

// Merge the current tetromino with the grid
        function mergeTetromino() {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        grid[tetrominoY + row][tetrominoX + col] = blockColors[tetrominos.indexOf(currentTetromino)];
                    }
                }
            }
        }

// Remove filled lines and shift the rest down
        function clearLines() {
            for (let row = gridHeight - 1; row >= 0; row--) {
                if (grid[row].every(block => block !== '')) {
                    grid.splice(row, 1);
                    grid.unshift(new Array(gridWidth).fill(''));
                }
            }
        }

// Spawn a new tetromino
        function spawnTetromino() {
            currentTetromino = randomTetromino();
            tetrominoX = Math.floor((gridWidth - currentTetromino[0].length) / 2);
            tetrominoY = 0;

if (collision()) {
                // Game over condition
                clearInterval(dropTimer);
                alert("Game Over!");
            }
        }

// Rotate a matrix (2D array) 90 degrees
        function rotateMatrix(matrix) {
            const newMatrix = matrix.map((row, rowIndex) =>
                row.map((val, colIndex) => matrix[colIndex][rowIndex]).reverse()
            );
            return newMatrix;
        }

// Handle keyboard events
        function handleKeyPress(event) {
            switch (event.keyCode) {
                case 37: // Left arrow key
                    moveLeft();
                    break;
                case 39: // Right arrow key
                    moveRight();
                    break;
                case 40: // Down arrow key
                    moveDown();
                    break;
                case 38: // Up arrow key
                    rotateTetromino();
                    break;
            }
        }

// Start the game
        function startGame() {
            createGrid();
            spawnTetromino();

// Set up keyboard event listener
            document.addEventListener('keydown', handleKeyPress);

// Main game loop
            dropTimer = setInterval(() => {
                clearCanvas();
                moveDown();
                drawGrid();
                drawTetromino();
            }, dropInterval);
        }

// Start the game when the page loads
        window.onload = startGame;
    </script>
</body>
</html>
```

Note: This is a simplified version of Tetris and can be further expanded and improved based on specific requirements and design preferences.