Tetris's game | AI game creator

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

No:19699

54

Tetris
Developer User8782｜Date and time 23/10/6 1:27:05
Build time 44.364 sec｜Game capacity 6.403KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の売れ筋ゲームランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
   <title>Tetris</title>
   <style>
      canvas {
         border: 1px solid #000;
         display: block;
         margin: 20px auto;
      }
   </style>
</head>
<body>
   <canvas id="tetrisCanvas" width="240" height="400"></canvas>
   <script>
      const canvas = document.getElementById("tetrisCanvas");
      const context = canvas.getContext("2d");
      const grid = createGrid(240, 400, 20); // Create a 12x20 grid

function createGrid(width, height, blockSize) {
         const rows = height / blockSize;
         const columns = width / blockSize;
         const grid = [];
         for (let row = 0; row < rows; row++) {
            grid[row] = [];
            for (let col = 0; col < columns; col++) {
               grid[row][col] = 0;
            }
         }
         return grid;
      }

function drawGrid() {
         for (let row = 0; row < grid.length; row++) {
            for (let col = 0; col < grid[row].length; col++) {
               const block = grid[row][col];
               context.fillStyle = getBlockColor(block);
               context.fillRect(col * 20, row * 20, 20, 20);
               context.strokeStyle = "#000";
               context.strokeRect(col * 20, row * 20, 20, 20);
            }
         }
      }

function getBlockColor(block) {
         switch (block) {
            case 1:
               return "#FF0000"; // Red
            case 2:
               return "#00FF00"; // Green
            case 3:
               return "#0000FF"; // Blue
            case 4:
               return "#FFFF00"; // Yellow
            default:
               return "#FFFFFF"; // White
         }
      }

function drawTetromino(tetromino, color) {
         for (let row = 0; row < tetromino.length; row++) {
            for (let col = 0; col < tetromino[row].length; col++) {
               if (tetromino[row][col] === 1) {
                  context.fillStyle = color;
                  context.fillRect(col * 20, row * 20, 20, 20);
                  context.strokeStyle = "#000";
                  context.strokeRect(col * 20, row * 20, 20, 20);
               }
            }
         }
      }

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

function getRandomTetromino() {
         const randomIndex = Math.floor(Math.random() * tetrominos.length);
         return tetrominos[randomIndex];
      }

const tetromino = getRandomTetromino();
      const currentTetromino = {
         tetromino: tetromino,
         row: 0,
         col: Math.floor(grid[0].length / 2) - Math.floor(tetromino[0].length / 2)
      };

function mergeTetromino() {
         const { tetromino, row, col } = currentTetromino;
         for (let rowIdx = 0; rowIdx < tetromino.length; rowIdx++) {
            for (let colIdx = 0; colIdx < tetromino[rowIdx].length; colIdx++) {
               if (tetromino[rowIdx][colIdx] === 1) {
                  grid[row + rowIdx][col + colIdx] = tetromino[rowIdx][colIdx];
               }
            }
         }
      }

function rotateTetromino() {
         const { tetromino } = currentTetromino;
         const rotatedTetromino = [];
         for (let col = 0; col < tetromino[0].length; col++) {
            const newRow = [];
            for (let row = tetromino.length - 1; row >= 0; row--) {
               newRow.push(tetromino[row][col]);
            }
            rotatedTetromino.push(newRow);
         }
         currentTetromino.tetromino = rotatedTetromino;
      }

function checkCollision(tetromino, row, col) {
         for (let rowIdx = 0; rowIdx < tetromino.length; rowIdx++) {
            for (let colIdx = 0; colIdx < tetromino[rowIdx].length; colIdx++) {
               if (
                  (tetromino[rowIdx][colIdx] === 1 && (row + rowIdx >= grid.length || col + colIdx < 0 || col + colIdx >= grid[0].length || grid[row + rowIdx][col + colIdx] !== 0))
               ) {
                  return true;
               }
            }
         }
         return false;
      }

function moveTetromino(down = false) {
         const { tetromino, row, col } = currentTetromino;
         const newRow = row + (down ? 1 : 0);
         if (!checkCollision(tetromino, newRow, col)) {
            currentTetromino.row = newRow;
         } else if (row === 0) {
            // Game over
            alert("Game Over!");
            location.reload();
         } else {
            mergeTetromino();
            deleteFullRows();
            const newTetromino = getRandomTetromino();
            currentTetromino.tetromino = newTetromino;
            currentTetromino.row = 0;
            currentTetromino.col = Math.floor(grid[0].length / 2) - Math.floor(newTetromino[0].length / 2);
         }
      }

function deleteFullRows() {
         for (let row = grid.length - 1; row >= 0; row--) {
            if (grid[row].every(block => block !== 0)) {
               grid.splice(row, 1);
               grid.unshift(Array(grid[0].length).fill(0));
            }
         }
      }

function handleKeyPress(event) {
         switch (event.keyCode) {
            case 37: // Left arrow
               if (!checkCollision(currentTetromino.tetromino, currentTetromino.row, currentTetromino.col - 1)) {
                  currentTetromino.col -= 1;
               }
               break;
            case 39: // Right arrow
               if (!checkCollision(currentTetromino.tetromino, currentTetromino.row, currentTetromino.col + 1)) {
                  currentTetromino.col += 1;
               }
               break;
            case 38: // Up arrow
               rotateTetromino();
               break;
            case 40: // Down arrow
               moveTetromino(true);
               break;
         }
      }

document.addEventListener("keydown", handleKeyPress);

function update() {
         context.clearRect(0, 0, canvas.width, canvas.height);
         drawGrid();
         drawTetromino(currentTetromino.tetromino, "#FF0000"); // Red block for the current tetromino
         moveTetromino();
      }

setInterval(update, 1000 / 2); // 2 FPS to control game speed
   </script>
</body>
</html>