Tetris's game | AI game creator

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

No:43229

148

Tetris
Developer User18949｜Date and time 24/2/15 2:11:12
Build time 19.424 sec｜Game capacity 6.438KB｜

→ 　

0　

0　

　
　
　
　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 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;

context.scale(scale, scale);

const matrix = [
          [0, 0, 0],
          [1, 1, 1],
          [0, 1, 0]
        ];

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

function drawMatrix(matrix, offset) {
          matrix.forEach((row, y) => {
            row.forEach((value, x) => {
              if (value !== 0) {
                context.fillStyle = "purple";
                context.fillRect(x + offset.x, y + offset.y, 1, 1);
              }
            });
          });
        }

function collide(arena, player) {
          const [m, o] = [player.matrix, player.pos];
          for (let y = 0; y < m.length; ++y) {
            for (let x = 0; x < m[y].length; ++x) {
              if (
                m[y][x] !== 0 &&
                (arena[y + o.y] &&
                  arena[y + o.y][x + o.x]) !== 0
              ) {
                return true;
              }
            }
          }
          return false;
        }

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] = value;
              }
            });
          });
        }

function rotate(matrix, direction) {
          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 (direction > 0) {
            matrix.forEach(row => row.reverse());
          } else {
            matrix.reverse();
          }
        }

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

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

function playerReset() {
          const pieces = "TJLOSZI";
          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));
          }
        }

function playerRotate(dir) {
          const pos = player.pos.x;
          let offset = 1;
          rotate(player.matrix, dir);
          while (collide(arena, player)) {
            player.pos.x += offset;
            offset = -(offset + (offset > 0 ? 1 : -1));
            if (offset > player.matrix[0].length) {
              rotate(player.matrix, -dir);
              player.pos.x = pos;
              return;
            }
          }
        }

function createPiece(type) {
          if (type === "T") {
            return [
              [0, 0, 0],
              [1, 1, 1],
              [0, 1, 0]
            ];
          } else if (type === "O") {
            return [
              [2, 2],
              [2, 2]
            ];
          } else if (type === "L") {
            return [
              [0, 3, 0],
              [0, 3, 0],
              [0, 3, 3]
            ];
          } else if (type === "J") {
            return [
              [0, 4, 0],
              [0, 4, 0],
              [4, 4, 0]
            ];
          } else if (type === "I") {
            return [
              [0, 5, 0, 0],
              [0, 5, 0, 0],
              [0, 5, 0, 0],
              [0, 5, 0, 0]
            ];
          } else if (type === "S") {
            return [
              [0, 6, 6],
              [6, 6, 0],
              [0, 0, 0]
            ];
          } else if (type === "Z") {
            return [
              [7, 7, 0],
              [0, 7, 7],
              [0, 0, 0]
            ];
          }
        }

function arenaSweep() {
          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;
          }
        }

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

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

function update() {
          draw();
          playerDrop();
        }

const arena = createMatrix(12, 20);

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

document.addEventListener("keydown", event => {
          if (event.keyCode === 37) {
            playerMove(-1); // Left arrow key
          } else if (event.keyCode === 39) {
            playerMove(1); // Right arrow key
          } else if (event.keyCode === 40) {
            playerDrop(); // Down arrow key
          } else if (event.keyCode === 81) {
            playerRotate(-1); // Q key
          } else if (event.keyCode === 87) {
            playerRotate(1); // W key
          }
        });

let dropCounter = 0;
        let dropInterval = 1000;

function updateTimer() {
          dropCounter += dropInterval;
          if (dropCounter >= dropInterval) {
            playerDrop();
            dropCounter = 0;
          }
        }

setInterval(updateTimer, 10);

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