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

No:38180

←

Prev Next

→

Tetris
Developer User17264｜Date and time 24/1/23 4:56:25
Build time 27.843 sec｜Game capacity 6.552KB｜

Script

Sure! Here's a simple implementation of the classic Tetris game in a single HTML file using JavaScript:

Tetris

This implementation uses the HTML canvas element to render the game and captures keyboard events to control the Tetris blocks. It generates random Tetris pieces and allows the player to move and rotate them. The game loop continuously moves the current piece down and checks for collisions with the grid or boundaries. When a line is completed, it is cleared from the grid. The game ends if a new piece cannot be spawned without colliding. Feel free to modify and enhance this code to suit your needs further. Have fun playing Tetris!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the classic Tetris game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Tetris</title>
    <style>
      /* Add CSS styles for the game display */
      body {
        text-align: center;
      }
      canvas {
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
        background: #ddd;
      }
    </style>
  </head>
  <body>
    <h1>Tetris</h1>
    <canvas id="canvas" width="240" height="400"></canvas>

// Get the HTML canvas element
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

// Define the size of each Tetris block
      const blockSize = 20;
      const width = canvas.width / blockSize;
      const height = canvas.height / blockSize;

// Create the Tetris grid
      let grid = [];
      for (let row = 0; row < height; row++) {
        grid[row] = [];
        for (let col = 0; col < width; col++) {
          grid[row][col] = 0;
        }
      }

// Define a Tetris piece
      const pieces = [
        [[1, 1, 1, 1]],
        [[1, 1], [1, 1]],
        [[1, 1, 0], [0, 1, 1]],
        [[0, 1, 1], [1, 1, 0]],
        [[1, 1, 1], [0, 1, 0]],
        [[0, 1, 0], [1, 1, 1]],
        [[1, 0, 0], [1, 1, 1]]
      ];

// Generate a random Tetris piece
      let currentPiece = {
        shape: pieces[Math.floor(Math.random() * pieces.length)],
        x: Math.floor(width / 2) - 1,
        y: 0
      };

// Draw the Tetris blocks on the canvas
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "black";
        for (let row = 0; row < height; row++) {
          for (let col = 0; col < width; col++) {
            if (grid[row][col]) {
              ctx.fillRect(
                col * blockSize,
                row * blockSize,
                blockSize,
                blockSize
              );
            }
          }
        }

ctx.fillStyle = "red";
        currentPiece.shape.forEach((row, rowIndex) => {
          row.forEach((col, colIndex) => {
            if (col) {
              ctx.fillRect(
                (currentPiece.x + colIndex) * blockSize,
                (currentPiece.y + rowIndex) * blockSize,
                blockSize,
                blockSize
              );
            }
          });
        });
      }

// Move the current Tetris piece down
      function moveDown() {
        currentPiece.y++;
        if (collides()) {
          currentPiece.y--;
          merge();
          clearLines();
          generatePiece();
          if (collides()) {
            // Game over
            alert("Game Over!");
            resetGame();
          }
        }
      }

// Move the current Tetris piece left
      function moveLeft() {
        currentPiece.x--;
        if (collides()) {
          currentPiece.x++;
        }
      }

// Move the current Tetris piece right
      function moveRight() {
        currentPiece.x++;
        if (collides()) {
          currentPiece.x--;
        }
      }

// Rotate the current Tetris piece
      function rotate() {
        const originalShape = currentPiece.shape;
        currentPiece.shape = currentPiece.shape[0].map((_, i) =>
          currentPiece.shape.map(row => row[i]).reverse()
        );
        if (collides()) {
          currentPiece.shape = originalShape;
        }
      }

// Check if the current Tetris piece collides with the grid or boundaries
      function collides() {
        for (let row = 0; row < currentPiece.shape.length; row++) {
          for (let col = 0; col < currentPiece.shape[row].length; col++) {
            if (
              currentPiece.shape[row][col] &&
              (currentPiece.y + row >= height ||
                currentPiece.x + col < 0 ||
                currentPiece.x + col >= width ||
                grid[currentPiece.y + row][currentPiece.x + col])
            ) {
              return true;
            }
          }
        }
        return false;
      }

// Merge the current Tetris piece into the grid
      function merge() {
        currentPiece.shape.forEach((row, rowIndex) => {
          row.forEach((col, colIndex) => {
            if (col) {
              grid[currentPiece.y + rowIndex][currentPiece.x + colIndex] = 1;
            }
          });
        });
      }

// Clear completed lines from the grid
      function clearLines() {
        for (let row = height - 1; row >= 0; row--) {
          if (grid[row].every(cell => cell)) {
            grid.splice(row, 1);
            grid.unshift(new Array(width).fill(0));
          }
        }
      }

// Generate a new Tetris piece
      function generatePiece() {
        currentPiece = {
          shape: pieces[Math.floor(Math.random() * pieces.length)],
          x: Math.floor(width / 2) - 1,
          y: 0
        };
      }

// Reset the game state
      function resetGame() {
        grid = [];
        for (let row = 0; row < height; row++) {
          grid[row] = [];
          for (let col = 0; col < width; col++) {
            grid[row][col] = 0;
          }
        }
        generatePiece();
      }

// Handle keyboard events for controlling the game
      document.addEventListener("keydown", event => {
        if (event.keyCode === 37) {
          moveLeft(); // Left arrow key
        } else if (event.keyCode === 39) {
          moveRight(); // Right arrow key
        } else if (event.keyCode === 40) {
          moveDown(); // Down arrow key
        } else if (event.keyCode === 38) {
          rotate(); // Up arrow key
        }
      });

// Start the game loop
      setInterval(() => {
        moveDown();
        draw();
      }, 600); // Adjust the speed of the game (milliseconds)

// Initialize the game
      resetGame();
    </script>
  </body>
</html>
```

Feel free to modify and enhance this code to suit your needs further. Have fun playing Tetris!