AI game creator

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

No:26000

←

Prev Next

→

Tetris
Developer User12785｜Date and time 23/11/26 3:53:13
Build time 160.611 sec｜Game capacity 7.001KB｜

Script

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

This code will create a playable Tetris game where you can move and rotate the blocks using the arrow keys. The game will continue until the board is filled and then an alert message will be displayed signaling the Game Over. The game loop continuously updates the game canvas, handles the tetromino movement, and checks for complete rows to clear. The code includes comments to explain each part of the implementation. Please note that this is a simplified version of Tetris and may not have all the advanced features or fine-tuned mechanics of a professional game. However, it should serve as a good starting point for further development and customization.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    /* Add some basic styling for the game area */
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #111;
    }
    canvas {
      display: block;
      margin: 20px auto;
      background-color: #222;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    }
  </style>
</head>
<body>
  <canvas id="tetrisCanvas" width="240" height="400"></canvas>

// Create the game canvas
    const canvas = document.getElementById("tetrisCanvas");
    const ctx = canvas.getContext("2d");
    const scale = 20;
    const rows = canvas.height / scale;
    const columns = canvas.width / scale;

// Function to draw a square on the canvas
    function drawSquare(x, y, color) {
      ctx.fillStyle = color;
      ctx.fillRect(x * scale, y * scale, scale, scale);
      ctx.strokeStyle = "#333";
      ctx.strokeRect(x * scale, y * scale, scale, scale);
    }

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

// Function to draw the game board
    function drawBoard() {
      for (let row = 0; row < rows; row++) {
        for (let col = 0; col < columns; col++) {
          drawSquare(col, row, board[row][col]);
        }
      }
    }

// Create the tetromino shapes
    const tetrominos = [
      [ "I", [[0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0]] ],
      [ "J", [[0, 1, 0], [0, 1, 0], [1, 1, 0]] ],
      [ "L", [[0, 1, 0], [0, 1, 0], [0, 1, 1]] ],
      [ "O", [[1, 1], [1, 1]] ],
      [ "S", [[0, 1, 1], [1, 1, 0], [0, 0, 0]] ],
      [ "T", [[0, 0, 0], [1, 1, 1], [0, 1, 0]] ],
      [ "Z", [[1, 1, 0], [0, 1, 1], [0, 0, 0]] ]
    ];

// Function to create a random tetromino
    function createRandomTetromino() {
      const shape = tetrominos[Math.floor(Math.random() * tetrominos.length)];
      const matrix = shape[1];
      const rotation = Math.floor(Math.random() * 4);
      return { shape: shape[0], matrix: rotateMatrix(matrix, rotation) };
    }

// Function to rotate a matrix
    function rotateMatrix(matrix, rotation) {
      for (let i = 0; i < rotation; i++) {
        matrix = matrix[0].map((_, index) => matrix.map(row => row[index])).reverse();
      }
      return matrix;
    }

// Function to check if a tetromino can move
    function canMove(matrix, offsetX, offsetY) {
      for (let row = 0; row < matrix.length; row++) {
        for (let col = 0; col < matrix[row].length; col++) {
          if (matrix[row][col] && (board[row + offsetY] && board[row + offsetY][col + offsetX]) !== "#222") {
            return false;
          }
        }
      }
      return true;
    }

// Function to draw a tetromino on the canvas
    function drawTetromino(tetromino, offsetX, offsetY) {
      for (let row = 0; row < tetromino.matrix.length; row++) {
        for (let col = 0; col < tetromino.matrix[row].length; col++) {
          if (tetromino.matrix[row][col]) {
            drawSquare(col + offsetX, row + offsetY, "#888");
          }
        }
      }
    }

// Function to merge the current tetromino into the game board
    function mergeTetromino() {
      for (let row = 0; row < currentTetromino.matrix.length; row++) {
        for (let col = 0; col < currentTetromino.matrix[row].length; col++) {
          if (currentTetromino.matrix[row][col]) {
            board[row + currentTetromino.y][col + currentTetromino.x] = "#888";
          }
        }
      }
    }

// Function to clear completed rows
    function clearRows() {
      outer: for (let row = rows - 1; row >= 0; row--) {
        for (let col = 0; col < columns; col++) {
          if (board[row][col] === "#222") {
            continue outer;
          }
        }

board.splice(row, 1);
        const newRow = Array(columns).fill("#222");
        board.unshift(newRow);
      }
    }

// Function to handle tetromino movement
    function moveTetromino(dir) {
      if (canMove(currentTetromino.matrix, currentTetromino.x + dir, currentTetromino.y)) {
        currentTetromino.x += dir;
      }
    }

// Function to handle tetromino rotation
    function rotateTetromino() {
      const rotatedMatrix = rotateMatrix(currentTetromino.matrix, 1);
      if (canMove(rotatedMatrix, currentTetromino.x, currentTetromino.y)) {
        currentTetromino.matrix = rotatedMatrix;
      }
    }

// Function to handle tetromino dropping
    function dropTetromino() {
      if (canMove(currentTetromino.matrix, currentTetromino.x, currentTetromino.y + 1)) {
        currentTetromino.y++;
      } else {
        mergeTetromino();
        clearRows();
        currentTetromino = createRandomTetromino();
        if (!canMove(currentTetromino.matrix, currentTetromino.x, currentTetromino.y)) {
          alert("Game Over!");
          location.reload();
        }
      }
    }

// Function to update the game canvas
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBoard();
      drawTetromino(currentTetromino, currentTetromino.x, currentTetromino.y);
    }

// Initialize variables
    let currentTetromino = createRandomTetromino();
    let dropInterval = 1000; // Drop every 1 second
    let lastTime = 0;

// Game loop
    function gameLoop(time = 0) {
      const deltaTime = time - lastTime;
      lastTime = time;

dropInterval -= deltaTime;
      if (dropInterval <= 0) {
        dropTetromino();
        dropInterval = 1000;
      }

update();
      requestAnimationFrame(gameLoop);
    }

// Handle keyboard events
    document.addEventListener("keydown", event => {
      if (event.key === "ArrowLeft") {
        moveTetromino(-1); // Move left
      } else if (event.key === "ArrowRight") {
        moveTetromino(1); // Move right
      } else if (event.key === "ArrowDown") {
        dropTetromino(); // Drop down
      } else if (event.key === "ArrowUp") {
        rotateTetromino(); // Rotate
      }
    });

// Start the game loop
    gameLoop();
  </script>
</body>
</html>
```

Please note that this is a simplified version of Tetris and may not have all the advanced features or fine-tuned mechanics of a professional game. However, it should serve as a good starting point for further development and customization.