AI game creator

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

No:23085

←

Prev Next

→

Tetris
Developer User10642｜Date and time 23/10/27 15:08:44
Build time 170.236 sec｜Game capacity 8.12KB｜

Script

Sure! Here's a single HTML file implementing Tetris as a game using JavaScript. The game is designed for smartphone operation and uses pictograms.

To play the game, simply copy and paste the above code into a new HTML file (e.g., `tetris.html`) and open it in a web browser on your smartphone. The game should start automatically, and you can use the arrow keys to control the Tetrominos. The objective is to clear as many rows as possible to score points. 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 single HTML file implementing Tetris as a game using JavaScript. The game is designed for smartphone operation and uses pictograms.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris Game</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #333;
      }

canvas {
        border: 2px solid #fff;
      }
    </style>
  </head>
  <body>
    <canvas id="tetrisCanvas" width="240" height="400"></canvas>

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

// Set up colors for each tetromino
        const colors = [
          '#00F0FF', // Cyan (I)
          '#FFA500', // Orange (L)
          '#0000FF', // Blue (J)
          '#FFFF00', // Yellow (O)
          '#FF0000', // Red (Z)
          '#00FF00', // Green (S)
          '#800080'  // Purple (T)
        ];

// Generate a random tetromino
        function createTetromino() {
          const randomTetrominoIndex = Math.floor(Math.random() * tetrominos.length);
          const tetromino = tetrominos[randomTetrominoIndex];
          const color = colors[randomTetrominoIndex];
          return { tetromino, color };
        }

// Create an empty grid
        function createGrid() {
          const grid = [];
          for (let row = 0; row < rows; row++) {
            grid.push(new Array(columns).fill(0));
          }
          return grid;
        }

// Collision detection
        function collided(tetromino, x, y) {
          for (let row = 0; row < tetromino.length; row++) {
            for (let col = 0; col < tetromino[row].length; col++) {
              if (
                tetromino[row][col] &&
                (grid[row + y] && grid[row + y][col + x]) !== 0
              ) {
                return true;
              }
            }
          }
          return false;
        }

// Merge tetromino with the grid
        function merge() {
          for (let row = 0; row < tetromino.tetromino.length; row++) {
            for (let col = 0; col < tetromino.tetromino[row].length; col++) {
              if (tetromino.tetromino[row][col] !== 0) {
                grid[row + tetromino.y][col + tetromino.x] = tetromino.color;
              }
            }
          }
        }

// Clear full rows
        function clearRows() {
          for (let row = rows - 1; row >= 0; row--) {
            if (grid[row].every(cell => cell !== 0)) {
              grid.splice(row, 1);
              grid.unshift(new Array(columns).fill(0));
              score += 10;
            }
          }
        }

// Draw the tetromino on the grid
        function drawTetromino() {
          for (let row = 0; row < tetromino.tetromino.length; row++) {
            for (let col = 0; col < tetromino.tetromino[row].length; col++) {
              if (tetromino.tetromino[row][col] !== 0) {
                drawCell(
                  tetromino.x + col,
                  tetromino.y + row,
                  tetromino.color
                );
              }
            }
          }
        }

// Draw a single cell on the grid
        function drawCell(x, y, color) {
          context.fillStyle = color;
          context.fillRect(x * scale, y * scale, scale, scale);
          context.strokeStyle = '#666';
          context.strokeRect(x * scale, y * scale, scale, scale);
        }

// Draw the grid
        function drawGrid() {
          for (let row = 0; row < rows; row++) {
            for (let col = 0; col < columns; col++) {
              drawCell(col, row, grid[row][col] || '#000');
            }
          }
        }

// Move tetromino down
        function moveDown() {
          if (!collided(tetromino.tetromino, tetromino.x, tetromino.y + 1)) {
            tetromino.y++;
          } else {
            merge();
            clearRows();
            tetromino = createTetromino();
            if (collided(tetromino.tetromino, tetromino.x, tetromino.y)) {
              // Game over
              grid = createGrid();
              score = 0;
            }
          }
        }

// Move tetromino left
        function moveLeft() {
          if (!collided(tetromino.tetromino, tetromino.x - 1, tetromino.y)) {
            tetromino.x--;
          }
        }

// Move tetromino right
        function moveRight() {
          if (!collided(tetromino.tetromino, tetromino.x + 1, tetromino.y)) {
            tetromino.x++;
          }
        }

// Rotate tetromino
        function rotate() {
          const rotatedTetromino = tetromino.tetromino.map((_, index) =>
            tetromino.tetromino.map(col => col[index])
          );
          tetromino.tetromino = rotatedTetromino.reverse();
          if (collided(tetromino.tetromino, tetromino.x, tetromino.y)) {
            tetromino.tetromino = rotatedTetromino;
          }
        }

// Handle user input
        function handleInput(event) {
          switch (event.key) {
            case 'ArrowUp':
              rotate();
              break;
            case 'ArrowDown':
              moveDown();
              break;
            case 'ArrowLeft':
              moveLeft();
              break;
            case 'ArrowRight':
              moveRight();
              break;
          }
        }

// Game loop
        function gameLoop() {
          context.clearRect(0, 0, canvas.width, canvas.height);
          drawGrid();
          drawTetromino();
          moveDown();
          drawScore();
          requestAnimationFrame(gameLoop);
        }

// Draw the score on the canvas
        function drawScore() {
          const scoreElement = document.getElementById('score');
          scoreElement.textContent = `Score: ${score}`;
        }

// Start the game
        function startGame() {
          tetromino = createTetromino();
          document.addEventListener('keydown', handleInput);
          gameLoop();
        }

// Initialize the game
        startGame();
      });
    </script>
  </body>
</html>
```