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

No:15961

←

Prev Next

→

Un tetris con dados
Developer User3408｜Date and time 23/9/14 6:39:42
Build time 99.738 sec｜Game capacity 8.539KB｜

Script

Tetris con Dados

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Tetris con Dados</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    canvas {
      background-color: #000;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <h1>Tetris con Dados</h1>
  <canvas id="tetris" width="240" height="400"></canvas>

const scale = 20;
      const rows = canvas.height / scale;
      const columns = canvas.width / scale;

let score = 0;
      let gameOver = false;

const colors = [
        '#00a8ff', // blue
        '#e84118', // red
        '#f5f6fa', // white
        '#fbc531', // yellow
        '#4cd137', // green
        '#7f8fa6', // gray
        '#e1b12c' // orange
      ];

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

// Create and initialize the playing field
      const arena = Array.from({ length: rows }, () => Array(columns).fill(0));

// Create the player object
      const player = {
        matrix: null,
        pos: { x: 0, y: 0 },
        score: 0
      };

// Generate a random Tetrimino
      function createTetrimino() {
        const randomIndex = Math.floor(Math.random() * tetriminos.length);
        const randomRotation = Math.floor(Math.random() * tetriminos[randomIndex].length);
        const matrix = tetriminos[randomIndex][randomRotation];
        const { length } = matrix;

player.matrix = matrix;
        player.pos.x = Math.floor(columns / 2) - Math.floor(length / 2);
        player.pos.y = 0;

if (collide(arena, player)) {
          gameOver = true;
          alert("¡Fin del juego!");
        }
      }

// Draw a Tetrimino on the canvas
      function drawMatrix(matrix, offset) {
        matrix.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value !== 0) {
              context.fillStyle = colors[value];
              context.fillRect((x + offset.x) * scale, (y + offset.y) * scale, scale, scale);
              context.strokeStyle = '#333';
              context.strokeRect((x + offset.x) * scale, (y + offset.y) * scale, scale, scale);
            }
          });
        });
      }

// Draw the current state of the game
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawMatrix(arena, { x: 0, y: 0 });
        drawMatrix(player.matrix, player.pos);
      }

// Merge the player's Tetrimino into the arena
      function merge(arena, player) {
        player.matrix.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value !== 0) {
              arena[y + player.pos.y][x + player.pos.x] = player.matrix[y][x];
            }
          });
        });
      }

// Check if the player's Tetrimino collides with the arena
      function collide(arena, player) {
        const { matrix, pos } = player;
        const { length } = matrix;

for (let y = 0; y < length; y++) {
          for (let x = 0; x < length; x++) {
            if (
              matrix[y][x] !== 0 &&
              (arena[y + pos.y] && arena[y + pos.y][x + pos.x]) !== 0
            ) {
              return true;
            }
          }
        }

return false;
      }

// Remove completed rows from the arena
      function sweep() {
        outer: for (let y = arena.length - 1; y >= 0; y--) {
          for (let x = 0; x < arena[y].length; x++) {
            if (arena[y][x] === 0) {
              continue outer;
            }
          }

const row = arena.splice(y, 1)[0].fill(0);
          arena.unshift(row);
          score += 10;
        }
      }

// Rotate the player's Tetrimino
      function rotate(matrix, direction) {
        const rotatedMatrix = matrix.map((_, index) =>
          matrix.map(column => column[index])
        );

if (direction > 0) {
          return rotatedMatrix.map(row => row.reverse());
        } else {
          return rotatedMatrix.reverse();
        }
      }

// Move the player's Tetrimino
      function movePlayer(direction) {
        player.pos.x += direction;
        if (collide(arena, player)) {
          player.pos.x -= direction;
        }
      }

// Drop the player's Tetrimino by one row
      function dropPlayer() {
        player.pos.y++;
        if (collide(arena, player)) {
          player.pos.y--;
          merge(arena, player);
          sweep();
          createTetrimino();
        }
      }

// Handle player input
      function handleInput(event) {
        if (event.keyCode === 37) { // Left Arrow
          movePlayer(-1);
        } else if (event.keyCode === 39) { // Right Arrow
          movePlayer(1);
        } else if (event.keyCode === 40) { // Down Arrow
          dropPlayer();
        } else if (event.keyCode === 38) { // Up Arrow
          player.matrix = rotate(player.matrix, 1);
          if (collide(arena, player)) {
            player.matrix = rotate(player.matrix, -1);
          }
        }
      }

// Update the game state
      function update(time = 0) {
        const deltaTime = time - lastTime;
        lastTime = time;

if (!gameOver) {
          dropCounter += deltaTime;
          if (dropCounter > dropInterval) {
            dropPlayer();
          }

draw();
          requestAnimationFrame(update);
        }
      }

// Start the game
      function startGame() {
        gameOver = false;
        score = 0;
        arena.forEach(row => row.fill(0));
        createTetrimino();

update();
      }

// Initialize event listeners
      document.addEventListener('keydown', handleInput);
      document.getElementById('start-btn').addEventListener('click', startGame);

let dropCounter = 0;
      let dropInterval = 1000;
      let lastTime = 0;

// Start the game initially
      startGame();
    });
  </script>
  <button id="start-btn">Iniciar juego</button>
</body>
</html>