AI game creator

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

No:11012

←

Prev Next

→

Tetris
Developer User4755｜Date and time 23/8/6 15:46:50
Build time 73.773 sec｜Game capacity 8.15KB｜

Script

Sure! Here's a simple implementation of Tetris as a single HTML file using JavaScript. Note that this is a basic version with minimal features, but it should give you a good starting point:

To play the game, open this HTML file on a smartphone browser and you should be able to control the game using the arrow keys. The goal is to score points by filling complete rows with tetromino pieces. Have fun and enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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. Note that this is a basic version with minimal features, but it should give you a good starting point:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    #game-board {
      position: relative;
      width: 200px;
      height: 400px;
      border: 1px solid #000;
      margin: 0 auto;
    }
    
    .cell {
      width: 20px;
      height: 20px;
      position: absolute;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    // Tetris game logic
    var gameBoard = document.getElementById('game-board');
    var width = 10;
    var height = 20;
    var score = 0;
  
    // Create the game board
    var cells = [];
  
    for (var y = 0; y < height; y++) {
      for (var x = 0; x < width; x++) {
        var cell = document.createElement('div');
        cell.className = 'cell';
        cell.style.top = y * 20 + 'px';
        cell.style.left = x * 20 + 'px';
        gameBoard.appendChild(cell);
  
        cells.push(cell);
      }
    }
  
    // Initialize a random tetromino
    var 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]
      ]
    ];
  
    var currentTetromino;
    var currentX;
    var currentY;
  
    function generateTetromino() {
      var randomIndex = Math.floor(Math.random() * tetrominos.length);
      currentTetromino = tetrominos[randomIndex];
      currentX = Math.floor((width - currentTetromino[0].length) / 2);
      currentY = 0;
      drawTetromino();
    }
  
    function drawTetromino() {
      for (var y = 0; y < currentTetromino.length; y++) {
        for (var x = 0; x < currentTetromino[y].length; x++) {
          if (currentTetromino[y][x]) {
            var cellIndex = (currentY + y) * width + (currentX + x);
            cells[cellIndex].style.backgroundColor = '#000';
          }
        }
      }
    }
  
    function undrawTetromino() {
      for (var y = 0; y < currentTetromino.length; y++) {
        for (var x = 0; x < currentTetromino[y].length; x++) {
          if (currentTetromino[y][x]) {
            var cellIndex = (currentY + y) * width + (currentX + x);
            cells[cellIndex].style.backgroundColor = '';
          }
        }
      }
    }
  
    function moveDown() {
      undrawTetromino();
      currentY++;
      drawTetromino();
    }
  
    function canMoveDown() {
      for (var y = 0; y < currentTetromino.length; y++) {
        for (var x = 0; x < currentTetromino[y].length; x++) {
          if (currentTetromino[y][x]) {
            var nextY = currentY + y + 1;
            if (nextY >= height || cells[(nextY * width) + (currentX + x)].style.backgroundColor !== '') {
              return false;
            }
          }
        }
      }
  
      return true;
    }
  
    function moveLeft() {
      undrawTetromino();
      currentX--;
      drawTetromino();
    }
  
    function canMoveLeft() {
      for (var y = 0; y < currentTetromino.length; y++) {
        for (var x = 0; x < currentTetromino[y].length; x++) {
          if (currentTetromino[y][x]) {
            var nextX = currentX + x - 1;
            if (nextX < 0 || cells[(currentY + y) * width + nextX].style.backgroundColor !== '') {
              return false;
            }
          }
        }
      }
  
      return true;
    }
  
    function moveRight() {
      undrawTetromino();
      currentX++;
      drawTetromino();
    }
  
    function canMoveRight() {
      for (var y = 0; y < currentTetromino.length; y++) {
        for (var x = 0; x < currentTetromino[y].length; x++) {
          if (currentTetromino[y][x]) {
            var nextX = currentX + x + 1;
            if (nextX >= width || cells[(currentY + y) * width + nextX].style.backgroundColor !== '') {
              return false;
            }
          }
        }
      }
  
      return true;
    }
  
    function rotateTetromino() {
      undrawTetromino();
      var rotatedTetromino = [];
  
      for (var y = 0; y < currentTetromino[0].length; y++) {
        rotatedTetromino[y] = [];
        for (var x = 0; x < currentTetromino.length; x++) {
          rotatedTetromino[y][x] = currentTetromino[currentTetromino.length - 1 - x][y];
        }
      }
  
      currentTetromino = rotatedTetromino;
      drawTetromino();
    }
  
    function canRotate() {
      var rotatedTetromino = [];
  
      for (var y = 0; y < currentTetromino[0].length; y++) {
        rotatedTetromino[y] = [];
        for (var x = 0; x < currentTetromino.length; x++) {
          rotatedTetromino[y][x] = currentTetromino[currentTetromino.length - 1 - x][y];
        }
      }
  
      for (var y = 0; y < rotatedTetromino.length; y++) {
        for (var x = 0; x < rotatedTetromino[y].length; x++) {
          if (rotatedTetromino[y][x]) {
            var nextX = currentX + x;
            var nextY = currentY + y;
            if (nextX < 0 || nextX >= width || nextY >= height || cells[nextY * width + nextX].style.backgroundColor !== '') {
              return false;
            }
          }
        }
      }
  
      return true;
    }
  
    function mergeTetromino() {
      for (var y = 0; y < currentTetromino.length; y++) {
        for (var x = 0; x < currentTetromino[y].length; x++) {
          if (currentTetromino[y][x]) {
            var cellIndex = (currentY + y) * width + (currentX + x);
            cells[cellIndex].style.backgroundColor = '#000';
            cells[cellIndex].dataset.filled = 'true';
          }
        }
      }
    }
  
    function checkRows() {
      for (var y = height - 1; y >= 0; y--) {
        var filledCells = Array.from(cells).filter(function (cell) {
          return cell.style.backgroundColor !== '' && parseInt(cell.style.top) === y * 20 && cell.dataset.filled === 'true';
        });
  
        if (filledCells.length === width) {
          filledCells.forEach(function (cell) {
            cell.style.backgroundColor = '';
            delete cell.dataset.filled;
          });
  
          cells = cells.filter(function (cell) {
            return cell.style.backgroundColor !== '' || parseInt(cell.style.top) < y * 20;
          });
  
          cells.forEach(function (cell) {
            if (parseInt(cell.style.top) < y * 20) {
              cell.style.top = parseInt(cell.style.top) + 20 + 'px';
            }
          });
  
          score += 10;
          document.getElementById('score').innerHTML = 'Score: ' + score;
        }
      }
    }
  
    // Game loop
    var gameLoop;
  
    function startGame() {
      score = 0;
      document.getElementById('score').innerHTML = 'Score: ' + score;
      cells.forEach(function (cell) {
        cell.style.backgroundColor = '';
        delete cell.dataset.filled;
      });
  
      clearInterval(gameLoop);
      generateTetromino();
      gameLoop = setInterval(function () {
        if (canMoveDown()) {
          moveDown();
        } else {
          mergeTetromino();
          checkRows();
          generateTetromino();
        }
      }, 500);
    }
  
    // Controls
    document.addEventListener('keydown', function (event) {
      if (event.keyCode === 37 && canMoveLeft()) { // Left arrow key
        moveLeft();
      } else if (event.keyCode === 39 && canMoveRight()) { // Right arrow key
        moveRight();
      } else if (event.keyCode === 40 && canMoveDown()) { // Down arrow key
        moveDown();
      } else if (event.keyCode === 38 && canRotate()) { // Up arrow key
        rotateTetromino();
      }
    });
  </script>
</html>
```