AI game creator

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

No:19938

←

Prev Next

→

Make Tetris
Developer User8878｜Date and time 23/10/7 12:56:35
Build time 50.69 sec｜Game capacity 8.175KB｜

Script

Sure, here's an example of a simple Tetris game implemented as a single HTML file using JavaScript. It is designed to be playable on a smartphone and uses pictograms to represent the game elements.

To play the game, you can save the above code in an HTML file, open it in a web browser on your smartphone, and interact with the game board using touch gestures or arrow keys. The objective of the game is to clear as many rows as possible by filling them up with shapes. When a row is filled, it gets cleared and you earn points. The game ends when the shapes stack up and reach the top of the game board. Note: This implementation is a simplified version of Tetris and may lack some features compared to a fully-featured 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. It is designed to be playable on a smartphone and uses pictograms to represent the game elements.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game-board {
      display: flex;
      flex-wrap: wrap;
      width: 80vmin;
      height: 80vmin;
      border: 2px solid black;
      margin: auto;
      margin-top: 10vh;
    }

.cell {
      width: 20%;
      height: 20%;
      border: 1px solid black;
      background-color: white;
    }

.cell.wall {
      background-color: gray;
    }

.cell.active {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

const shapes = [
      [[0, 1, 1, 1], [0, 0, 0, 0]], // Shape I
      [[1, 1, 1, 0], [0, 0, 1, 0]], // Shape T
      [[1, 1, 0, 0], [0, 1, 1, 0]], // Shape S
      [[0, 1, 1, 0], [1, 1, 0, 0]], // Shape Z
      [[1, 1, 1, 1], [0, 0, 0, 0]], // Shape O
      [[1, 1, 1, 0], [1, 0, 0, 0]], // Shape L
      [[1, 1, 1, 0], [0, 0, 1, 0]], // Shape J
    ];

const colors = ['red', 'purple', 'green', 'yellow', 'orange', 'cyan', 'blue'];

const gameBoard = document.getElementById('game-board');
    const cells = [];

// Create the game board cells
    for (let row = 0; row < HEIGHT; row++) {
      for (let col = 0; col < WIDTH; col++) {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        cells.push(cell);
        gameBoard.appendChild(cell);
      }
    }

let activeShape = generateRandomShape();
    let activeRow = 0;
    let activeCol = 3;
    let timerID = null;

drawGame();

// Event listeners for touch controls
    gameBoard.addEventListener('touchstart', handleTouchStart, false);
    gameBoard.addEventListener('touchmove', handleTouchMove, false);
    gameBoard.addEventListener('touchend', handleTouchEnd, false);

// Handle touch start position
    let touchStartX = 0;

function handleTouchStart(event) {
      if (timerID === null) {
        touchStartX = event.touches[0].clientX;
      }
    }

function handleTouchMove(event) {
      if (timerID === null) return;
      event.preventDefault();
    }

function handleTouchEnd(event) {
      if (timerID === null) {
        const touchEndX = event.changedTouches[0].clientX;
        const deltaX = touchEndX - touchStartX;

if (deltaX > 50) moveShape(0, 1); // Swipe right
        else if (deltaX < -50) moveShape(0, -1); // Swipe left
        else rotateShape(); // Tap
      }
    }

// Start the game and handle key press event
    window.addEventListener('keydown', function (event) {
      if (timerID === null) startGame();
      else {
        if (event.key === 'ArrowUp') rotateShape();
        else if (event.key === 'ArrowDown') moveShape(1, 0);
        else if (event.key === 'ArrowLeft') moveShape(0, -1);
        else if (event.key === 'ArrowRight') moveShape(0, 1);
      }
    });

function startGame() {
      timerID = setInterval(moveShape, 1000);
    }

function stopGame() {
      clearInterval(timerID);
      timerID = null;
    }

function generateRandomShape() {
      const index = Math.floor(Math.random() * shapes.length);
      return shapes[index];
    }

function drawGame() {
      // Reset game board
      cells.forEach(cell => cell.classList.remove('wall', 'active'));

// Draw active shape
      activeShape.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
          if (cell === 1) {
            const index = (activeRow + rowIndex) * WIDTH + (activeCol + colIndex);
            cells[index].classList.add('active');
          }
        });
      });
    }

// Update position
      activeRow += rowOffset;
      activeCol += colOffset;

// Check for collisions with walls or other shapes
      let collided = false;
      activeShape.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
          if (cell === 1) {
            const newRow = activeRow + rowIndex;
            const newCol = activeCol + colIndex;

if (newRow >= HEIGHT || newCol < 0 || newCol >= WIDTH) {
              collided = true;
              return;
            }

const index = newRow * WIDTH + newCol;
            if (cells[index].classList.contains('wall')) {
              collided = true;
              return;
            }
          }
        });
      });

// If collision occurred, place shape on the game board as wall and generate a new shape
      if (collided) {
        activeRow -= rowOffset;
        activeCol -= colOffset;

activeShape.forEach((row, rowIndex) => {
          row.forEach((cell, colIndex) => {
            if (cell === 1) {
              const index = (activeRow + rowIndex) * WIDTH + (activeCol + colIndex);
              cells[index].classList.add('wall');
              cells[index].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            }
          });
        });

activeShape = generateRandomShape();
        activeRow = 0;
        activeCol = 3;

// Check for game over
        let gameOver = false;
        shapes[0][0].forEach((cell, colIndex) => {
          if (cell === 1) {
            if (cells[colIndex].classList.contains('wall')) {
              gameOver = true;
              return;
            }
          }
        });

if (gameOver) {
          stopGame();
          alert('Game Over!');
        }
      }

drawGame();
    }

function rotateShape() {
      const rotatedShape = activeShape[0].map((_, index) => activeShape.map(row => row[index]).reverse());
      const rotatedRowOffset = Math.floor((activeShape[0].length - rotatedShape.length) / 2);

// Remove active shape from game board
      activeShape.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
          if (cell === 1) {
            const index = (activeRow + rowIndex) * WIDTH + (activeCol + colIndex);
            cells[index].classList.remove('active');
          }
        });
      });

// Update shape
      activeShape = rotatedShape;
      activeRow += rotatedRowOffset;

if (newRow >= HEIGHT || newCol < 0 || newCol >= WIDTH) {
              collided = true;
              return;
            }

const index = newRow * WIDTH + newCol;
            if (cells[index].classList.contains('wall')) {
              collided = true;
              return;
            }
          }
        });
      });

// If collision occurred, revert the rotation
      if (collided) {
        activeShape = activeShape[0].map((_, index) => activeShape.map(row => row[index]).reverse());
        activeRow -= rotatedRowOffset;
      }

drawGame();
    }
  </script>
</body>
</html>
```

Note: This implementation is a simplified version of Tetris and may lack some features compared to a fully-featured Tetris game.