AI game creator

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

No:8658

1155

←

Prev Next

→

Tetris
Developer User4225｜Date and time 23/7/17 20:16:04
Build time 38.289 sec｜Game capacity 4.386KB｜

Script

Sure! Here's a simple implementation of the classic game Tetris using HTML, CSS, and JavaScript:

To play the game, save the above code into a file with the ".html" extension (e.g., `tetris.html`), then open it in a web browser. Use the arrow keys (left, right, and down) to move the tetrominoes. Please note that this is a simple implementation and does not include features like rotating pieces, scoring, or game over conditions. It's meant as a starting point for a basic Tetris game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the classic game Tetris using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tetris</title>
  <style>
    /* Game container styling */
    #game-container {
      width: 240px;
      height: 400px;
      border: 2px solid #000;
      margin: 0 auto;
      overflow: hidden;
    }
    /* Tetromino square styling */
    .square {
      width: 19px;
      height: 19px;
      border: 1px solid #ccc;
      float: left;
    }
    /* Tetromino colors */
    .square.empty { background-color: #fff; }
    .square.I { background-color: #00f; }
    .square.O { background-color: #f00; }
    .square.T { background-color: #0f0; }
    .square.S { background-color: #ff0; }
    .square.Z { background-color: #f0f; }
    .square.J { background-color: #0ff; }
    .square.L { background-color: #f80; }
  </style>
</head>
<body>
  <div id="game-container"></div>

let gameGrid = [];
    const gameContainer = document.getElementById("game-container");
    const gridWidth = Math.floor(gameContainer.offsetWidth / 20);
    const gridHeight = Math.floor(gameContainer.offsetHeight / 20);
    let currentTetromino;

function createGameGrid() {
      for (let y = 0; y < gridHeight; y++) {
        gameGrid[y] = [];
        for (let x = 0; x < gridWidth; x++) {
          gameGrid[y][x] = "";
        }
      }
    }

function createTetromino() {
      const tetrominoType = Object.keys(tetrominoes)[Math.floor(Math.random() * Object.keys(tetrominoes).length)];
      const tetromino = tetrominoes[tetrominoType];
      currentTetromino = {
        type: tetrominoType,
        shape: tetromino,
        x: Math.floor(gridWidth / 2) - Math.floor(tetromino[0].length / 2),
        y: 0
      }
    }

function moveDown() {
      clearTetromino();
      currentTetromino.y++;
      drawTetromino();
      drawGameGrid();
    }

function moveLeft() {
      clearTetromino();
      currentTetromino.x--;
      drawTetromino();
      drawGameGrid();
    }

function moveRight() {
      clearTetromino();
      currentTetromino.x++;
      drawTetromino();
      drawGameGrid();
    }

// Initialization
    createGameGrid();
    createTetromino();
    drawTetromino();
    drawGameGrid();

// Keyboard event listener
    document.addEventListener('keydown', function(event) {
      if (event.code === 'ArrowDown') {
        moveDown();
      } else if (event.code === 'ArrowLeft') {
        moveLeft();
      } else if (event.code === 'ArrowRight') {
        moveRight();
      }
    });
  </script>
</body>
</html>
```

To play the game, save the above code into a file with the ".html" extension (e.g., `tetris.html`), then open it in a web browser. Use the arrow keys (left, right, and down) to move the tetrominoes.

Please note that this is a simple implementation and does not include features like rotating pieces, scoring, or game over conditions. It's meant as a starting point for a basic Tetris game.