AI game creator

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

No:9299

←

Prev Next

→

Tetris
Developer User4325｜Date and time 23/7/23 5:20:42
Build time 47.152 sec｜Game capacity 5.848KB｜

Script

Sure, here's a simplified version of Tetris implemented as a single HTML file using JavaScript:

This HTML file creates a canvas element and uses JavaScript to handle the game logic of Tetris. You can control the game using the arrow keys on your smartphone's keyboard. The gameplay involves moving and rotating tetrominoes (the falling blocks) to form complete horizontal lines, which then disappear. The game ends when the stack of tetrominoes reaches the top of the grid. Feel free to customize and enhance this code further to add more features, styling, or improvements to the game mechanics.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simplified version of Tetris implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>

<head>
  <title>Tetris</title>
  <style>
    canvas {
      background: #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

// Set up tetris grid
      const grid = Array.from({ length: 20 }, () => Array(10).fill(0));

// Tetromino shapes
      const tetrominos = [
        [[1, 1, 1, 1]],
        [[1, 1], [1, 1]],
        [[1, 1, 0], [0, 1, 1]],
        [[0, 1, 1], [1, 1, 0]],
        [[1, 1, 1], [0, 1, 0]],
        [[1, 1, 1], [1, 0, 0]],
        [[1, 1, 1], [0, 0, 1]],
      ];

// Set up initial game state
      let currentTetromino = getRandomTetromino();
      let currentPosition = { x: 3, y: 0 };

// Game loop
      function gameLoop() {
        clearCanvas();
        drawTetromino();
        drawGrid();
        requestAnimationFrame(gameLoop);
      }

function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }

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

function moveDown() {
        currentPosition.y++;

if (collisionOccurred()) {
          currentPosition.y--;
          mergeTetrominoToGrid();
          clearRows();
          currentTetromino = getRandomTetromino();
          currentPosition = { x: 3, y: 0 };

if (collisionOccurred()) {
            // Game over condition
            alert("Game Over");
            resetGame();
          }
        }
      }

function moveLeft() {
        currentPosition.x--;

if (collisionOccurred()) {
          currentPosition.x++;
        }
      }

function moveRight() {
        currentPosition.x++;

if (collisionOccurred()) {
          currentPosition.x--;
        }
      }

function rotateTetromino() {
        const previousTetromino = currentTetromino;
        currentTetromino = rotateMatrix(currentTetromino);

if (collisionOccurred()) {
          currentTetromino = previousTetromino;
        }
      }

function rotateMatrix(matrix) {
        const rows = matrix.length;
        const columns = matrix[0].length;
        const rotatedMatrix = [];

for (let i = 0; i < columns; i++) {
          rotatedMatrix.push(Array(rows).fill(0));
        }

for (let i = 0; i < rows; i++) {
          for (let j = 0; j < columns; j++) {
            rotatedMatrix[j][rows - 1 - i] = matrix[i][j];
          }
        }

return rotatedMatrix;
      }

function collisionOccurred() {
        const tetrominoRows = currentTetromino.length;
        const tetrominoColumns = currentTetromino[0].length;

for (let y = 0; y < tetrominoRows; y++) {
          for (let x = 0; x < tetrominoColumns; x++) {
            if (
              currentTetromino[y][x] &&
              (grid[currentPosition.y + y] &&
                grid[currentPosition.y + y][currentPosition.x + x]) !== 0
            ) {
              return true;
            }
          }
        }

return false;
      }

function resetGame() {
        grid.forEach((row) => {
          row.fill(0);
        });

currentTetromino = getRandomTetromino();
        currentPosition = { x: 3, y: 0 };
      }

function handleKeyPress(event) {
        switch (event.key) {
          case "ArrowUp":
            rotateTetromino();
            break;
          case "ArrowDown":
            moveDown();
            break;
          case "ArrowLeft":
            moveLeft();
            break;
          case "ArrowRight":
            moveRight();
            break;
        }
      }

document.addEventListener("keydown", handleKeyPress);
      gameLoop();
    });
  </script>
</body>

</html>
```

Feel free to customize and enhance this code further to add more features, styling, or improvements to the game mechanics.