AI game creator

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

No:20851

120

←

Prev Next

→

Tetris
Developer User9100｜Date and time 23/10/11 10:04:39
Build time 238.457 sec｜Game capacity 5.707KB｜

Script

Sure! Here is an example of a simple Tetris game implemented as a single HTML file using JavaScript and enclosed in script tags.

This implementation creates a simple Tetris game where the player can control the falling shapes using the arrow keys on their smartphone. The game is displayed on a game board with pictogram-like div elements. The game starts automatically and continues until the player reaches the top of the game board, at which point a game over message is displayed. The game also checks for and clears lines when a full row is formed.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here is an example of a simple Tetris game implemented as a single HTML file using JavaScript and enclosed in script tags.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris Game</title>
  <style>
    #game-board {
      width: 200px;
      height: 400px;
      background-color: #ccc;
      border: 1px solid #000;
      position: relative;
    }
    
    .tetromino {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    // Tetromino shapes
    const SHAPES = [
      [[1, 1, 1, 1]],
      [[1, 1], [1, 1]],
      [[1, 1, 0], [0, 1, 1]],
      [[0, 1, 1], [1, 1, 0]],
      [[1, 0, 0], [1, 1, 1]],
      [[0, 0, 1], [1, 1, 1]],
      [[1, 0], [1, 0], [1, 1]]
    ];
    
    // Game variables
    let gameBoard = [];
    let currentShape = [];
    let currentShapeIndex = 0;
    let currentRow = 0;
    let currentCol = 0;
    let gameInterval;
    
    // Function to initialize the game board
    function initGame() {
      gameBoard = Array.from({ length: 20 }, () => Array.from({ length: 10 }, () => 0));
      renderGameBoard();
    }
    
    // Function to render the game board
    function renderGameBoard() {
      const gameBoardElement = document.getElementById('game-board');
      gameBoardElement.innerHTML = '';
      
      for (let row = 0; row < 20; row++) {
        for (let col = 0; col < 10; col++) {
          if (gameBoard[row][col] === 1) {
            const tetrominoElement = document.createElement('div');
            tetrominoElement.className = 'tetromino';
            tetrominoElement.style.top = row * 20 + 'px';
            tetrominoElement.style.left = col * 20 + 'px';
            gameBoardElement.appendChild(tetrominoElement);
          }
        }
      }
    }
    
    // Function to move the current shape down
    function moveDown() {
      if (!checkCollision(1, 0, currentShape)) {
        currentRow++;
      } else {
        mergeShape();
        checkForLineClear();
        spawnShape();
        if (checkCollision(0, 0, currentShape)) {
          clearInterval(gameInterval);
          alert('Game Over!');
        }
      }
      renderGameBoard();
    }
    
    // Function to move the current shape left
    function moveLeft() {
      if (!checkCollision(0, -1, currentShape)) {
        currentCol--;
        renderGameBoard();
      }
    }
    
    // Function to move the current shape right
    function moveRight() {
      if (!checkCollision(0, 1, currentShape)) {
        currentCol++;
        renderGameBoard();
      }
    }
    
    // Function to rotate the current shape
    function rotateShape() {
      const nextShapeIndex = (currentShapeIndex + 1) % SHAPES.length;
      const nextShape = SHAPES[nextShapeIndex];
      if (!checkCollision(0, 0, nextShape)) {
        currentShapeIndex = nextShapeIndex;
        currentShape = nextShape;
        renderGameBoard();
      }
    }
    
    // Function to merge the current shape with the game board
    function mergeShape() {
      for (let row = 0; row < currentShape.length; row++) {
        for (let col = 0; col < currentShape[row].length; col++) {
          if (currentShape[row][col]) {
            gameBoard[currentRow + row][currentCol + col] = 1;
          }
        }
      }
    }
    
    // Function to check for line clear
    function checkForLineClear() {
      let numLinesCleared = 0;
      for (let row = 0; row < gameBoard.length; row++) {
        if (gameBoard[row].every(cell => cell === 1)) {
          gameBoard.splice(row, 1);
          gameBoard.unshift(Array.from({ length: 10 }, () => 0));
          numLinesCleared++;
        }
      }
      if (numLinesCleared > 0) {
        console.log('Lines cleared:', numLinesCleared);
      }
    }
    
    // Function to check for collision
    function checkCollision(deltaRow, deltaCol, shape) {
      for (let row = 0; row < shape.length; row++) {
        for (let col = 0; col < shape[row].length; col++) {
          if (shape[row][col]) {
            const newRow = currentRow + deltaRow + row;
            const newCol = currentCol + deltaCol + col;
            if (newRow < 0 || newRow >= gameBoard.length || newCol < 0 || newCol >= gameBoard[0].length || gameBoard[newRow][newCol] === 1) {
              return true;
            }
          }
        }
      }
      return false;
    }
    
    // Function to spawn a new shape
    function spawnShape() {
      currentShapeIndex = Math.floor(Math.random() * SHAPES.length);
      currentShape = SHAPES[currentShapeIndex];
      currentRow = 0;
      currentCol = Math.floor(Math.random() * (gameBoard[0].length - currentShape[0].length + 1));
    }
    
    // Event listener for key press
    document.addEventListener('keydown', function(event) {
      switch(event.key) {
        case 'ArrowUp':
          rotateShape();
          break;
        case 'ArrowLeft':
          moveLeft();
          break;
        case 'ArrowRight':
          moveRight();
          break;
        case 'ArrowDown':
          moveDown();
          break;
      }
    });
    
    // Start the game
    initGame();
    spawnShape();
    gameInterval = setInterval(moveDown, 1000);
  </script>
</body>
</html>
```