AI game creator

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

No:31819

←

Prev Next

→

Tetris
Developer User15232｜Date and time 23/12/28 11:58:10
Build time 56.609 sec｜Game capacity 6.402KB｜

Script

Sure! Here's a basic implementation of Tetris in a single HTML file using JavaScript:

This implementation creates a basic Tetris game that you can play on a smartphone using pictograms. The game utilizes HTML canvas to render the game grid and pieces. You can move the current piece left or right using the left and right arrow keys, and make it drop faster by pressing the down arrow key. The game ends once the grid fills up and there are no more valid moves. Note: This is a simplified version of Tetris and may not include all the features and rules of the original game. Further enhancements and refinements can be made based on your requirements and preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's a basic implementation of Tetris in a single HTML file using JavaScript:

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

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

// Tetris Grid
      let grid = Array.from({length: rows}, () => Array(columns).fill(0));

// Tetris Pieces
      const pieces = [
        [
          [1, 1, 1, 1], // I
        ],
        [
          [1, 1, 1], // J
          [0, 0, 1],
        ],
        [
          [1, 1, 1], // L
          [1, 0, 0],
        ],
        [
          [1, 1], // O
          [1, 1],
        ],
        [
          [1, 1, 0], // S
          [0, 1, 1],
        ],
        [
          [0, 1, 1], // T
          [1, 1, 0],
        ],
        [
          [1, 1, 1], // Z
          [0, 1, 0],
        ],
      ];

// Tetris Piece Colors
      const colors = [
        'cyan',
        'blue',
        'orange',
        'yellow',
        'lime',
        'purple',
        'red',
      ];

// Tetris Current Piece
      let currentPiece;
      let currentPieceColor;
      let currentPieceRow;
      let currentPieceColumn;

// Generate New Piece
      function generatePiece() {
        const randomIndex = Math.floor(Math.random() * pieces.length);
        currentPiece = pieces[randomIndex];
        currentPieceColor = colors[randomIndex];
        currentPieceRow = 0;
        currentPieceColumn = Math.floor(columns / 2) - Math.floor(currentPiece[0].length / 2);
      }

// Draw Tetris Piece
      function drawPiece() {
        currentPiece.forEach((row, rowIndex) => {
          row.forEach((cell, colIndex) => {
            if (cell) {
              context.fillStyle = currentPieceColor;
              const x = currentPieceColumn + colIndex;
              const y = currentPieceRow + rowIndex;
              context.fillRect(x * scale, y * scale, scale, scale);
            }
          });
        });
      }

// Draw Tetris Grid
      function drawGrid() {
        grid.forEach((row, rowIndex) => {
          row.forEach((cell, colIndex) => {
            if (cell) {
              context.fillStyle = colors[cell - 1];
              context.fillRect(colIndex * scale, rowIndex * scale, scale, scale);
            }
          });
        });
      }

// Check if Current Piece Collides
      function hasCollision() {
        for (let row = 0; row < currentPiece.length; row++) {
          for (let col = 0; col < currentPiece[row].length; col++) {
            if (
              currentPiece[row][col] &&
              (currentPieceRow + row >= rows ||
              currentPieceColumn + col < 0 ||
              currentPieceColumn + col >= columns ||
              grid[currentPieceRow + row][currentPieceColumn + col])
            ) {
              return true;
            }
          }
        }
        return false;
      }

// Merge Current Piece into Grid
      function merge() {
        currentPiece.forEach((row, rowIndex) => {
          row.forEach((cell, colIndex) => {
            if (cell) {
              grid[currentPieceRow + rowIndex][currentPieceColumn + colIndex] = colors.indexOf(currentPieceColor) + 1;
            }
          });
        });
      }

// Remove Filled Rows
      function removeFilledRows() {
        grid = grid.filter(row => !row.every(cell => cell));
        while (grid.length < rows) {
          grid.unshift(Array(columns).fill(0));
        }
      }

// Handle User Input
      function handleInput(event) {
        switch (event.keyCode) {
          case 37: // Left Arrow
            currentPieceColumn--;
            if (hasCollision()) currentPieceColumn++;
            break;
          case 39: // Right Arrow
            currentPieceColumn++;
            if (hasCollision()) currentPieceColumn--;
            break;
          case 40: // Down Arrow
            currentPieceRow++;
            if (hasCollision()) {
              currentPieceRow--;
              merge();
              removeFilledRows();
              generatePiece();
              if (hasCollision()) {
                // Game Over
                grid = Array.from({length: rows}, () => Array(columns).fill(0));
              }
            }
            break;
        }
      }

// Update Tetris Game
      function update() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        
        drawPiece();
        drawGrid();
        
        currentPieceRow++;
        if (hasCollision()) {
          currentPieceRow--;
          merge();
          removeFilledRows();
          generatePiece();
          if (hasCollision()) {
            // Game Over
            grid = Array.from({length: rows}, () => Array(columns).fill(0));
          }
        }
      }

// Initialize Tetris Game
      function init() {
        generatePiece();
        setInterval(update, 1000 / 3); // 3 frames per second
      }

init();

// Event Listeners
      document.addEventListener('keydown', handleInput);
    });
  </script>
</body>
</html>
```

Note: This is a simplified version of Tetris and may not include all the features and rules of the original game. Further enhancements and refinements can be made based on your requirements and preferences.