AI game creator

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

No:17353

113

←

Prev Next

→

Tetris Underwater
Developer User7638｜Date and time 23/9/23 5:59:34
Build time 61.391 sec｜Game capacity 7.63KB｜

Script

Sure! Here's a simple implementation of Tetris with an underwater theme using JavaScript and HTML in a single file. The game can be played on a smartphone. Please note that this is a basic version and can be further extended and improved upon.

This code sets up the Tetris game with an underwater theme. The player can use arrow keys to move the tetrominoes left, right, and down, and rotate them using the up key. The game ends when the tetrominoes reach the top of the grid and can no longer fit. The score increments every time a row is completed.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris Underwater</title>
    <style>
        canvas {
            border: solid 1px #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="300" height="600"></canvas>
    
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const canvas = document.getElementById("tetrisCanvas");
            const context = canvas.getContext("2d");
            
            const grid = createGrid();
            let score = 0;
            
            const colors = [
                null,
                "cyan",
                "yellow",
                "purple",
                "green",
                "red",
                "blue",
                "orange"
            ];
            
            const tetrominoes = [
                [],
                [[1, 1, 1, 1]],
                [[1, 1], [1, 1]],
                [[1, 0], [1, 1], [0, 1]],
                [[0, 1], [1, 1], [1, 0]],
                [[1, 1, 1], [0, 1, 0]],
                [[0, 1, 1], [1, 1, 0]]
            ];
            
            const currentTetromino = getRandomTetromino();
            let currentPosition = { x: 4, y: 0 };
            
            function getRandomTetromino() {
                const randomIndex = Math.floor(Math.random() * tetrominoes.length);
                return tetrominoes[randomIndex];
            }
            
            function createGrid() {
                return Array.from({ length: 20 }, () => Array(10).fill(0));
            }
            
            function draw() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                drawGrid();
                drawTetromino();
            }
            
            function drawGrid() {
                for (let row = 0; row < grid.length; row++) {
                    for (let col = 0; col < grid[row].length; col++) {
                        const cell = grid[row][col];
                        
                        if (cell !== 0) {
                            context.fillStyle = colors[cell];
                            context.fillRect(col * 30, row * 30, 30, 30);
                            context.strokeStyle = "#000";
                            context.strokeRect(col * 30, row * 30, 30, 30);
                        }
                    }
                }
            }
            
            function drawTetromino() {
                const { x, y } = currentPosition;
                const tetromino = currentTetromino;
                
                for (let row = 0; row < tetromino.length; row++) {
                    for (let col = 0; col < tetromino[row].length; col++) {
                        const cell = tetromino[row][col];
                        
                        if (cell !== 0) {
                            const drawX = (col + x) * 30;
                            const drawY = (row + y) * 30;
                            
                            context.fillStyle = colors[cell];
                            context.fillRect(drawX, drawY, 30, 30);
                            context.strokeStyle = "#000";
                            context.strokeRect(drawX, drawY, 30, 30);
                        }
                    }
                }
            }
            
            function collide() {
                const { x, y } = currentPosition;
                const tetromino = currentTetromino;
                
                for (let row = 0; row < tetromino.length; row++) {
                    for (let col = 0; col < tetromino[row].length; col++) {
                        if (tetromino[row][col] !== 0 &&
                            (grid[row + y] && grid[row + y][col + x]) !== 0) {
                            return true;
                        }
                    }
                }
                
                return false;
            }
            
            function merge() {
                const { x, y } = currentPosition;
                
                for (let row = 0; row < currentTetromino.length; row++) {
                    for (let col = 0; col < currentTetromino[row].length; col++) {
                        if (currentTetromino[row][col] !== 0) {
                            grid[row + y][col + x] = currentTetromino[row][col];
                        }
                    }
                }
            }
            
            function rotate() {
                const tempTetromino = currentTetromino;
                currentTetromino = currentTetromino[0].map((_, i) =>
                    currentTetromino.map(row => row[i]).reverse()
                );
                
                if (collide()) {
                    currentTetromino = tempTetromino;
                }
            }
            
            function moveLeft() {
                currentPosition.x--;
                
                if (collide()) {
                    currentPosition.x++;
                }
            }
            
            function moveRight() {
                currentPosition.x++;
                
                if (collide()) {
                    currentPosition.x--;
                }
            }
            
            function moveDown() {
                currentPosition.y++;
                
                if (collide()) {
                    currentPosition.y--;
                    merge();
                    checkCompletedRows();
                    resetTetromino();
                    
                    if (collide()) {
                        // Game over condition
                        clearInterval(gameInterval);
                        alert("Game Over! Your Score: " + score);
                    }
                }
            }
            
            function resetTetromino() {
                currentPosition = { x: 4, y: 0 };
                currentTetromino = getRandomTetromino();
            }
            
            function checkCompletedRows() {
                for (let row = grid.length - 1; row >= 0; row--) {
                    if (grid[row].every(cell => cell !== 0)) {
                        grid.splice(row, 1);
                        grid.unshift(Array(10).fill(0));
                        score++;
                    }
                }
            }
            
            document.addEventListener("keydown", event => {
                if (event.keyCode === 37) { // Left Arrow
                    moveLeft();
                } else if (event.keyCode === 39) { // Right Arrow
                    moveRight();
                } else if (event.keyCode === 40) { // Down Arrow
                    moveDown();
                } else if (event.keyCode === 38) { // Up Arrow
                    rotate();
                }
            });
            
            const gameInterval = setInterval(() => {
                moveDown();
                draw();
            }, 500);
        });
    </script>
</body>
</html>
```