AI game creator

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

No:27281

←

Prev Next

→

Tetris
Developer User13582｜Date and time 23/12/6 1:24:50
Build time 146.904 sec｜Game capacity 7.219KB｜

Script

Sure! Here's an example of a simple Tetris game implemented as a single HTML file using JavaScript:

To play the game, open the HTML file in a web browser (preferably on a smartphone for optimal experience). Use the arrow keys to control the blocks: up arrow to rotate, down arrow to move down, left arrow to move left, and right arrow to move right. The goal of the game is to fill and clear rows by arranging the falling blocks in a way that forms complete horizontal lines without any gaps. Note: This implementation is a simplified version of Tetris and might not include all the features or mechanics found in a full-fledged Tetris game.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's an example of a simple Tetris game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Tetris Game</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #fafafa;
      }

canvas {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <canvas id="tetrisCanvas" width="240" height="400"></canvas>

// Define the size of each block
      const blockSize = 20;
      const width = canvas.width / blockSize;
      const height = canvas.height / blockSize;

// Initialize the game board
      const board = [];
      for (let row = 0; row < height; row++) {
        board[row] = [];
        for (let col = 0; col < width; col++) {
          board[row][col] = null;
        }
      }

// Draw the game board
      function drawBoard() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let row = 0; row < height; row++) {
          for (let col = 0; col < width; col++) {
            if (board[row][col]) {
              ctx.fillStyle = board[row][col];
              ctx.fillRect(
                col * blockSize,
                row * blockSize,
                blockSize,
                blockSize
              );
              ctx.strokeStyle = "#fff";
              ctx.strokeRect(
                col * blockSize,
                row * blockSize,
                blockSize,
                blockSize
              );
            }
          }
        }
      }

// Add a new block to the board
      function addBlockToBoard(block) {
        block.shape.forEach((row, rowIndex) => {
          row.forEach((col, colIndex) => {
            if (block.shape[rowIndex][colIndex]) {
              board[block.y + rowIndex][block.x + colIndex] = block.color;
            }
          });
        });
      }

// Check if a block can be moved to the given position
      function canMove(block, x, y) {
        for (let row = 0; row < block.shape.length; row++) {
          for (let col = 0; col < block.shape[row].length; col++) {
            if (block.shape[row][col]) {
              const newX = block.x + col + x;
              const newY = block.y + row + y;

if (
                newX < 0 ||
                newX >= width ||
                newY >= height ||
                board[newY][newX]
              ) {
                return false;
              }
            }
          }
        }

return true;
      }

// Move the current block down
      function moveDown() {
        if (canMove(currentBlock, 0, 1)) {
          currentBlock.y++;
          drawGame();
        } else {
          addBlockToBoard(currentBlock);
          checkRows();
          generateNewBlock();
          if (!canMove(currentBlock, 0, 0)) {
            // Game over
            alert("Game Over");
            resetGame();
          }
        }
      }

// Move the current block left
      function moveLeft() {
        if (canMove(currentBlock, -1, 0)) {
          currentBlock.x--;
          drawGame();
        }
      }

// Move the current block right
      function moveRight() {
        if (canMove(currentBlock, 1, 0)) {
          currentBlock.x++;
          drawGame();
        }
      }

// Rotate the current block
      function rotateBlock() {
        const rotatedBlock = {
          x: currentBlock.x,
          y: currentBlock.y,
          shape: [],
          color: currentBlock.color,
        };

for (let row = 0; row < currentBlock.shape.length; row++) {
          rotatedBlock.shape[row] = [];
          for (let col = 0; col < currentBlock.shape[row].length; col++) {
            rotatedBlock.shape[row][col] =
              currentBlock.shape[currentBlock.shape.length - col - 1][row];
          }
        }

if (canMove(rotatedBlock, 0, 0)) {
          currentBlock = rotatedBlock;
          drawGame();
        }
      }

// Check if any rows are full and clear them
      function checkRows() {
        for (let row = height - 1; row >= 0; row--) {
          let isRowFull = true;
          for (let col = 0; col < width; col++) {
            if (!board[row][col]) {
              isRowFull = false;
              break;
            }
          }
          if (isRowFull) {
            // Clear the row and shift the upper rows down
            for (let r = row; r > 0; r--) {
              board[r] = [...board[r - 1]];
            }
            board[0] = Array(width).fill(null);
          }
        }
      }

// Generate a new random block
      function generateNewBlock() {
        const shapes = [
          [[1, 1, 1, 1]],
          [[1, 1], [1, 1]],
          [[1, 1], [0, 1], [0, 1]],
          [[1, 1], [1, 0], [1, 0]],
          [[1, 1], [1, 0], [0, 1]],
          [[1, 1], [0, 1], [1, 0]],
          [[1, 1, 1], [0, 0, 1]],
        ];

const colors = [
          "#ff0000", // red
          "#00ff00", // green
          "#0000ff", // blue
          "#ffff00", // yellow
          "#ff00ff", // magenta
          "#00ffff", // cyan
          "#ffa500", // orange
        ];

const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
        const randomColor = colors[Math.floor(Math.random() * colors.length)];

currentBlock = {
          x: Math.floor(width / 2) - Math.floor(randomShape[0].length / 2),
          y: 0,
          shape: randomShape,
          color: randomColor,
        };
      }

// Draw the current game state
      function drawGame() {
        drawBoard();
        addBlockToBoard(currentBlock);
      }

// Reset the game
      function resetGame() {
        for (let row = 0; row < height; row++) {
          for (let col = 0; col < width; col++) {
            board[row][col] = null;
          }
        }
        generateNewBlock();
        drawGame();
      }

// Initialize the game
      resetGame();

// Handle keyboard events
      document.addEventListener("keydown", (event) => {
        if (event.key === "ArrowUp") {
          rotateBlock();
        } else if (event.key === "ArrowDown") {
          moveDown();
        } else if (event.key === "ArrowLeft") {
          moveLeft();
        } else if (event.key === "ArrowRight") {
          moveRight();
        }
      });

// Start the game loop
      setInterval(moveDown, 500);
    </script>
  </body>
</html>
```

Note: This implementation is a simplified version of Tetris and might not include all the features or mechanics found in a full-fledged Tetris game.