AI game creator

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

No:36225

←

Prev Next

→

Tetris
Developer User16766｜Date and time 24/1/17 4:09:09
Build time 33.812 sec｜Game capacity 7.094KB｜

Script

Sure! Here's an example of a simple Tetris game implemented as a single HTML file using JavaScript and enclosed within script tags:

To play the game, you can copy the code and save it in a file with the `.html` extension, then open it in a web browser (preferably on a smartphone) to start playing! The game will run automatically, and you can use the arrow keys to move and rotate the falling tetromino pieces. The goal is to fill complete horizontal lines on the grid to score points and prevent the tetromino pieces from stacking up and reaching the top. Note: This is a simplified implementation of Tetris using simple shapes and basic mechanics. It may not have all the features and complexities found in complete Tetris games, but it should give you a good starting point. Feel free to modify and enhance it as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple Tetris game implemented as a single HTML file using JavaScript and enclosed within script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    body {
      background-color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

canvas {
      border: 1px solid #fff;
    }
  </style>
</head>
<body>
  <canvas width="240" height="480" id="tetris"></canvas>

// Tetris grid size
      const ROW = 20;
      const COL = 10;
      const SIZE = 24;

// Define tetromino shapes
      const tetrominos = {
        I: [[1, 1, 1, 1]],
        J: [[1, 1, 1], [0, 0, 1]],
        L: [[1, 1, 1], [1, 0, 0]],
        O: [[1, 1], [1, 1]],
        S: [[0, 1, 1], [1, 1, 0]],
        T: [[1, 1, 1], [0, 1, 0]],
        Z: [[1, 1, 0], [0, 1, 1]]
      };

// Tetris colors
      const colors = {
        1: '#29abe2',
        2: '#b333e2',
        3: '#e26333',
        4: '#e2d733',
        5: '#33e26b',
        6: '#8829e2',
        7: '#e22929',
      };

let grid = [...Array(ROW)].map(() => Array(COL).fill(0)); // Empty grid
      let currentTetromino, tetrominoX, tetrominoY; // Current tetromino position

// Generate a random tetromino
      function randomTetromino() {
        const keys = Object.keys(tetrominos);
        const randomKey = keys[Math.floor(Math.random() * keys.length)];
        return tetrominos[randomKey];
      }

// Draw a tetromino
      function drawTetromino() {
        for (let row = 0; row < currentTetromino.length; row++) {
          for (let col = 0; col < currentTetromino[row].length; col++) {
            if (currentTetromino[row][col]) {
              context.fillStyle = colors[currentTetromino[row][col]];
              const x = (tetrominoX + col) * SIZE;
              const y = (tetrominoY + row) * SIZE;
              context.fillRect(x, y, SIZE, SIZE);
              context.strokeStyle = '#000';
              context.strokeRect(x, y, SIZE, SIZE);
            }
          }
        }
      }

// Clear the tetromino from the grid
      function clearTetromino() {
        for (let row = 0; row < currentTetromino.length; row++) {
          for (let col = 0; col < currentTetromino[row].length; col++) {
            if (currentTetromino[row][col]) {
              const x = tetrominoX + col;
              const y = tetrominoY + row;
              grid[y][x] = 0;
            }
          }
        }
      }

// Draw the grid
      function drawGrid() {
        for (let row = 0; row < ROW; row++) {
          for (let col = 0; col < COL; col++) {
            const cell = grid[row][col];
            context.fillStyle = colors[cell];
            context.fillRect(col * SIZE, row * SIZE, SIZE, SIZE);
            context.strokeStyle = '#000';
            context.strokeRect(col * SIZE, row * SIZE, SIZE, SIZE);
          }
        }
      }

// Check if tetromino is colliding with anything
      function isCollision() {
        for (let row = 0; row < currentTetromino.length; row++) {
          for (let col = 0; col < currentTetromino[row].length; col++) {
            if (currentTetromino[row][col]) {
              const x = tetrominoX + col;
              const y = tetrominoY + row;
              if (
                y < 0 ||
                y >= ROW ||
                x < 0 ||
                x >= COL ||
                grid[y][x]
              ) {
                return true;
              }
            }
          }
        }
        return false;
      }

// Lock the tetromino in the grid
      function lockTetromino() {
        for (let row = 0; row < currentTetromino.length; row++) {
          for (let col = 0; col < currentTetromino[row].length; col++) {
            if (currentTetromino[row][col]) {
              const x = tetrominoX + col;
              const y = tetrominoY + row;
              grid[y][x] = currentTetromino[row][col];
            }
          }
        }
      }

// Check for completed lines
      function checkLines() {
        for (let row = 0; row < ROW; row++) {
          if (grid[row].every(cell => cell !== 0)) {
            grid.splice(row, 1);
            grid.unshift(Array(COL).fill(0));
          }
        }
      }

// Handle keyboard events
      function handleKeyPress(e) {
        if (e.keyCode === 37) {
          // Left arrow key
          tetrominoX--;
          if (isCollision()) tetrominoX++; // Revert the move if it causes a collision
        } else if (e.keyCode === 39) {
          // Right arrow key
          tetrominoX++;
          if (isCollision()) tetrominoX--; // Revert the move if it causes a collision
        } else if (e.keyCode === 40) {
          // Down arrow key
          tetrominoY++;
          if (isCollision()) tetrominoY--; // Revert the move if it causes a collision
        } else if (e.keyCode === 38) {
          // Up arrow key (rotate)
          const previousTetromino = currentTetromino;
          currentTetromino = currentTetromino[0].map((_, i) => currentTetromino.map(row => row[i])).reverse();
          if (isCollision()) currentTetromino = previousTetromino; // Revert the rotation if it causes a collision
        }
      }

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

tetrominoY++;
        if (isCollision()) {
          tetrominoY--;
          lockTetromino();
          clearTetromino();
          checkLines();
          currentTetromino = randomTetromino();
          tetrominoX = Math.floor(COL / 2) - Math.floor(currentTetromino[0].length / 2);
          tetrominoY = -1;
          if (isCollision()) {
            clearInterval(gameInterval);
          }
        }

drawGrid();
        drawTetromino();
      }

// Initialize game
      currentTetromino = randomTetromino();
      tetrominoX = Math.floor(COL / 2) - Math.floor(currentTetromino[0].length / 2);
      tetrominoY = -1;

document.addEventListener('keydown', handleKeyPress);
      const gameInterval = setInterval(loop, 500); // Game speed (milliseconds)
    });
  </script>
</body>
</html>
```

Note: This is a simplified implementation of Tetris using simple shapes and basic mechanics. It may not have all the features and complexities found in complete Tetris games, but it should give you a good starting point. Feel free to modify and enhance it as per your requirements.