Tetris blocks's game | AI game creator

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

No:15601

122

Tetris blocks
Developer User6775｜Date and time 23/9/10 3:26:46
Build time 52.991 sec｜Game capacity 6.149KB｜

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

This HTML file contains the necessary JavaScript code to create a basic implementation of a Tetris game. The game logic handles the movement of Tetromino shapes, collision detection, row clearing, and rendering on a canvas element. To play the game, simply open the HTML file on a web browser, and you can control the Tetromino shapes using the arrow keys (left to move left, right to move right, down to move down, and up to rotate). Please note that this example is a basic implementation and does not include advanced features such as scoring, levels, or graphical pictograms for Tetris blocks.

→ 　

0　

0　

　
　
　
　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

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 Game</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: #f1f1f1;
      }
      
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="200" height="400"></canvas>

<script>
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext('2d');
      
      const blockSize = 20;
      const rows = canvas.height / blockSize;
      const columns = canvas.width / blockSize;
      
      // Create an empty grid
      const grid = [];
      for (let row = 0; row < rows; row++) {
        grid[row] = [];
        for (let col = 0; col < columns; col++) {
          grid[row][col] = false;
        }
      }
      
      // Tetromino shapes
      const shapes = [
        [[1, 1, 1, 1]], // I-shape
        [[0, 1, 0], [1, 1, 1]], // T-shape
        [[1, 1], [1, 1]], // O-shape
        [[0, 1, 1], [1, 1, 0]], // Z-shape
        [[1, 1, 0], [0, 1, 1]], // S-shape
        [[0, 1, 0], [1, 1, 1]], // L-shape
        [[1, 0, 0], [1, 1, 1]] // J-shape
      ];
      
      let currentShape = getRandomShape();
      let currentRow = 0;
      let currentCol = Math.floor(columns / 2) - 1;
      
      function getRandomShape() {
        const randomIndex = Math.floor(Math.random() * shapes.length);
        return shapes[randomIndex];
      }
      
      function drawGrid() {
        for (let row = 0; row < rows; row++) {
          for (let col = 0; col < columns; col++) {
            if (grid[row][col]) {
              context.fillStyle = 'black';
              context.fillRect(col * blockSize, row * blockSize, blockSize, blockSize);
            } else {
              context.fillStyle = 'white';
              context.fillRect(col * blockSize, row * blockSize, blockSize, blockSize);
              context.strokeStyle = 'gray';
              context.strokeRect(col * blockSize, row * blockSize, blockSize, blockSize);
            }
          }
        }
      }
      
      function drawShape() {
        for (let row = 0; row < currentShape.length; row++) {
          for (let col = 0; col < currentShape[row].length; col++) {
            if (currentShape[row][col]) {
              context.fillStyle = 'black';
              context.fillRect((currentCol + col) * blockSize, (currentRow + row) * blockSize, blockSize, blockSize);
            }
          }
        }
      }
      
      function moveDown() {
        if (isCollide(0, 1, currentShape)) {
          mergeShape();
          currentShape = getRandomShape();
          currentRow = 0;
          currentCol = Math.floor(columns / 2) - 1;
        } else {
          currentRow++;
        }
      }
      
      function isCollide(deltaRow, deltaCol, shape) {
        for (let row = 0; row < shape.length; row++) {
          for (let col = 0; col < shape[row].length; col++) {
            if (shape[row][col]) {
              const newRow = currentRow + row + deltaRow;
              const newCol = currentCol + col + deltaCol;
              if (newRow >= rows || newCol < 0 || newCol >= columns || grid[newRow][newCol]) {
                return true;
              }
            }
          }
        }
        return false;
      }
      
      function mergeShape() {
        for (let row = 0; row < currentShape.length; row++) {
          for (let col = 0; col < currentShape[row].length; col++) {
            if (currentShape[row][col]) {
              grid[currentRow + row][currentCol + col] = true;
            }
          }
        }
      }
      
      function clearRows() {
        outer: for (let row = rows - 1; row >= 0; row--) {
          for (let col = 0; col < columns; col++) {
            if (!grid[row][col]) {
              continue outer;
            }
          }
          
          grid.splice(row, 1);
          const newRow = [];
          for (let col = 0; col < columns; col++) {
            newRow[col] = false;
          }
          grid.unshift(newRow);
        }
      }
      
      function handleKeyPress(event) {
        if (event.keyCode === 37 && !isCollide(0, -1, currentShape)) {
          currentCol--;
        } else if (event.keyCode === 39 && !isCollide(0, 1, currentShape)) {
          currentCol++;
        } else if (event.keyCode === 40) {
          moveDown();
        } else if (event.keyCode === 38) {
          rotateShape();
        }
      }
      
      function rotateShape() {
        const rotatedShape = [];
        for (let row = 0; row < currentShape[0].length; row++) {
          rotatedShape[row] = [];
          for (let col = 0; col < currentShape.length; col++) {
            rotatedShape[row][col] = currentShape[currentShape.length - col - 1][row];
          }
        }
        
        if (!isCollide(0, 0, rotatedShape)) {
          currentShape = rotatedShape;
        }
      }
      
      function gameLoop() {
        moveDown();
        clearRows();
        
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawGrid();
        drawShape();
        
        requestAnimationFrame(gameLoop);
      }
      
      document.addEventListener('keydown', handleKeyPress);
      
      gameLoop();
    </script>
  </body>
</html>
```

This HTML file contains the necessary JavaScript code to create a basic implementation of a Tetris game. The game logic handles the movement of Tetromino shapes, collision detection, row clearing, and rendering on a canvas element.

To play the game, simply open the HTML file on a web browser, and you can control the Tetromino shapes using the arrow keys (left to move left, right to move right, down to move down, and up to rotate).

Please note that this example is a basic implementation and does not include advanced features such as scoring, levels, or graphical pictograms for Tetris blocks.