AI game creator

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

No:43220

←

Prev Next

→

Tetris
Developer User19145｜Date and time 24/2/15 1:22:05
Build time 20.214 sec｜Game capacity 5.813KB｜

Script

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

To play the game, you can open the HTML file in a web browser on your smartphone. The game is controlled using the left, right, down, and up arrow keys. The objective of the game is to fill and clear rows by fitting tetromino shapes together. If the stack of tetrominoes reaches the top of the grid, the game is over. The interval speed can be adjusted to change the game speed.

←

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:

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

// Define the tetris grid size and block size
    const ROWS = 20;
    const COLS = 10;
    const BLOCK_SIZE = 20;

// Define the tetris grid as a 2D array
    let grid = [];
    for (let r = 0; r < ROWS; r++) {
      grid[r] = [];
      for (let c = 0; c < COLS; c++) {
        grid[r][c] = 0;
      }
    }

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

// Initialize the current tetromino and its position
    let tetromino = tetrominos[Math.floor(Math.random() * tetrominos.length)];
    let tetrominoX = Math.floor((COLS - tetromino[0].length) / 2);
    let tetrominoY = 0;

// Function to draw a tetromino
    function drawTetromino() {
      for (let r = 0; r < tetromino.length; r++) {
        for (let c = 0; c < tetromino[r].length; c++) {
          if (tetromino[r][c]) {
            context.fillStyle = 'blue';
            context.fillRect(tetrominoX + c, tetrominoY + r, 1, 1);
          }
        }
      }
    }

// Function to draw the tetris grid
    function drawGrid() {
      for (let r = 0; r < grid.length; r++) {
        for (let c = 0; c < grid[r].length; c++) {
          if (grid[r][c]) {
            context.fillStyle = 'lightgray';
            context.fillRect(c, r, 1, 1);
          }
        }
      }
    }

// Function to check if the current tetromino collides with the grid or the bottom
    function collide() {
      for (let r = 0; r < tetromino.length; r++) {
        for (let c = 0; c < tetromino[r].length; c++) {
          if (tetromino[r][c] && (grid[tetrominoY + r] && grid[tetrominoY + r][tetrominoX + c]) !== 0) {
            return true;
          }
        }
      }
      return false;
    }

// Function to merge the current tetromino into the grid
    function merge() {
      for (let r = 0; r < tetromino.length; r++) {
        for (let c = 0; c < tetromino[r].length; c++) {
          if (tetromino[r][c]) {
            grid[tetrominoY + r][tetrominoX + c] = 1;
          }
        }
      }
    }

// Function to clear full rows from the grid
    function clearRows() {
      for (let r = 0; r < grid.length; r++) {
        if (grid[r].every(cell => cell !== 0)) {
          grid.splice(r, 1);
          grid.unshift(Array(COLS).fill(0));
        }
      }
    }

// Function to move the current tetromino down
    function moveDown() {
      tetrominoY++;
      if (collide()) {
        tetrominoY--;
        merge();
        clearRows();
        tetromino = tetrominos[Math.floor(Math.random() * tetrominos.length)];
        tetrominoX = Math.floor((COLS - tetromino[0].length) / 2);
        tetrominoY = 0;
        if (collide()) {
          // Game over
          grid = [];
          alert('Game over!');
        }
      }
    }

// Function to move the current tetromino left
    function moveLeft() {
      tetrominoX--;
      if (collide()) {
        tetrominoX++;
      }
    }

// Function to move the current tetromino right
    function moveRight() {
      tetrominoX++;
      if (collide()) {
        tetrominoX--;
      }
    }

// Function to rotate the current tetromino
    function rotate() {
      const rotatedTetromino = [];
      for (let c = 0; c < tetromino[0].length; c++) {
        rotatedTetromino[c] = [];
        for (let r = 0; r < tetromino.length; r++) {
          rotatedTetromino[c][r] = tetromino[tetromino.length - 1 - r][c];
        }
      }
      tetromino = rotatedTetromino;
      if (collide()) {
        // Try wall kick
        if (tetrominoX < 0) {
          if (!collide()) {
            tetrominoX = 0;
          } else {
            tetrominoX++;
          }
        } else if (tetrominoX + tetromino[0].length > COLS) {
          if (!collide()) {
            tetrominoX = COLS - tetromino[0].length;
          } else {
            tetrominoX--;
          }
        } else {
          // Cannot rotate, revert back
          tetromino = rotatedTetromino;
        }
      }
    }

// Function to handle keyboard events
    document.addEventListener('keydown', function(event) {
      if (event.keyCode === 37) {
        moveLeft();
      } else if (event.keyCode === 39) {
        moveRight();
      } else if (event.keyCode === 40) {
        moveDown();
      } else if (event.keyCode === 38) {
        rotate();
      }
    });

// Function to draw the tetris game
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawGrid();
      drawTetromino();
    }

// Function to start the game loop
    function start() {
      setInterval(function() {
        moveDown();
        draw();
      }, 500); // Adjust the interval speed for the game speed
    }

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