AI game creator

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

No:40567

←

Prev Next

→

Tetris
Developer User18058｜Date and time 24/2/3 13:11:44
Build time 21.979 sec｜Game capacity 6.631KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Tetris - Smartphone Version</title>
    <style>
      #canvas {
        display: block;
        margin: 0 auto;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="320" height="640"></canvas>

// Function to draw a single tetromino block
        function drawBlock(x, y, color) {
          context.fillStyle = color;
          context.fillRect(x, y, 30, 30);
          context.strokeStyle = "rgba(0, 0, 0, 0.5)";
          context.lineWidth = 3;
          context.strokeRect(x, y, 30, 30);
        }

// Function to draw the game grid
        function drawGrid() {
          for (let row = 0; row < 20; row++) {
            for (let column = 0; column < 10; column++) {
              const x = column * 30;
              const y = row * 30;
              const color = grid[row][column];
              drawBlock(x, y, color);
            }
          }
        }

// Initialize the game grid (empty grid)
        const grid = new Array(20).fill(null).map(() => new Array(10).fill("#000"));

// Initialize the active tetromino
        let tetromino = [
          [1, 1, 1, 1], // I-shape
          [2, 2, 2, 0], // L-shape
          [3, 3, 3, 0], // J-shape
          [4, 4, 0, 0], // S-shape
          [5, 5, 0, 0], // Z-shape
          [6, 6, 6, 0], // T-shape
          [7, 7, 0, 0]  // O-shape
        ];

// Initialize the tetromino position
        let tetrominoX = 3;
        let tetrominoY = 0;
        let currentTetromino = Math.floor(Math.random() * tetromino.length);
        let currentRotation = 0;

// Function to draw the current tetromino
        function drawTetromino() {
          for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
              if (tetromino[currentTetromino][currentRotation][row * 4 + column]) {
                const x = (tetrominoX + column) * 30;
                const y = (tetrominoY + row) * 30;
                const color = "#"+((1<<24)*Math.random()|0).toString(16);
                drawBlock(x, y, color);
              }
            }
          }
        }

// Function to move the active tetromino
        function moveTetromino(direction) {
          let newX = tetrominoX;
          let newY = tetrominoY;

if (direction === "left") {
            newX--;
          } else if (direction === "right") {
            newX++;
          } else if (direction === "down") {
            newY++;
          }

if (isValidMove(currentTetromino, currentRotation, newX, newY)) {
            tetrominoX = newX;
            tetrominoY = newY;
          }
        }

// Function to rotate the active tetromino
        function rotateTetromino() {
          const newRotation = (currentRotation + 1) % tetromino[currentTetromino].length;

if (isValidMove(currentTetromino, newRotation, tetrominoX, tetrominoY)) {
            currentRotation = newRotation;
          }
        }

// Function to check if the move is valid
        function isValidMove(tetrominoIndex, rotation, newX, newY) {
          for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
              if (tetromino[tetrominoIndex][rotation][row * 4 + column]) {
                const proposedX = newX + column;
                const proposedY = newY + row;

if (
                  proposedX < 0 ||
                  proposedX >= 10 ||
                  proposedY >= 20 ||
                  (proposedY >= 0 && grid[proposedY][proposedX])
                ) {
                  return false;
                }
              }
            }
          }

return true;
        }

// Function to place the tetromino on the grid
        function placeTetromino() {
          for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
              if (tetromino[currentTetromino][currentRotation][row * 4 + column]) {
                const x = tetrominoX + column;
                const y = tetrominoY + row;
                const color = "#"+((1<<24)*Math.random()|0).toString(16);
                grid[y][x] = color;
              }
            }
          }

removeFilledRows();
          generateNewTetromino();
        }

// Function to remove filled rows
        function removeFilledRows() {
          for (let row = 0; row < 20; row++) {
            if (grid[row].every((cell) => cell !== "#000")) {
              grid.splice(row, 1);
              grid.unshift(new Array(10).fill("#000"));
            }
          }
        }

// Function to generate a new tetromino
        function generateNewTetromino() {
          currentTetromino = Math.floor(Math.random() * tetromino.length);
          currentRotation = 0;
          tetrominoX = 3;
          tetrominoY = 0;

if (!isValidMove(currentTetromino, currentRotation, tetrominoX, tetrominoY)) {
            // GAME OVER
            alert("GAME OVER");
          }
        }

// Function to update the game state
        function update() {
          if (isValidMove(currentTetromino, currentRotation, tetrominoX, tetrominoY + 1)) {
            tetrominoY++;
          } else {
            placeTetromino();
          }
        }

// Function to clear the canvas
        function clear() {
          context.clearRect(0, 0, canvas.width, canvas.height);
        }

// Function to render the game
        function render() {
          clear();
          drawGrid();
          drawTetromino();
        }

// Function to handle key events
        function handleKeyPress(event) {
          switch (event.keyCode) {
            case 37: // Arrow Left
              moveTetromino("left");
              break;
            case 39: // Arrow Right
              moveTetromino("right");
              break;
            case 40: // Arrow Down
              moveTetromino("down");
              break;
            case 32: // Spacebar
              rotateTetromino();
              break;
          }
        }

// Update and render the game every 500ms
        setInterval(() => {
          update();
          render();
        }, 500);

// Event listener for keyboard input
        window.addEventListener("keydown", handleKeyPress);
      });
    </script>
  </body>
</html>