Haz un juego como tetris en español's game

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

No:35413

←

Prev Next

→

Haz un juego como tetris en español
Developer User16538｜Date and time 24/1/14 11:41:07
Build time 23.221 sec｜Game capacity 6.678KB｜

Script

Puntaje: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Tetris en Español</title>
    <style>
      #tetris {
        border: solid 1px #333;
        margin: 20px auto;
        display: block;
        background: #111;
      }
      #score {
        color: white;
        font-size: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="tetris">
      <canvas id="tetris-canvas" width="240" height="400"></canvas>
    </div>
    <div id="score">Puntaje: 0</div>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const canvas = document.getElementById("tetris-canvas");
        const context = canvas.getContext("2d");

context.scale(20, 20);

function arenaSweep() {
          let rowCount = 1;
          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);
            ++y;

player.score += rowCount * 10;
            rowCount *= 2;
          }
        }

function createMatrix(w, h) {
          const matrix = [];
          while (h--) {
            matrix.push(new Array(w).fill(0));
          }
          return matrix;
        }

function draw() {
          context.fillStyle = "#111";
          context.fillRect(0, 0, canvas.width, canvas.height);

drawMatrix(arena, { x: 0, y: 0 });
          drawMatrix(player.matrix, player.pos);
        }

function playerDrop() {
          player.pos.y++;
          if (collide(arena, player)) {
            player.pos.y--;
            merge(arena, player);
            playerReset();
            arenaSweep();
            updateScore();
          }
          dropCounter = 0;
        }

function playerMove(dir) {
          player.pos.x += dir;
          if (collide(arena, player)) {
            player.pos.x -= dir;
          }
        }

function playerReset() {
          const pieces = "ILJOTSZ";
          player.matrix = createPiece(
            pieces[(pieces.length * Math.random()) | 0]
          );
          player.pos.y = 0;
          player.pos.x =
            ((arena[0].length / 2) | 0) -
            ((player.matrix[0].length / 2) | 0);
          if (collide(arena, player)) {
            arena.forEach((row) => row.fill(0));
            player.score = 0;
            updateScore();
          }
        }

let dropCounter = 0;
        let dropInterval = 1000;

let lastTime = 0;

function update(now = 0) {
          const deltaTime = now - lastTime;
          lastTime = now;

dropCounter += deltaTime;
          if (dropCounter > dropInterval) {
            playerDrop();
          }

draw();
          requestAnimationFrame(update);
        }

function updateScore() {
          document.getElementById("score").innerText =
            "Puntaje: " + player.score;
        }

const colors = [
          null,
          "#00FFFF",
          "#0000FF",
          "#FFA500",
          "#FFFF00",
          "#00FF00",
          "#FF0000",
          "#800080",
        ];

const arena = createMatrix(12, 20);

const player = {
          pos: { x: 0, y: 0 },
          matrix: null,
          score: 0,
        };

playerReset();
        update();
      });
    </script>
  </body>
</html>