AI game creator

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

No:21538

←

Prev Next

→

Tetris
Developer User9842｜Date and time 23/10/16 3:32:45
Build time 166.97 sec｜Game capacity 7.31KB｜

Script

Sure! Here's an implementation of Tetris as a single HTML file using JavaScript and enclosed in script tags:

To play the game: - Use the left and right arrow keys to move the tetromino. - Use the down arrow key to make the tetromino drop faster. - Use the up arrow key to rotate the tetromino. - Press the space key to start a new game. The game will display the score at the top left corner and clear rows when a full row is formed. The game ends when the tetrominos stack up to reach the top of the grid.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! Here's an implementation of Tetris as a single HTML file using JavaScript and enclosed in script tags:

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

// Create the grid
        for (var row = 0; row < height; row++) {
            grid[row] = [];
            for (var col = 0; col < width; col++) {
                grid[row][col] = 0;
            }
        }

// Draw the grid
        function drawGrid() {
            for (var row = 0; row < height; row++) {
                for (var col = 0; col < width; col++) {
                    if (grid[row][col] === 1) {
                        context.fillStyle = "#000";
                        context.fillRect(col * blockSize, row * blockSize, blockSize, blockSize);
                    }
                }
            }
        }

// Draw the score
        function drawScore() {
            context.font = "20px Arial";
            context.fillStyle = "#000";
            context.fillText("Score: " + score, 10, 30);
        }

// Tetromino shapes
        var tetrominoShapes = [
            [[1, 1, 1, 1]], // I shape
            [[1, 1], [1, 1]], // O shape
            [[1, 1, 1], [0, 1, 0]], // T shape
            [[1, 1, 0], [0, 1, 1]], // Z shape
            [[0, 1, 1], [1, 1, 0]], // S shape
            [[1, 1, 1], [0, 0, 1]], // L shape
            [[1, 1, 1], [1, 0, 0]] // J shape
        ];

// Generate a random tetromino
        function generateTetromino() {
            var randomShape = Math.floor(Math.random() * tetrominoShapes.length);
            return tetrominoShapes[randomShape];
        }

// Initialize the current tetromino position and shape
        var tetromino = generateTetromino();
        var tetrominoX = Math.floor(width / 2);
        var tetrominoY = 0;

// Check if the tetromino can move
        function canMove(x, y, shape) {
            for (var row = 0; row < shape.length; row++) {
                for (var col = 0; col < shape[row].length; col++) {
                    if (shape[row][col] === 1) {
                        var newX = tetrominoX + col + x;
                        var newY = tetrominoY + row + y;

if (newX < 0 || newX >= width || newY >= height || grid[newY][newX] === 1) {
                            return false;
                        }
                    }
                }
            }

return true;
        }

// Place the tetromino on the grid
        function placeTetromino() {
            for (var row = 0; row < tetromino.length; row++) {
                for (var col = 0; col < tetromino[row].length; col++) {
                    if (tetromino[row][col] === 1) {
                        var x = tetrominoX + col;
                        var y = tetrominoY + row;
                        grid[y][x] = 1;
                    }
                }
            }
        }

// Clear full rows
        function clearRows() {
            for (var row = height - 1; row >= 0; row--) {
                var isRowFull = true;

for (var col = 0; col < width; col++) {
                    if (grid[row][col] === 0) {
                        isRowFull = false;
                        break;
                    }
                }

if (isRowFull) {
                    grid.splice(row, 1);
                    grid.unshift(new Array(width).fill(0));
                    score++;
                }
            }
        }

// Move the tetromino down
        function moveDown() {
            if (canMove(0, 1, tetromino)) {
                tetrominoY++;
            } else {
                placeTetromino();
                clearRows();
                tetromino = generateTetromino();
                tetrominoX = Math.floor(width / 2);
                tetrominoY = 0;

if (!canMove(0, 0, tetromino)) {
                    playing = false;
                    alert("Game Over! Your score was " + score);
                }
            }
        }

// Move the tetromino left
        function moveLeft() {
            if (canMove(-1, 0, tetromino)) {
                tetrominoX--;
            }
        }

// Move the tetromino right
        function moveRight() {
            if (canMove(1, 0, tetromino)) {
                tetrominoX++;
            }
        }

// Rotate the tetromino
        function rotate() {
            var rotatedTetromino = [];

for (var col = 0; col < tetromino[0].length; col++) {
                var newRow = [];

for (var row = tetromino.length - 1; row >= 0; row--) {
                    newRow.push(tetromino[row][col]);
                }

rotatedTetromino.push(newRow);
            }

if (canMove(0, 0, rotatedTetromino)) {
                tetromino = rotatedTetromino;
            }
        }

// Keydown event listener for controlling tetromino
        document.addEventListener("keydown", function (event) {
            if (playing) {
                if (event.keyCode === 37) { // Left arrow key
                    moveLeft();
                } else if (event.keyCode === 39) { // Right arrow key
                    moveRight();
                } else if (event.keyCode === 40) { // Down arrow key
                    moveDown();
                } else if (event.keyCode === 38) { // Up arrow key
                    rotate();
                }
            } else {
                if (event.keyCode === 32) { // Space key
                    playing = true;
                    score = 0;
                    grid = [];

for (var row = 0; row < height; row++) {
                        grid[row] = [];
                        for (var col = 0; col < width; col++) {
                            grid[row][col] = 0;
                        }
                    }
                }
            }
        });

// Game loop
        function gameLoop() {
            context.clearRect(0, 0, canvas.width, canvas.height);

if (playing) {
                moveDown();
            }

drawGrid();
            drawScore();

requestAnimationFrame(gameLoop);
        }

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

The game will display the score at the top left corner and clear rows when a full row is formed. The game ends when the tetrominos stack up to reach the top of the grid.