AI game creator

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

No:39156

101

←

Prev Next

→

Tetris
Developer User15380｜Date and time 24/1/27 1:39:19
Build time 35.535 sec｜Game capacity 6.047KB｜

Script

Sure! Here's a simple implementation of Tetris as a single HTML file using JavaScript. You can copy and paste the code into a file with a .html extension and open it in a web browser to play the game:

To play the game, you can use the arrow keys on your smartphone to move the Tetris pieces left, right, down, and to rotate them. The goal is to fill complete rows with pieces to make them disappear and gain points. The game ends when the pieces reach the top of the grid.

←

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 {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #222;
    }

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

// Set up the game board
      const grid = createGrid(10, 20);
      const pieceSize = canvas.width / grid.width;

// Initialize the current piece
      let currentPiece = getRandomPiece();
      let position = { x: 0, y: 0 };

// Helper function to create the game grid
      function createGrid(width, height) {
        const rows = [];
        for (let y = 0; y < height; y++) {
          rows.push(new Array(width).fill(0));
        }
        return { width, height, rows };
      }

// Helper function to draw the game grid
      function drawGrid() {
        context.clearRect(0, 0, canvas.width, canvas.height);

grid.rows.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value !== 0) {
              context.fillStyle = "#00f"; // blue
              context.fillRect(x * pieceSize, y * pieceSize, pieceSize, pieceSize);

context.strokeStyle = "#fff"; // white
              context.strokeRect(x * pieceSize, y * pieceSize, pieceSize, pieceSize);
            }
          });
        });
      }

// Helper function to draw the current piece
      function drawCurrentPiece() {
        currentPiece.shape.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value !== 0) {
              context.fillStyle = "#f00"; // red
              context.fillRect((position.x + x) * pieceSize, (position.y + y) * pieceSize, pieceSize, pieceSize);

context.strokeStyle = "#fff"; // white
              context.strokeRect((position.x + x) * pieceSize, (position.y + y) * pieceSize, pieceSize, pieceSize);
            }
          });
        });
      }

// Helper function to merge the current piece into the game grid
      function mergePieceIntoGrid() {
        currentPiece.shape.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value !== 0) {
              grid.rows[position.y + y][position.x + x] = currentPiece.color;
            }
          });
        });
      }

// Helper function to check if the current piece collides with the game walls/other pieces
      function isCollision() {
        for (let y = 0; y < currentPiece.shape.length; y++) {
          for (let x = 0; x < currentPiece.shape[y].length; x++) {
            if (
              currentPiece.shape[y][x] !== 0 &&
              (grid.rows[position.y + y] && grid.rows[position.y + y][position.x + x]) !== 0
            ) {
              return true;
            }
          }
        }
        return false;
      }

// Helper function to rotate the current piece
      function rotatePiece() {
        const rotatedPiece = currentPiece.shape.map((row, y) =>
          row.map((_, x) => currentPiece.shape[currentPiece.shape.length - 1 - x][y])
        );
        currentPiece.shape = rotatedPiece;
      }

// Helper function to move the current piece left
      function movePieceLeft() {
        position.x--;
        if (isCollision()) {
          position.x++;
        }
      }

// Helper function to move the current piece right
      function movePieceRight() {
        position.x++;
        if (isCollision()) {
          position.x--;
        }
      }

// Helper function to move the current piece down
      function movePieceDown() {
        position.y++;
        if (isCollision()) {
          position.y--;
          mergePieceIntoGrid();
          currentPiece = getRandomPiece();
          position = { x: Math.floor(grid.width / 2) - 1, y: 0 };
          if (isCollision()) {
            // Game over
            clearInterval(gameLoop);
            alert("Game over!");
          }
        }
      }

// Helper function to create random Tetris pieces
      function getRandomPiece() {
        const pieces = [
          { shape: [[1]], color: "#ff0" }, // yellow - square
          { shape: [[1, 1, 1, 1]], color: "#0f0" }, // green - line
          { shape: [[1, 1], [1, 1]], color: "#00f" }, // blue - square
          { shape: [[1, 1, 1], [0, 1, 0]], color: "#f0f" }, // purple - T-shaped
          { shape: [[1, 1, 0], [0, 1, 1]], color: "#f00" }, // red - Z-shaped
          { shape: [[0, 1, 1], [1, 1, 0]], color: "#ff6600" }, // orange - S-shaped
          { shape: [[1, 1, 1], [0, 0, 1]], color: "#0f0" } // green - L-shaped
        ];
        const randomIndex = Math.floor(Math.random() * pieces.length);
        return pieces[randomIndex];
      }

// Game loop
      const gameLoop = setInterval(() => {
        drawGrid();
        drawCurrentPiece();
        movePieceDown();
      }, 1000 / 2);

// Event listener for keyboard controls
      document.addEventListener("keydown", event => {
        if (event.key === "ArrowLeft") {
          movePieceLeft();
        } else if (event.key === "ArrowRight") {
          movePieceRight();
        } else if (event.key === "ArrowDown") {
          movePieceDown();
        } else if (event.key === "ArrowUp") {
          rotatePiece();
        }
      });
    });
  </script>
</body>
</html>
```