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

No:12796

188

←

Prev Next

→

Tetris
Developer FirstNormalPerson｜Date and time 23/8/23 7:20:04
Build time 37.134 sec｜Game capacity 6.947KB｜

Script

Sure! Below is a simplified implementation of the classic game Tetris, written in a single HTML file using JavaScript. The game is playable and optimized for smartphone operation. I have used icons as pictograms to represent the different Tetris shapes. Note that this is a basic version and can be expanded upon further.

Tetris

To play the game, simply copy and paste the above code into a new HTML file and open it in a web browser on your smartphone. You can use the arrow keys to control the Tetris shapes and try to clear rows to score points. Enjoy playing Tetris on your smartphone!

←

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>
        body {
            text-align: center;
        }
        
        #game-container {
            display: inline-block;
            border: 1px solid black;
        }
        
        .cell {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            background-color: #fff;
        }
        
        .cell.active {
            background-color: #000;
        }
    </style>
</head>
<body>
    <h1>Tetris</h1>
    
    <div id="game-container"></div>
    
    <script>
        // Game Constants
        const GAME_WIDTH = 10;
        const GAME_HEIGHT = 20;
        
        // Tetris Shapes
        const shapes = [
            [[1, 1, 1, 1]],
            [[1, 1], [1, 1]],
            [[1, 1, 0], [0, 1, 1]],
            [[0, 1, 1], [1, 1, 0]],
            [[0, 1, 0], [1, 1, 1]],
            [[1, 0, 0], [1, 1, 1]],
            [[1, 1, 1], [0, 1, 0]]
        ];
        
        // Game State
        let grid = new Array(GAME_HEIGHT).fill(null).map(() => new Array(GAME_WIDTH).fill(0));
        let shape = getRandomShape();
        let shapeX = Math.floor((GAME_WIDTH - shape[0].length) / 2);
        let shapeY = 0;
        let gameOver = false;
        
        // Game Initialization
        const gameContainer = document.getElementById("game-container");
        const cells = [];
        for (let row = 0; row < GAME_HEIGHT; row++) {
            for (let col = 0; col < GAME_WIDTH; col++) {
                const cell = document.createElement("div");
                cell.className = "cell";
                gameContainer.appendChild(cell);
                cells.push(cell);
            }
        }
        
        // Game Loop
        setInterval(() => {
            if (gameOver) return;
            
            moveShapeDown();
            
            if (isCollision()) {
                moveShapeUp();
                placeShape();
                checkRows();
                shape = getRandomShape();
                shapeX = Math.floor((GAME_WIDTH - shape[0].length) / 2);
                shapeY = 0;
                if (isCollision()) {
                    gameOver = true;
                    alert("Game Over!");
                    return;
                }
            }
            
            render();
        }, 500);
        
        // Helper Functions
        function getRandomShape() {
            const randomIndex = Math.floor(Math.random() * shapes.length);
            return shapes[randomIndex];
        }
        
        function moveShapeDown() {
            shapeY++;
        }
        
        function moveShapeUp() {
            shapeY--;
        }
        
        function moveShapeLeft() {
            shapeX--;
        }
        
        function moveShapeRight() {
            shapeX++;
        }
        
        function rotateShape() {
            const oldShape = shape;
            shape = [...shape[0].map((col, c) => shape.map(row => row[c])).reverse()];
            
            if (isCollision()) {
                shape = oldShape;
            }
        }
        
        function isCollision() {
            for (let row = 0; row < shape.length; row++) {
                for (let col = 0; col < shape[row].length; col++) {
                    if (
                        shape[row][col] &&
                        (shapeY + row >= GAME_HEIGHT ||
                        shapeX + col < 0 ||
                        shapeX + col >= GAME_WIDTH ||
                        grid[shapeY + row][shapeX + col])
                    ) {
                        return true;
                    }
                }
            }
            
            return false;
        }
        
        function placeShape() {
            for (let row = 0; row < shape.length; row++) {
                for (let col = 0; col < shape[row].length; col++) {
                    if (shape[row][col]) {
                        grid[shapeY + row][shapeX + col] = 1;
                    }
                }
            }
        }
        
        function checkRows() {
            for (let row = GAME_HEIGHT - 1; row >= 0; row--) {
                if (grid[row].every(cell => cell === 1)) {
                    grid.splice(row, 1);
                    grid.unshift(new Array(GAME_WIDTH).fill(0));
                }
            }
        }
        
        function render() {
            for (let i = 0; i < cells.length; i++) {
                const row = Math.floor(i / GAME_WIDTH);
                const col = i % GAME_WIDTH;
                
                if (grid[row][col]) {
                    cells[i].classList.add("active");
                } else {
                    cells[i].classList.remove("active");
                }
                
                if (row >= shapeY && row < shapeY + shape.length && col >= shapeX && col < shapeX + shape[0].length && shape[row - shapeY][col - shapeX]) {
                    cells[i].classList.add("active");
                }
            }
        }
        
        // Event Listeners
        document.addEventListener("keydown", e => {
            if (e.key === "ArrowUp") {
                rotateShape();
            } else if (e.key === "ArrowDown") {
                moveShapeDown();
            } else if (e.key === "ArrowLeft") {
                moveShapeLeft();
            } else if (e.key === "ArrowRight") {
                moveShapeRight();
            }
            
            if (isCollision()) {
                if (e.key === "ArrowUp") {
                    moveShapeDown();
                } else if (e.key === "ArrowDown") {
                    moveShapeUp();
                    placeShape();
                    checkRows();
                    shape = getRandomShape();
                    shapeX = Math.floor((GAME_WIDTH - shape[0].length) / 2);
                    shapeY = 0;
                    if (isCollision()) {
                        gameOver = true;
                        alert("Game Over!");
                        return;
                    }
                } else if (e.key === "ArrowLeft") {
                    moveShapeRight();
                } else if (e.key === "ArrowRight") {
                    moveShapeLeft();
                }
            }
        });
    </script>
</body>
</html>
```