AI game creator

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

No:33869

←

Prev Next

→

Tetris
Developer User15935｜Date and time 24/1/6 21:43:21
Build time 86.223 sec｜Game capacity 8.273KB｜

Script

Sure! Here's a basic implementation of the classic game Tetris using JavaScript and HTML:

This implementation sets up the basic structure of a Tetris game. It defines the game board, the Tetromino shapes, and handles the movement and collision detection. The game loops continuously, updating the board and checking for line clears. Please note that this is a simplified version of Tetris, and you can enhance and customize it further as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a basic implementation of the classic game Tetris using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    body { font-family: Arial; }
    canvas { border: 1px solid #000; }
  </style>
</head>
<body>
  <canvas id="tetrisCanvas" width="240" height="400"></canvas>

// Define the grid width and height
      const grid = {
        row: 20,
        column: 10,
        size: 20
      };

// Define the game board
      let board = [];

// Initialize the game board with empty cells
      for (let row = 0; row < grid.row; row++) {
        board[row] = [];
        for (let col = 0; col < grid.column; col++) {
          board[row][col] = "";
        }
      }

// Define the Tetromino shapes
      const tetrominos = [
        [
          [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]
        ],
        [
          [1, 1, 1],
          [1, 0, 0]
        ],
        [
          [1, 1, 1],
          [0, 0, 1]
        ]
      ];

// Define the Tetromino colors
      const colors = [
        "#000000",
        "#FF0000",
        "#00FF00",
        "#0000FF",
        "#FFFF00",
        "#00FFFF",
        "#FF00FF"
      ];

// Define the current Tetromino and its properties
      let currentTetromino = [];
      let currentTetrominoColor = "";
      let currentTetrominoRow = 0;
      let currentTetrominoCol = 0;

// Generate a random Tetromino
      function generateTetromino() {
        const randomIdx = Math.floor(Math.random() * tetrominos.length);
        currentTetromino = tetrominos[randomIdx];
        currentTetrominoColor = colors[randomIdx];
        currentTetrominoRow = 0;
        currentTetrominoCol = Math.floor(
          (grid.column - currentTetromino[0].length) / 2
        );
      }

// Draw the game board
      function drawBoard() {
        for (let row = 0; row < grid.row; row++) {
          for (let col = 0; col < grid.column; col++) {
            const color = board[row][col];
            drawCell(col, row, color);
          }
        }
      }

// Draw a single cell on the game board
      function drawCell(x, y, color) {
        context.fillStyle = color;
        context.fillRect(x * grid.size, y * grid.size, grid.size, grid.size);
        context.strokeStyle = "#000";
        context.strokeRect(x * grid.size, y * grid.size, grid.size, grid.size);
      }

// Clear the game board
      function clearBoard() {
        for (let row = 0; row < grid.row; row++) {
          for (let col = 0; col < grid.column; col++) {
            board[row][col] = "";
          }
        }
      }

// Check if the current Tetromino can move down
      function canMoveDown() {
        for (let row = 0; row < currentTetromino.length; row++) {
          for (let col = 0; col < currentTetromino[row].length; col++) {
            if (
              currentTetromino[row][col] &&
              (currentTetrominoRow + row + 1 >= grid.row ||
                board[currentTetrominoRow + row + 1][currentTetrominoCol + col])
            ) {
              return false;
            }
          }
        }
        return true;
      }

// Move the current Tetromino down
      function moveDown() {
        if (canMoveDown()) {
          currentTetrominoRow++;
        } else {
          mergeTetromino();
          clearLines();
          generateTetromino();

if (!canMoveDown()) {
            // Game Over
            alert("Game Over!");
            clearBoard();
          }
        }
      }

// Merge the current Tetromino with the game board
      function mergeTetromino() {
        for (let row = 0; row < currentTetromino.length; row++) {
          for (let col = 0; col < currentTetromino[row].length; col++) {
            if (currentTetromino[row][col]) {
              board[currentTetrominoRow + row][currentTetrominoCol + col] =
                currentTetrominoColor;
            }
          }
        }
      }

// Check if a line is complete
      function isLineComplete(row) {
        for (let col = 0; col < grid.column; col++) {
          if (!board[row][col]) {
            return false;
          }
        }
        return true;
      }

// Clear complete lines
      function clearLines() {
        let lineClearedCount = 0;
        let row = grid.row - 1;

while (row >= 0) {
          if (isLineComplete(row)) {
            board.splice(row, 1);
            board.unshift(new Array(grid.column).fill(""));
            lineClearedCount++;
          } else {
            row--;
          }
        }

if (lineClearedCount > 0) {
          // Increase score, level, etc.
          // You can implement your scoring system here
        }
      }

// Rotate the current Tetromino
      function rotateTetromino() {
        const originalTetromino = currentTetromino;
        currentTetromino = currentTetromino[0].map((_, col) =>
          currentTetromino.map((row) => row[col]).reverse()
        );

if (isColliding()) {
          currentTetromino = originalTetromino;
        }
      }

// Check if the current Tetromino is colliding with the game borders or other Tetrominos
      function isColliding() {
        for (let row = 0; row < currentTetromino.length; row++) {
          for (let col = 0; col < currentTetromino[row].length; col++) {
            if (
              currentTetromino[row][col] &&
              (currentTetrominoCol + col < 0 ||
                currentTetrominoCol + col >= grid.column ||
                currentTetrominoRow + row >= grid.row ||
                board[currentTetrominoRow + row][currentTetrominoCol + col])
            ) {
              return true;
            }
          }
        }
        return false;
      }

// Move the current Tetromino left
      function moveLeft() {
        currentTetrominoCol--;
        if (isColliding()) {
          currentTetrominoCol++;
        }
      }

// Move the current Tetromino right
      function moveRight() {
        currentTetrominoCol++;
        if (isColliding()) {
          currentTetrominoCol--;
        }
      }

// Initialize the game
      function init() {
        // Attach keyboard event listeners
        document.addEventListener("keydown", handleKeyDown);

generateTetromino();
        draw();
      }

// Game loop
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

drawBoard();
        drawTetromino();

moveDown();

requestAnimationFrame(draw);
      }

// Draw the current Tetromino
      function drawTetromino() {
        for (let row = 0; row < currentTetromino.length; row++) {
          for (let col = 0; col < currentTetromino[row].length; col++) {
            if (currentTetromino[row][col]) {
              drawCell(
                currentTetrominoCol + col,
                currentTetrominoRow + row,
                currentTetrominoColor
              );
            }
          }
        }
      }

// Handle keyboard events
      function handleKeyDown(event) {
        if (event.code === "ArrowLeft") {
          moveLeft();
        } else if (event.code === "ArrowRight") {
          moveRight();
        } else if (event.code === "ArrowDown") {
          moveDown();
        } else if (event.code === "ArrowUp") {
          rotateTetromino();
        }
      }

// Start the game
      init();
    });
  </script>
</body>
</html>
```

Please note that this is a simplified version of Tetris, and you can enhance and customize it further as per your requirements.