AI game creator

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

No:19988

109

←

Prev Next

→

Tetris
Developer User8906｜Date and time 23/10/7 18:30:10
Build time 53.484 sec｜Game capacity 7.802KB｜

Script

Sure! Here's a simple implementation of the game Tetris in a single HTML file using JavaScript:

This implementation uses the HTML5 canvas element to visualize and display the game. Please note that this is a simplified version of Tetris and does not include features like scoring or levels. You can run the code by saving it as a ".html" file and opening it in a web browser. Have fun playing Tetris!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's a simple implementation of the game Tetris in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    canvas {
      border: 1px solid black;
      background: #f0f0f0;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="tetrisCanvas" width="240" height="400"></canvas>

const ROW = 20;
      const COLUMN = 10;
      const BLOCK_SIZE = 20;

const COLORS = ["#000000", "#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF", "#FFFFFF"];

let board = [];
      for (let row = 0; row < ROW; row++) {
        board[row] = [];
        for (let col = 0; col < COLUMN; col++) {
          board[row][col] = 0;
        }
      }

function drawSquare(x, y, color) {
        context.fillStyle = color;
        context.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
        context.strokeStyle = "#000000";
        context.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
      }

let tetrominoes = [
        [[1, 1, 1, 1]], // I
        [[1, 1], [1, 1]], // O
        [[1, 1, 1], [0, 1, 0]], // T
        [[0, 1, 1], [1, 1, 0]], // Z
        [[1, 1, 0], [0, 1, 1]], // S
        [[1, 1, 1], [1, 0, 0]], // L
        [[1, 1, 1], [0, 0, 1]] // J
      ];

function generateTetromino() {
        const randomIndex = Math.floor(Math.random() * tetrominoes.length);
        const tetromino = tetrominoes[randomIndex];
        const tetrominoColor = randomIndex + 1; // Assign random color to tetromino

return {
          shape: tetromino,
          color: tetrominoColor,
          x: Math.floor(COLUMN / 2) - Math.floor(tetromino[0].length / 2),
          y: 0
        };
      }

let currentTetromino = generateTetromino();

function moveLeft() {
        clearTetromino();
        currentTetromino.x--;
        drawTetromino();
      }

function moveRight() {
        clearTetromino();
        currentTetromino.x++;
        drawTetromino();
      }

function moveDown() {
        clearTetromino();
        currentTetromino.y++;
        drawTetromino();
      }

function rotateTetromino() {
        const previousShape = currentTetromino.shape;
        currentTetromino.shape = currentTetromino.shape[0].map((_, i) => currentTetromino.shape.map(row => row[i])).reverse();

if (!isValidMove()) {
          currentTetromino.shape = previousShape;
        }
      }

function checkFullRows() {
        let rowsToClear = [];
        for (let row = 0; row < ROW; row++) {
          if (board[row].every(block => block !== 0)) {
            rowsToClear.push(row);
          }
        }

rowsToClear.forEach(row => {
          board.splice(row, 1);
          board.unshift(Array(COLUMN).fill(0));
        });
      }

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

if (canMoveDown()) {
          moveDown();
        } else {
          mergeTetromino();
          checkFullRows();
          currentTetromino = generateTetromino();
          if (!isValidMove()) {
            // Game over
            alert("Game Over!");
            return;
          }
        }

drawBoard();
        drawTetromino();

requestAnimationFrame(update);
      }

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