Tetris com controles e bola mais retângulo's game

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

No:41394

←

Prev Next

→

Tetris com controles e bola mais retângulo
Developer User18527｜Date and time 24/2/7 8:21:40
Build time 21.244 sec｜Game capacity 5.794KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
      margin: 20px;
    }
  </style>
</head>
<body>
  <canvas id="tetrisCanvas" width="250" height="500"></canvas>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const canvas = document.getElementById('tetrisCanvas');
      const context = canvas.getContext('2d');
      const scale = 25;
      const rows = canvas.height / scale;
      const columns = canvas.width / scale;

// Create the tetris grid
      const grid = [];
      for (let r = 0; r < rows; r++) {
        grid[r] = [];
        for (let c = 0; c < columns; c++) {
          grid[r][c] = 0;
        }
      }

// Tetromino shapes
      const shapes = [
        [
          [1, 1, 1, 1], // I-shape
        ],
        [
          [1, 1, 1],    // J-shape
          [0, 0, 1],
        ],
        [
          [1, 1, 1],    // L-shape
          [1, 0, 0],
        ],
        [
          [1, 1],       // O-shape
          [1, 1],
        ],
        [
          [1, 1, 0],    // S-shape
          [0, 1, 1],
        ],
        [
          [0, 1, 1],    // T-shape
          [1, 1, 0],
        ],
        [
          [1, 1, 1],    // Z-shape
          [0, 1, 0],
        ],
      ];

// Starting position and current shape
      let x = 3;
      let y = 0;
      let currentShape = randomShape();

// Generate a random shape
      function randomShape() {
        const index = Math.floor(Math.random() * shapes.length);
        return shapes[index];
      }

// Draw a tetromino shape on the canvas
      function drawShape(shape, offsetX, offsetY) {
        for (let r = 0; r < shape.length; r++) {
          for (let c = 0; c < shape[r].length; c++) {
            if (shape[r][c]) {
              const xPos = (x + c + offsetX) * scale;
              const yPos = (y + r + offsetY) * scale;
              context.fillStyle = '#333';
              context.fillRect(xPos, yPos, scale, scale);
              context.strokeStyle = '#FFF';
              context.strokeRect(xPos, yPos, scale, scale);
            }
          }
        }
      }

// Draw the tetris grid and shapes
      function drawGrid() {
        for (let r = 0; r < rows; r++) {
          for (let c = 0; c < columns; c++) {
            if (grid[r][c]) {
              context.fillStyle = '#333';
              context.fillRect(c * scale, r * scale, scale, scale);
              context.strokeStyle = '#FFF';
              context.strokeRect(c * scale, r * scale, scale, scale);
            }
          }
        }
      }

// Move the tetromino down
      function moveDown() {
        if (canMove(0, 1, currentShape)) {
          y++;
        } else {
          mergeShape();
          clearRows();
          currentShape = randomShape();
          x = 3;
          y = 0;

if (!canMove(0, 0, currentShape)) {
            // Game over
            alert('Game Over');
            location.reload();
          }
        }
      }

// Move the tetromino left
      function moveLeft() {
        if (canMove(-1, 0, currentShape)) {
          x--;
        }
      }

// Move the tetromino right
      function moveRight() {
        if (canMove(1, 0, currentShape)) {
          x++;
        }
      }

// Rotate the tetromino
      function rotateShape() {
        const rotatedShape = currentShape[0].map((_, i) =>
          currentShape.map(row => row[i]).reverse()
        );
  
        if (canMove(0, 0, rotatedShape)) {
          currentShape = [rotatedShape];
        }
      }

// Check if a movement is valid
      function canMove(offX, offY, newShape) {
        for (let r = 0; r < newShape.length; r++) {
          for (let c = 0; c < newShape[r].length; c++) {
            if (!newShape[r][c]) {
              continue;
            }
  
            const newX = x + c + offX;
            const newY = y + r + offY;

if (newX < 0 || newX >= columns || newY >= rows || grid[newY][newX]) {
              return false;
            }
          }
        }
  
        return true;
      }

// Merge the current shape with the grid
      function mergeShape() {
        for (let r = 0; r < currentShape[0].length; r++) {
          for (let c = 0; c < currentShape[0][r].length; c++) {
            if (currentShape[0][r][c]) {
              grid[y + r][x + c] = 1;
            }
          }
        }
      }

// Clear full rows
      function clearRows() {
        outer: for (let r = rows - 1; r >= 0; r--) {
          for (let c = 0; c < columns; c++) {
            if (!grid[r][c]) {
              continue outer;
            }
          }
  
          // Move down the upper rows
          for (let y = r; y > 0; y--) {
            for (let c = 0; c < columns; c++) {
              grid[y][c] = grid[y - 1][c];
            }
          }
  
          // Clear the top row
          for (let c = 0; c < columns; c++) {
            grid[0][c] = 0;
          }
  
          r++;
        }
      }

// Update the game state
      function update() {
        moveDown();
        drawGrid();
        drawShape(currentShape[0], 0, 0);
      }

// Handle keyboard events
      document.addEventListener('keydown', event => {
        if (event.key === 'ArrowLeft') {
          moveLeft();
        } else if (event.key === 'ArrowRight') {
          moveRight();
        } else if (event.key === 'ArrowDown') {
          moveDown();
        } else if (event.key === 'ArrowUp') {
          rotateShape();
        }
      });

// Game loop
      function gameLoop() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        update();
        setTimeout(gameLoop, 1000);
      }

gameLoop();
    });
  </script>
</body>
</html>