AI game creator

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

No:17344

101

←

Prev Next

→

Tetris in space
Developer User7638｜Date and time 23/9/23 5:52:05
Build time 66.602 sec｜Game capacity 6.674KB｜

Script

Sure! Here's an example of a simple Tetris game implemented in a single HTML file using JavaScript. Please note that due to the complexity of Tetris, the implementation provided here is a simplified version.

This implementation creates a simple HTML page with a game board represented by a `<div>` element. Each cell of the game board is drawn using CSS and represented by a `<div>` element with the `cell` class. The game logic, including generating shapes, moving them, and checking for collisions, is implemented using JavaScript. Please note that this is just a simplified implementation to demonstrate the concept. In an actual game, you would need more advanced features, such as score tracking, level progression, and more complex shapes.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Tetris in Space</title>
    <style>
      #game-board {
        width: 200px;
        height: 400px;
        border: 1px solid black;
        margin: 0 auto;
      }
      .cell {
        width: 20px;
        height: 20px;
        background-color: #ddd;
        border: 1px solid #fff;
        box-sizing: border-box;
      }
    </style>
  </head>

<body>
    <div id="game-board"></div>
    <script>
      // Tetris 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, 1, 1], [1, 0, 0]],
      ];

// Game variables
      let gameBoard = [];
      let currentShape = null;
      let currentShapeX = 0;
      let currentShapeY = 0;
      let score = 0;
      let intervalId = null;

// Initialize the game board
      function initializeGameBoard() {
        gameBoard = Array(20)
          .fill(0)
          .map(() => Array(10).fill(0));
      }

// Generate a random shape
      function generateShape() {
        const randomShape = Math.floor(Math.random() * shapes.length);
        const shape = shapes[randomShape];
        currentShape = shape;
        currentShapeX = Math.floor((10 - shape[0].length) / 2);
        currentShapeY = -1;
      }

// Draw the game board
      function drawGameBoard() {
        const gameBoardElement = document.getElementById("game-board");
        gameBoardElement.innerHTML = "";

for (let i = 0; i < 20; i++) {
          for (let j = 0; j < 10; j++) {
            const cell = document.createElement("div");
            cell.classList.add("cell");
            if (gameBoard[i][j]) {
              cell.style.backgroundColor = "black";
            }
            gameBoardElement.appendChild(cell);
          }
        }
      }

// Draw the current shape on the game board
      function drawCurrentShape() {
        for (let i = 0; i < currentShape.length; i++) {
          for (let j = 0; j < currentShape[i].length; j++) {
            if (currentShape[i][j]) {
              const cellX = currentShapeX + j;
              const cellY = currentShapeY + i;
              if (cellY >= 0) {
                gameBoard[cellY][cellX] = 1;
              }
            }
          }
        }
      }

// Clear the current shape from the game board
      function clearCurrentShape() {
        for (let i = 0; i < currentShape.length; i++) {
          for (let j = 0; j < currentShape[i].length; j++) {
            if (currentShape[i][j]) {
              const cellX = currentShapeX + j;
              const cellY = currentShapeY + i;
              if (cellY >= 0) {
                gameBoard[cellY][cellX] = 0;
              }
            }
          }
        }
      }

// Move the current shape down
      function moveDown() {
        clearCurrentShape();
        currentShapeY++;
        if (collision()) {
          currentShapeY--;
          drawCurrentShape();
          checkLines();
          generateShape();
          if (collision()) {
            gameover();
            return;
          }
        }
        drawCurrentShape();
      }

// Move the current shape to the left
      function moveLeft() {
        clearCurrentShape();
        currentShapeX--;
        if (collision()) {
          currentShapeX++;
        }
        drawCurrentShape();
      }

// Move the current shape to the right
      function moveRight() {
        clearCurrentShape();
        currentShapeX++;
        if (collision()) {
          currentShapeX--;
        }
        drawCurrentShape();
      }

// Rotate the current shape
      function rotate() {
        clearCurrentShape();
        const rotatedShape = [];
        for (let i = 0; i < currentShape[0].length; i++) {
          const row = [];
          for (let j = currentShape.length - 1; j >= 0; j--) {
            row.push(currentShape[j][i]);
          }
          rotatedShape.push(row);
        }
        currentShape = rotatedShape;
        if (collision()) {
          rotate();
        }
        drawCurrentShape();
      }

// Check if collision occurred
      function collision() {
        for (let i = 0; i < currentShape.length; i++) {
          for (let j = 0; j < currentShape[i].length; j++) {
            if (
              currentShape[i][j] &&
              (currentShapeY + i >= 20 ||
                currentShapeX + j < 0 ||
                currentShapeX + j >= 10 ||
                gameBoard[currentShapeY + i][currentShapeX + j])
            ) {
              return true;
            }
          }
        }
        return false;
      }

// Check if any lines are completed
      function checkLines() {
        let completedLines = 0;
        for (let i = 0; i < gameBoard.length; i++) {
          if (gameBoard[i].every((cell) => cell === 1)) {
            gameBoard.splice(i, 1);
            gameBoard.unshift(Array(10).fill(0));
            completedLines++;
          }
        }
        score += completedLines * 100;
      }

// Game over
      function gameover() {
        clearInterval(intervalId);
        alert("Game Over!");
      }

// Handle keyboard input
      function handleKeyPress(event) {
        if (event.keyCode === 37) {
          moveLeft();
        } else if (event.keyCode === 39) {
          moveRight();
        } else if (event.keyCode === 40) {
          moveDown();
        } else if (event.keyCode === 38) {
          rotate();
        }
      }

// Start the game
      function startGame() {
        initializeGameBoard();
        generateShape();
        drawGameBoard();
        intervalId = setInterval(moveDown, 500);

window.addEventListener("keydown", handleKeyPress);
      }

startGame();
    </script>
  </body>
</html>
```

Please note that this is just a simplified implementation to demonstrate the concept. In an actual game, you would need more advanced features, such as score tracking, level progression, and more complex shapes.