AI game creator

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

No:39755

←

Prev Next

→

Tetris
Developer User17792｜Date and time 24/1/30 1:55:39
Build time 33.865 sec｜Game capacity 6.436KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tetris</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      
      body {
        background-color: #222;
        display: flex;
        justify-content: center;
      }
      
      canvas {
        background-color: #111;
        border: 2px solid #333;
        display: block;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <canvas id="tetris" width="240" height="400"></canvas>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const canvas = document.getElementById('tetris');
        const context = canvas.getContext('2d');

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

let score = 0;

const colors = [
          '#000',   // Black
          '#F00',   // Red
          '#0F0',   // Green
          '#00F',   // Blue
          '#FF0',   // Yellow
          '#F0F',   // Purple
          '#0FF',   // Cyan
          '#FFF'    // White
        ];

const tetriminos = [
          [[1, 1, 1], [0, 1, 0]],              // T
          [[0, 2, 2], [2, 2, 0]],              // O
          [[0, 3, 0], [3, 3, 3]],              // L
          [[4, 4, 0], [0, 4, 4]],              // J
          [[5, 5, 5, 5]],                      // I
          [[0, 6, 6], [6, 6, 0]],              // Z
          [[7, 7, 0], [0, 7, 7]]               // S
        ];

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

function rotate(matrix, direction) {
          const rotated = matrix.map((_, index) => matrix.map(column => column[index]));
          if (direction > 0) {
            return rotated.map(row => row.reverse());
          }
          return rotated.reverse();
        }

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

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

function playerReset() {
          const pieces = 'TOLJI7S';
          player.matrix = tetriminos[pieces[Math.floor(Math.random() * pieces.length)]];
          player.position.y = 0;
          player.position.x = Math.floor(columns / 2) - Math.floor(player.matrix[0].length / 2);
          if (collide(arena, player)) {
            arena.forEach(row => row.fill(0));
            score = 0;
            updateScore();
          }
        }

function updateScore() {
          document.getElementById('score').innerText = 'Score: ' + score;
        }

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 draw() {
          context.fillStyle = '#000';
          context.fillRect(0, 0, canvas.width, canvas.height);

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

const arena = createMatrix(rows, columns);

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

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