Haz un buen juego de tetris's game

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

No:35704

175

←

Prev Next

→

Haz un buen juego de tetris
Developer User16538｜Date and time 24/1/15 3:16:00
Build time 29.47 sec｜Game capacity 6.531KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Tetris</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #202020;
        display: flex;
        align-items: center;
        justify-content: center;
      }

canvas {
        background-color: #000000;
        border: 4px solid #ffffff;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="300" height="600"></canvas>

// Tetromino Pieces
      const tetrominoPieces = [
        [[1, 1, 1, 1]], // I
        [[1, 1], [1, 1]], // O
        [[1, 1, 1], [0, 1, 0]], // T
        [[1, 1, 0], [0, 1, 1]], // Z
        [[0, 1, 1], [1, 1, 0]], // S
        [[1, 1, 1], [0, 0, 1]], // J
        [[1, 1, 1], [1, 0, 0]], // L
      ];

// Colors
      const tetrominoColors = [
        '#00BFFF', // Light Blue
        '#FFD700', // Gold
        '#A020F0', // Purple
        '#FF4500', // Orange Red
        '#32CD32', // Lime Green
        '#0000FF', // Blue
        '#FFA500', // Orange
      ];

// Create the board
      const board = Array.from(Array(height), () => new Array(width).fill(0));

// Create a new Tetromino piece
      function createTetromino() {
        const randomPiece = Math.floor(Math.random() * tetrominoPieces.length);
        const tetromino = tetrominoPieces[randomPiece];
        const color = tetrominoColors[randomPiece];
        const x = Math.floor((width / 2) - (tetromino[0].length / 2));
        const y = -tetromino.length;

return { tetromino, color, x, y };
      }

let currentTetromino = createTetromino();

// Draw a Tetromino piece
      function drawTetromino(tetromino, x, y, color) {
        tetromino.forEach((row, i) => {
          row.forEach((value, j) => {
            if (value) {
              context.fillStyle = color;
              context.fillRect((x + j) * grid, (y + i) * grid, grid, grid);
              context.strokeStyle = '#ffffff';
              context.strokeRect((x + j) * grid, (y + i) * grid, grid, grid);
            }
          });
        });
      }

// Draw the board
      function drawBoard() {
        board.forEach((row, i) => {
          row.forEach((value, j) => {
            if (value) {
              context.fillStyle = tetrominoColors[value - 1];
              context.fillRect(j * grid, i * grid, grid, grid);
              context.strokeStyle = '#ffffff';
              context.strokeRect(j * grid, i * grid, grid, grid);
            }
          });
        });
      }

// Check if a move is valid
      function isMoveValid(tetromino, x, y) {
        for (let i = 0; i < tetromino.length; i++) {
          for (let j = 0; j < tetromino[0].length; j++) {
            if (tetromino[i][j] && (board[y + i] && board[y + i][x + j]) !== 0) {
              return false;
            }
          }
        }
        return true;
      }

// Place a Tetromino piece on the board
      function placeTetromino() {
        currentTetromino.tetromino.forEach((row, i) => {
          row.forEach((value, j) => {
            if (value) {
              board[currentTetromino.y + i][currentTetromino.x + j] = currentTetromino.color;
            }
          });
        });
      }

// Check if a row is complete
      function isRowComplete(row) {
        return row.every((value) => value !== 0);
      }

// Remove a complete row
      function removeRow(row) {
        board.splice(row, 1);
        board.unshift(Array(width).fill(0));
        score += 100;
      }

// Check for complete rows and remove them
      function checkCompleteRows() {
        for (let i = 0; i < height; i++) {
          if (isRowComplete(board[i])) {
            removeRow(i);
          }
        }
      }

// Update the game state
      function update() {
        if (!gameOver) {
          if (isMoveValid(currentTetromino.tetromino, currentTetromino.x, currentTetromino.y + 1)) {
            currentTetromino.y++;
          } else {
            placeTetromino();
            checkCompleteRows();
            currentTetromino = createTetromino();

if (!isMoveValid(currentTetromino.tetromino, currentTetromino.x, currentTetromino.y)) {
              gameOver = true;
            }
          }
        }
      }

// Draw the game
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBoard();
        drawTetromino(currentTetromino.tetromino, currentTetromino.x, currentTetromino.y, currentTetromino.color);

if (gameOver) {
          context.fillStyle = '#ffffff';
          context.font = '30px Arial';
          context.fillText('Game Over!', 75, canvas.height / 2);
        } else {
          context.fillStyle = '#ffffff';
          context.font = '20px Arial';
          context.fillText(`Score: ${score}`, 10, 30);
        }
      }

// Game loop
      function loop() {
        update();
        draw();

if (!gameOver) {
          requestAnimationFrame(loop);
        }
      }

// Key controls
      document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowLeft') {
          if (isMoveValid(currentTetromino.tetromino, currentTetromino.x - 1, currentTetromino.y)) {
            currentTetromino.x--;
          }
        } else if (event.key === 'ArrowRight') {
          if (isMoveValid(currentTetromino.tetromino, currentTetromino.x + 1, currentTetromino.y)) {
            currentTetromino.x++;
          }
        } else if (event.key === 'ArrowDown') {
          if (isMoveValid(currentTetromino.tetromino, currentTetromino.x, currentTetromino.y + 1)) {
            currentTetromino.y++;
          }
        } else if (event.key === 'ArrowUp') {
          const rotatedTetromino = currentTetromino.tetromino[0].map((_, index) =>
            currentTetromino.tetromino.map((row) => row[index]).reverse()
          );
          
          if (isMoveValid(rotatedTetromino, currentTetromino.x, currentTetromino.y)) {
            currentTetromino.tetromino = rotatedTetromino;
          }
        }
      });

// Start the game
      loop();
    </script>
  </body>
</html>