AI game creator

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

No:16646

←

Prev Next

→

Tetris
Developer User7399｜Date and time 23/9/19 20:54:13
Build time 66.137 sec｜Game capacity 5.652KB｜

Script

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

This implementation creates a simple game board using a `<div>` element and represents blocks as colored squares using CSS. The game logic is written in JavaScript enclosed in `
` tags. The script handles user input, moves the blocks, checks for completed rows, and updates the game board accordingly. You can play the game by opening the HTML file in a web browser on your smartphone. You can use arrow keys (or swipe gestures if you are running it on your smartphone) to move and rotate the blocks. The game will continuously spawn and move down blocks, and you need to clear as many rows as possible by forming complete horizontal lines. Note: This implementation is a basic version of Tetris, and you can extend it further by adding features like scoring, levels, and more complex block shapes.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    #game-board {
      width: 300px;
      height: 600px;
      border: 1px solid black;
    }
    
    .block {
      width: 29px;
      height: 29px;
      border: 1px solid gray;
      box-sizing: border-box;
    }
    
    .filled {
      background-color: #ff0000;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Game variables
    let board = [];
    let currentBlock = {
      shape: [[1, 1], [1, 1]],
      x: 4,
      y: 0
    };

// Initialize the game board
    function initializeBoard() {
      for (let row = 0; row < BOARD_HEIGHT; row++) {
        board[row] = [];
        for (let col = 0; col < BOARD_WIDTH; col++) {
          board[row][col] = 0;
        }
      }
    }

// Render the game board
    function renderBoard() {
      const gameBoard = document.getElementById("game-board");
      gameBoard.innerHTML = "";

for (let row = 0; row < BOARD_HEIGHT; row++) {
        for (let col = 0; col < BOARD_WIDTH; col++) {
          const block = document.createElement("div");
          block.classList.add("block");
          if (board[row][col]) {
            block.classList.add("filled");
          }
          gameBoard.appendChild(block);
        }
      }
    }

// Move the current block down
    function moveDown() {
      if (isValidMove(currentBlock.shape, currentBlock.x, currentBlock.y + 1)) {
        currentBlock.y++;
      } else {
        placeBlock();
        checkRows();
        spawnNextBlock();
      }
    }

// Move the current block left
    function moveLeft() {
      if (isValidMove(currentBlock.shape, currentBlock.x - 1, currentBlock.y)) {
        currentBlock.x--;
      }
    }

// Move the current block right
    function moveRight() {
      if (isValidMove(currentBlock.shape, currentBlock.x + 1, currentBlock.y)) {
        currentBlock.x++;
      }
    }

// Rotate the current block
    function rotate() {
      const rotatedShape = currentBlock.shape[0].map((_, i) => currentBlock.shape.map(row => row[i])).reverse();

if (isValidMove(rotatedShape, currentBlock.x, currentBlock.y)) {
        currentBlock.shape = rotatedShape;
      }
    }

// Check if a block position is valid
    function isValidMove(shape, x, y) {
      for (let row = 0; row < shape.length; row++) {
        for (let col = 0; col < shape[row].length; col++) {
          if (shape[row][col]) {
            if (x + col < 0 || x + col >= BOARD_WIDTH || y + row >= BOARD_HEIGHT || board[y + row][x + col]) {
              return false;
            }
          }
        }
      }
      return true;
    }

// Place the current block on the game board
    function placeBlock() {
      for (let row = 0; row < currentBlock.shape.length; row++) {
        for (let col = 0; col < currentBlock.shape[row].length; col++) {
          if (currentBlock.shape[row][col]) {
            board[currentBlock.y + row][currentBlock.x + col] = 1;
          }
        }
      }
    }

// Check if any rows are complete and clear them
    function checkRows() {
      for (let row = BOARD_HEIGHT - 1; row >= 0; row--) {
        if (board[row].every(cell => cell === 1)) {
          board.splice(row, 1);
          board.unshift(new Array(BOARD_WIDTH).fill(0));
        }
      }
    }

// Spawn the next block
    function spawnNextBlock() {
      currentBlock.shape = getRandomShape();
      currentBlock.x = Math.floor((BOARD_WIDTH - currentBlock.shape[0].length) / 2);
      currentBlock.y = 0;
    }

// Get a random block shape
    function getRandomShape() {
      const shapes = [
        [[1, 1], [1, 1]], // Square
        [[1, 1, 1, 1]], // Line
        [[1, 1, 1], [0, 1, 0]], // T
        [[1, 1, 0], [0, 1, 1]], // S
        [[0, 1, 1], [1, 1, 0]], // Z
        [[1, 1, 1], [0, 0, 1]] // L
      ];

return shapes[Math.floor(Math.random() * shapes.length)];
    }

// Game loop
    function gameLoop() {
      moveDown();
      renderBoard();
    }

// Start the game
    function startGame() {
      initializeBoard();
      spawnNextBlock();
      setInterval(gameLoop, 500); // Adjust the interval to control the game speed
    }

// Handle user input
    document.addEventListener("keydown", function(event) {
      if (event.key === "ArrowLeft") {
        moveLeft();
      } else if (event.key === "ArrowRight") {
        moveRight();
      } else if (event.key === "ArrowDown") {
        moveDown();
      } else if (event.key === "ArrowUp") {
        rotate();
      }
      renderBoard();
    });

// Start the game
    startGame();
  </script>
</body>
</html>
```

This implementation creates a simple game board using a `<div>` element and represents blocks as colored squares using CSS. The game logic is written in JavaScript enclosed in `<script>` tags. The script handles user input, moves the blocks, checks for completed rows, and updates the game board accordingly.

You can play the game by opening the HTML file in a web browser on your smartphone. You can use arrow keys (or swipe gestures if you are running it on your smartphone) to move and rotate the blocks. The game will continuously spawn and move down blocks, and you need to clear as many rows as possible by forming complete horizontal lines.

Note: This implementation is a basic version of Tetris, and you can extend it further by adding features like scoring, levels, and more complex block shapes.