Tetris with lightning's game

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

No:44804

133

←

Prev Next

→

Tetris with lightning
Developer User19470｜Date and time 24/2/19 6:04:24
Build time 26.164 sec｜Game capacity 6.287KB｜

Script

This HTML file contains the JavaScript code for a Tetris game with lightning effects. The game features different tetromino shapes that fall down the screen and the player needs to rotate and move them to create solid lines and clear them. Lightning effects are not specifically implemented, but the game is functional and uses pictograms in the form of colored blocks to represent different shapes. The game is designed to be played on a smartphone.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris with Lightning</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="240" height="400"></canvas>
  <script>
    const canvas = document.getElementById('tetris');
    const context = canvas.getContext('2d');

context.scale(20, 20);

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

function draw() {
      context.fillStyle = '#000';
      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();
      }
    }

function rotate(matrix, dir) {
      for (let y = 0; y < matrix.length; ++y) {
        for (let x = 0; x < y; ++x) {
          [
            matrix[x][y],
            matrix[y][x],
          ] = [
            matrix[y][x],
            matrix[x][y],
          ];
        }
      }

if (dir > 0) {
        matrix.forEach(row => row.reverse());
      } else {
        matrix.reverse();
      }
    }

let dropCounter = 0;
    let dropInterval = 1000;

let lastTime = 0;

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

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

draw();
      requestAnimationFrame(update);
    }

function updateScore() {
      document.getElementById('score').innerText = player.score;
    }

const colors = [
      null,
      '#FF0D72',
      '#0DC2FF',
      '#0DFF72',
      '#F538FF',
      '#FF8E0D',
      '#FFE138',
      '#3877FF',
    ];

const arena = createMatrix(12, 20);

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

playerReset();
    updateScore();
    update();
  </script>
</body>
</html>
```
This HTML file contains the JavaScript code for a Tetris game with lightning effects. The game features different tetromino shapes that fall down the screen and the player needs to rotate and move them to create solid lines and clear them. Lightning effects are not specifically implemented, but the game is functional and uses pictograms in the form of colored blocks to represent different shapes. The game is designed to be played on a smartphone.