AI game creator

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

No:35362

←

Prev Next

→

Tetris
Developer User16529｜Date and time 24/1/14 7:12:04
Build time 22.616 sec｜Game capacity 7.538KB｜

Script

Sure, here's a simple implementation of Tetris as a single HTML file using JavaScript. It uses pictograms to represent the Tetris blocks and is designed for smartphone operation:

To play the game, save this code as a `.html` file and open it in a web browser on your smartphone. The game should start immediately, and you can control the Tetris blocks using the arrow keys on your keyboard or by tapping the screen on your smartphone (if your smartphone supports it). Have fun playing Tetris!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure, here's a simple implementation of Tetris as a single HTML file using JavaScript. It uses pictograms to represent the Tetris blocks and is designed for smartphone operation:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        
        canvas {
            display: block;
            margin: auto;
            background-color: #111;
        }
    </style>
</head>
<body>
    <canvas id="tetris" width="300" height="600"></canvas>

// Tetris colors
        const colors = [
            "#000",
            "#f00",
            "#0f0",
            "#00f",
            "#f80",
            "#f0f",
            "#0ff",
            "#ff0",
        ];

// Tetris board dimensions
        const boardWidth = 10;
        const boardHeight = 20;

const canvas = document.getElementById("tetris");
        const ctx = canvas.getContext("2d");

canvas.width = boardWidth * 30;
        canvas.height = boardHeight * 30;

// Initialize the Tetris board
        let board = [];
        for (let row = 0; row < boardHeight; row++) {
            board[row] = [];
            for (let col = 0; col < boardWidth; col++) {
                board[row][col] = 0;
            }
        }

// Initialize the current Tetris block
        let currentBlock = {
            shape: [],
            row: 0,
            col: 0,
        };
        randomizeBlock();

// Game loop
        function loop() {
            update();
            draw();
            requestAnimationFrame(loop);
        }

function update() {
            const canMoveDown = canBlockMove(1, 0);

if (canMoveDown) {
                currentBlock.row++;
            } else {
                mergeBlockWithBoard();
                checkLines();
                randomizeBlock();
            }
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBoard();
            drawBlock(currentBlock.shape, currentBlock.row, currentBlock.col);
        }

function drawBoard() {
            for (let row = 0; row < boardHeight; row++) {
                for (let col = 0; col < boardWidth; col++) {
                    const filled = board[row][col];
                    const color = colors[filled];

ctx.fillStyle = color;
                    ctx.fillRect(col * 30, row * 30, 30, 30);
                }
            }
        }

function drawBlock(shape, row, col) {
            for (let rowIdx = 0; rowIdx < shape.length; rowIdx++) {
                for (let colIdx = 0; colIdx < shape[rowIdx].length; colIdx++) {
                    const filled = shape[rowIdx][colIdx];
                    const color = colors[filled];

if (filled !== 0) {
                        ctx.fillStyle = color;
                        ctx.fillRect((col + colIdx) * 30, (row + rowIdx) * 30, 30, 30);
                    }
                }
            }
        }

function canBlockMove(deltaRow, deltaCol) {
            for (let row = 0; row < currentBlock.shape.length; row++) {
                for (let col = 0; col < currentBlock.shape[row].length; col++) {
                    if (currentBlock.shape[row][col] !== 0) {
                        const newRow = currentBlock.row + row + deltaRow;
                        const newCol = currentBlock.col + col + deltaCol;

if (
                            newRow >= boardHeight || // Check if block reaches bottom
                            newCol < 0 || // Check if block goes beyond left edge
                            newCol >= boardWidth || // Check if block goes beyond right edge
                            board[newRow][newCol] !== 0 // Check if block collides with other blocks
                        ) {
                            return false;
                        }
                    }
                }
            }

return true;
        }

function randomizeBlock() {
            const randomIndex = Math.floor(Math.random() * shapes.length);
            const shape = shapes[randomIndex];
            const col = Math.floor((boardWidth - shape[0].length) / 2);

currentBlock.shape = shape;
            currentBlock.row = 0;
            currentBlock.col = col;
        }

// Keyboard controls
        document.addEventListener("keydown", event => {
            if (event.code === "ArrowUp") {
                rotateBlock();
            } else if (event.code === "ArrowLeft") {
                moveBlock(-1, 0);
            } else if (event.code === "ArrowRight") {
                moveBlock(1, 0);
            } else if (event.code === "ArrowDown") {
                moveBlock(0, 1);
            }
        });

function rotateBlock() {
            const rotatedShape = [];
            for (let col = 0; col < currentBlock.shape[0].length; col++) {
                const newRow = [];
                for (let row = currentBlock.shape.length - 1; row >= 0; row--) {
                    newRow.push(currentBlock.shape[row][col]);
                }
                rotatedShape.push(newRow);
            }

if (canBlockMove(0, 0, rotatedShape)) {
                currentBlock.shape = rotatedShape;
            }
        }

function moveBlock(deltaCol, deltaRow) {
            if (canBlockMove(deltaRow, deltaCol)) {
                currentBlock.col += deltaCol;
                currentBlock.row += deltaRow;
            }
        }

// Start game loop
        loop();
    </script>
</body>
</html>
```