AI game creator

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

No:16482

←

Prev Next

→

Tetris
Developer User7327｜Date and time 23/9/18 15:42:22
Build time 33.153 sec｜Game capacity 4.03KB｜

Script

Sure! Here's an example of a Tetris game implemented as a single HTML file, using JavaScript and enclosed in script tags. Please note that this is a simplified version and may require additional improvements and styling for a complete game.

This code sets up a basic Tetris game where blocks are created and move downwards. The player needs to avoid collisions with other blocks and place them strategically to clear lines and earn points. The game can be played on a smartphone by tapping the game board area to create and move the blocks. The score is displayed at the top.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    /* CSS for the game display */
    #game-board {
      width: 200px;
      height: 400px;
      border: 2px solid #000;
      background-color: #eee;
      position: relative;
      overflow: hidden;
    }
    .block {
      width: 40px;
      height: 40px;
      border: 1px solid #000;
      box-sizing: border-box;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    // JavaScript code for the Tetris game
    var gameBoard = document.getElementById('game-board');
    var score = 0;
    
    // Function to create a new block
    function createBlock() {
      var block = document.createElement('div');
      block.className = 'block';
      
      // Generate a random color for the block
      var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
      var randomColor = colors[Math.floor(Math.random() * colors.length)];
      block.style.backgroundColor = randomColor;
      
      // Randomly position the block on the game board
      var x = Math.floor(Math.random() * (gameBoard.offsetWidth - block.offsetWidth));
      block.style.top = '0px';
      block.style.left = x + 'px';
      
      gameBoard.appendChild(block);
      moveBlock(block);
    }
    
    // Function to move the block downwards
    function moveBlock(block) {
      var currentPosition = 0;
      var speed = 10; // Adjust the speed as needed
      
      var interval = setInterval(function() {
        currentPosition += speed;
        block.style.top = currentPosition + 'px';
        
        // Check if the block has reached the bottom or collided with another block
        if (currentPosition >= (gameBoard.offsetHeight - block.offsetHeight) || hasCollision(block)) {
          clearInterval(interval);
          
          // If the block reaches the bottom, remove it and create a new block
          if (currentPosition >= (gameBoard.offsetHeight - block.offsetHeight)) {
            gameBoard.removeChild(block);
            score++; // Increase the score
            document.getElementById('score').textContent = score; // Update the score display
          }
        }
      }, 1000 / 60);
    }
    
    // Function to check for collision with any other blocks
    function hasCollision(block) {
      var blocks = Array.from(document.getElementsByClassName('block'));
      
      for (var i = 0; i < blocks.length; i++) {
        if (blocks[i] !== block) {
          var rect1 = block.getBoundingClientRect();
          var rect2 = blocks[i].getBoundingClientRect();
          
          if (rect1.bottom >= rect2.top && rect1.top <= rect2.bottom && rect1.right >= rect2.left && rect1.left <= rect2.right) {
            return true;
          }
        }
      }
      
      return false;
    }
    
    // Start the game
    createBlock();
    
    // Handling touch events for mobile gameplay
    gameBoard.addEventListener('touchstart', function(event) {
      event.preventDefault();
      
      var touch = event.touches[0];
      var x = touch.clientX - gameBoard.offsetLeft;
      
      var block = document.createElement('div');
      block.className = 'block';
      block.style.backgroundColor = 'gray';
      block.style.top = '0px';
      block.style.left = x + 'px';
      gameBoard.appendChild(block);
      
      moveBlock(block);
    });
  </script>
</body>
</html>
```