AI game creator

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

No:15535

←

Prev Next

→

Tetris
Developer User6733｜Date and time 23/9/9 20:44:21
Build time 71.34 sec｜Game capacity 6.511KB｜

Script

Sure! Here's a Tetris game implemented as a single HTML file using JavaScript. The game is designed to be played on a smartphone and uses pictograms for better visualization. Please note that due to platform limitations, the game might not work perfectly in this text-based interface.

To play the game, you can copy the above code and save it as an HTML file (e.g., tetris.html). Then, open the file in a web browser on your smartphone. You can control the game using the arrow keys to move the pieces and the up arrow key to rotate them. The objective is to fill rows with blocks to score points and prevent them from reaching the top of the screen. Enjoy the game!

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

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

canvas {
      background-color: white;
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="240" height="400"></canvas>

const scale = 20;
    const rows = canvas.height / scale;
    const columns = canvas.width / scale;

let score = 0;

// Create the game grid
    const grid = [];
    for (let row = 0; row < rows; row++) {
      grid[row] = [];
      for (let col = 0; col < columns; col++) {
        grid[row][col] = 0;
      }
    }

// Initialize the pieces
    const pieces = [
      // I - Straight Shape
      [
        [0, 1, 0, 0],
        [0, 1, 0, 0],
        [0, 1, 0, 0],
        [0, 1, 0, 0]
      ],
      // J - J Shape
      [
        [0, 2, 0],
        [0, 2, 0],
        [2, 2, 0]
      ],
      // L - L Shape
      [
        [0, 3, 0],
        [0, 3, 0],
        [0, 3, 3]
      ],
      // O - Square Shape
      [
        [4, 4],
        [4, 4]
      ],
      // S - S Shape
      [
        [0, 5, 5],
        [5, 5, 0],
        [0, 0, 0]
      ],
      // T - T Shape
      [
        [0, 6, 0],
        [6, 6, 6],
        [0, 0, 0]
      ],
      // Z - Z Shape
      [
        [7, 7, 0],
        [0, 7, 7],
        [0, 0, 0],
      ]
    ];

let currentPiece = {
      shape: [],
      x: 0,
      y: 0
    };

// Generate a random piece
    function generatePiece() {
      const pieceIndex = Math.floor(Math.random() * pieces.length);
      const piece = pieces[pieceIndex];
      currentPiece.shape = piece;
      currentPiece.x = Math.floor(columns / 2) - Math.floor(piece.length / 2);
      currentPiece.y = 0;
    }

// Draw the current piece on the grid
    function drawPiece() {
      for (let row = 0; row < currentPiece.shape.length; row++) {
        for (let col = 0; col < currentPiece.shape[row].length; col++) {
          if (currentPiece.shape[row][col]) {
            context.fillStyle = getPictogramColor(currentPiece.shape[row][col]);
            context.fillRect((currentPiece.x + col) * scale, (currentPiece.y + row) * scale, scale, scale);
            context.strokeStyle = '#d8d8d8';
            context.strokeRect((currentPiece.x + col) * scale, (currentPiece.y + row) * scale, scale, scale);
          }
        }
      }
    }

// Draw the tetris grid
    function drawGrid() {
      for (let row = 0; row < rows; row++) {
        for (let col = 0; col < columns; col++) {
          const block = grid[row][col];
          if (block) {
            context.fillStyle = getPictogramColor(block);
            context.fillRect(col * scale, row * scale, scale, scale);
            context.strokeStyle = '#d8d8d8';
            context.strokeRect(col * scale, row * scale, scale, scale);
          }
        }
      }
    }

// Clear the tetris grid
    function clearGrid() {
      for (let row = 0; row < rows; row++) {
        for (let col = 0; col < columns; col++) {
          grid[row][col] = 0;
        }
      }
    }

function getPictogramColor(block) {
      const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF78CB', '#FF9900']
      return colors[block - 1];
    }

function drawScore() {
      context.fillStyle = 'black';
      context.font = '20px Arial';
      context.fillText('Score: ' + score, 20, 30);
    }

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawGrid();
      drawPiece();
      drawScore();
    }

document.addEventListener('keydown', keyPressHandler);

generatePiece();
    let game = setInterval(() => {
      update();
      draw();
    }, 500);
  </script>
</body>
</html>
```