AI game creator

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

No:42999

114

←

Prev Next

→

Tetris
Developer User19044｜Date and time 24/2/13 20:18:01
Build time 26.731 sec｜Game capacity 6.056KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Tetris Game</title>
  <style>
    body {
      background-color: #222222;
      margin: 0;
      padding: 0;
    }
    
    canvas {
      display: block;
      margin: 20px auto;
      background-color: #111111;
      border: 2px solid #333333;
    }
  </style>
</head>
<body>
  <script>
    // Define the canvas element
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    
    // Set the canvas dimensions
    const row = 20;
    const col = 10;
    const squareSize = 20;
    canvas.width = col * squareSize;
    canvas.height = row * squareSize;
    
    // Tetromino shapes
    const tetrominos = [
      [Z, "red"],
      [S, "green"],
      [T, "yellow"],
      [O, "blue"],
      [L, "purple"],
      [I, "cyan"],
      [J, "orange"]
    ];
    
    const Z = [
      [1, 1, 0],
      [0, 1, 1],
      [0, 0, 0]
    ];
    
    const S = [
      [0, 2, 2],
      [2, 2, 0],
      [0, 0, 0]
    ];
    
    const T = [
      [0, 3, 0],
      [3, 3, 3],
      [0, 0, 0]
    ];
    
    const O = [
      [4, 4],
      [4, 4]
    ];
    
    const L = [
      [0, 0, 5],
      [5, 5, 5],
      [0, 0, 0]
    ];
    
    const I = [
      [0, 0, 0, 0],
      [6, 6, 6, 6],
      [0, 0, 0, 0],
      [0, 0, 0, 0]
    ];
    
    const J = [
      [7, 0, 0],
      [7, 7, 7],
      [0, 0, 0]
    ];
    
    // Initialize the board
    const board = [];
    for (let row = 0; row < 20; row++) {
      board[row] = [];
      for (let col = 0; col < 10; col++) {
        board[row][col] = 0;
      }
    }
    
    // Draw the square
    function drawSquare(x, y, color) {
      context.fillStyle = color;
      context.fillRect(x * squareSize, y * squareSize, squareSize, squareSize);
      context.strokeStyle = "#333333";
      context.strokeRect(x * squareSize, y * squareSize, squareSize, squareSize);
    }
    
    // Draw the board
    function drawBoard() {
      for (let row = 0; row < 20; row++) {
        for (let col = 0; col < 10; col++) {
          if (board[row][col] !== 0) {
            drawSquare(col, row, tetrominos[board[row][col]][1]);
          }
        }
      }
    }
    
    // Create a new Tetromino
    function createTetromino() {
      const random = Math.floor(Math.random() * tetrominos.length);
      return {
        shape: tetrominos[random][0],
        color: tetrominos[random][1],
        x: 3,
        y: -2
      };
    }
    
    // Check if the movement is valid
    function validMove(newX, newY, tetromino) {
      for (let row = 0; row < tetromino.shape.length; row++) {
        for (let col = 0; col < tetromino.shape[row].length; col++) {
          if (tetromino.shape[row][col] !== 0) {
            const futureX = newX + col;
            const futureY = newY + row;
    
            if (futureY < 0) {
              continue;
            }
    
            if (futureX < 0 || futureX >= col || futureY >= row || board[futureY][futureX] !== 0) {
              return false;
            }
          }
        }
      }
      return true;
    }
    
    // Move the Tetromino downwards
    function moveDown() {
      if (validMove(tetromino.x, tetromino.y + 1, tetromino)) {
        tetromino.y++;
      } else {
        lockTetromino();
        tetromino = createTetromino();
      }
    }
    
    // Move the Tetromino left
    function moveLeft() {
      if (validMove(tetromino.x - 1, tetromino.y, tetromino)) {
        tetromino.x--;
      }
    }
    
    // Move the Tetromino right
    function moveRight() {
      if (validMove(tetromino.x + 1, tetromino.y, tetromino)) {
        tetromino.x++;
      }
    }
    
    // Rotate the Tetromino
    function rotate() {
      const temp = tetromino.shape;
      tetromino.shape = tetromino.shape[0].map((_, colIndex) => tetromino.shape.map(row => row[colIndex])).reverse();
    
      if (!validMove(tetromino.x, tetromino.y, tetromino)) {
        tetromino.shape = temp;
      }
    }
    
    // Lock the Tetromino in place
    function lockTetromino() {
      for (let row = 0; row < tetromino.shape.length; row++) {
        for (let col = 0; col < tetromino.shape[row].length; col++) {
          if (tetromino.shape[row][col] !== 0) {
            board[tetromino.y + row][tetromino.x + col] = tetromino.shape[row][col];
          }
        }
      }
      checkForLineClear();
    }
    
    // Clear the lines if they are full
    function checkForLineClear() {
      for (let row = 0; row < 20; row++) {
        if (board[row].every(value => value !== 0)) {
          board.splice(row, 1);
          board.unshift(Array(10).fill(0));
        }
      }
    }
    
    // Draw the Tetromino
    function drawTetromino() {
      for (let row = 0; row < tetromino.shape.length; row++) {
        for (let col = 0; col < tetromino.shape[row].length; col++) {
          if (tetromino.shape[row][col] !== 0) {
            drawSquare(tetromino.x + col, tetromino.y + row, tetromino.color);
          }
        }
      }
    }
    
    // Handle keyboard events for movement and rotation
    function handleKeyPress(event) {
      switch (event.keyCode) {
        case 37: // Left arrow key
          moveLeft();
          break;
        case 38: // Up arrow key
          rotate();
          break;
        case 39: // Right arrow key
          moveRight();
          break;
        case 40: // Down arrow key
          moveDown();
          break;
      }
    }
    
    // Main game loop
    function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    
      moveDown();
      drawBoard();
      drawTetromino();
    }
    
    // Start the game
    function startGame() {
      tetromino = createTetromino();
      drawBoard();
      drawTetromino();
      setInterval(gameLoop, 1000);
    }
    
    // Add the canvas to the document and start the game
    document.body.appendChild(canvas);
    startGame();
    
    // Listen for keyboard events
    document.addEventListener("keydown", handleKeyPress);
  </script>
</body>
</html>