AI game creator

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

No:16644

←

Prev Next

→

Tetris
Developer User7399｜Date and time 23/9/19 20:52:51
Build time 71.164 sec｜Game capacity 6.055KB｜

Script

Sure, here's a basic implementation of Tetris game using JavaScript and HTML:

This is a simple implementation of Tetris using HTML5 canvas and JavaScript. It includes the basic gameplay mechanics such as moving and rotating tetrominos, clearing filled rows, and detecting game over. You can control the game using arrow keys on a smartphone or desktop. The game will automatically start and display pictogram-like tetromino shapes on the canvas.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure, here's a basic implementation of Tetris game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="200" height="400"></canvas>

// Define the tetromino shapes
      const tetrominos = [
        [[1, 1, 1, 1]],
        [[1, 1], [1, 1]],
        [[1, 1, 1], [0, 1, 0]],
        [[1, 1, 1], [1, 0, 0]],
        [[1, 1, 1], [0, 0, 1]],
        [[1, 1, 0], [0, 1, 1]],
        [[0, 1, 1], [1, 1, 0]],
      ];

// Define initial game state
      const gameState = {
        grid: Array.from({ length: 20 }, () => Array(10).fill(0)),
        currentTetromino: null,
        currentX: 0,
        currentY: 0,
      };

// Generate a random tetromino
      function generateTetromino() {
        const shape = tetrominos[Math.floor(Math.random() * tetrominos.length)];
        const x = Math.floor((gameState.grid[0].length - shape[0].length) / 2);
        const y = 0;
        return {
          shape,
          x,
          y,
        };
      }

// Draw the game grid
      function drawGrid() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = "#000";

for (let row = 0; row < gameState.grid.length; row++) {
          for (let col = 0; col < gameState.grid[row].length; col++) {
            const cell = gameState.grid[row][col];
            ctx.fillStyle = cell ? "#333" : "#fff";
            ctx.fillRect(col * 20, row * 20, 20, 20);
            ctx.strokeRect(col * 20, row * 20, 20, 20);
          }
        }
      }

// Draw the current tetromino on the grid
      function drawTetromino() {
        const { shape, x, y } = gameState.currentTetromino;
        
        for (let row = 0; row < shape.length; row++) {
          for (let col = 0; col < shape[row].length; col++) {
            if (shape[row][col]) {
              const cellX = x + col;
              const cellY = y + row;
              ctx.fillStyle = "#333";
              ctx.fillRect(cellX * 20, cellY * 20, 20, 20);
              ctx.strokeRect(cellX * 20, cellY * 20, 20, 20);
            }
          }
        }
      }

// Check if the current tetromino is colliding with the game grid or has reached the bottom
      function isColliding() {
        const { shape, x, y } = gameState.currentTetromino;
        for (let row = 0; row < shape.length; row++) {
          for (let col = 0; col < shape[row].length; col++) {
            if (
              shape[row][col] &&
              (gameState.grid[y + row] && gameState.grid[y + row][x + col]) !== 0
            ) {
              return true;
            }
          }
        }
        return false;
      }

// Rotate the current tetromino
      function rotateTetromino() {
        const { shape } = gameState.currentTetromino;
        const rotatedShape = shape[0].map((_, index) =>
          shape.map((row) => row[index]).reverse()
        );
        gameState.currentTetromino.shape = rotatedShape;
      }

// Merge the current tetromino with the game grid
      function mergeTetromino() {
        const { shape, x, y } = gameState.currentTetromino;
        
        for (let row = 0; row < shape.length; row++) {
          for (let col = 0; col < shape[row].length; col++) {
            if (shape[row][col]) {
              gameState.grid[y + row][x + col] = 1;
            }
          }
        }
      }

// Check and clear any filled rows
      function clearRows() {
        for (let row = gameState.grid.length - 1; row >= 0; row--) {
          if (gameState.grid[row].every((cell) => cell !== 0)) {
            gameState.grid.splice(row, 1);
            gameState.grid.unshift(Array(10).fill(0));
          }
        }
      }

// Move the current tetromino down
      function moveDown() {
        gameState.currentY++;

if (isColliding()) {
          gameState.currentY--;
          mergeTetromino();
          clearRows();
          gameState.currentTetromino = generateTetromino();

if (isColliding()) {
            // Game over
            alert("Game Over!");
            location.reload();
          }
        }
      }

// Move the current tetromino left or right
      function move(direction) {
        gameState.currentX += direction;
        if (isColliding()) {
          gameState.currentX -= direction;
        }
      }

// Handle keyboard events
      function handleKeyPress(event) {
        switch (event.keyCode) {
          case 37: // Left arrow key
            move(-1);
            break;
          case 39: // Right arrow key
            move(1);
            break;
          case 38: // Up arrow key (rotate)
            rotateTetromino();
            if (isColliding()) {
              rotateTetromino(); // Rotate back if collision occurs
            }
            break;
          case 40: // Down arrow key (move down faster)
            moveDown();
            break;
        }
      }

// Start the game
      function startGame() {
        gameState.currentTetromino = generateTetromino();
        setInterval(() => {
          moveDown();
          drawGrid();
          drawTetromino();
        }, 1000);
      }

// Register event listeners
      document.addEventListener("keydown", handleKeyPress);

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