Tetris's game | AI game creator

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

No:33417

52

Tetris
Developer User15765｜Date and time 24/1/4 4:17:32
Build time 40.376 sec｜Game capacity 5.961KB｜

Sure! Here's an example of a Tetris game implemented as a single HTML file using JavaScript and enclosed in script tags:

This implementation includes basic controls for moving the tetromino left, right, and down using the left, right, and down arrow keys respectively. The up arrow key is used to rotate the tetromino. The gameplay loop updates the canvas and checks for valid moves, locking the tetromino when it reaches the bottom.

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

Sure! Here's an example of a Tetris game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    canvas {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="240" height="400"></canvas>

<script>
    document.addEventListener('DOMContentLoaded', () => {
      const canvas = document.getElementById('tetris');
      const context = canvas.getContext('2d');
      const scale = 20;
  
      // Draw a single tetromino block
      function drawBlock(x, y, color) {
        context.fillStyle = color;
        context.fillRect(x * scale, y * scale, scale, scale);
        context.strokeStyle = 'black';
        context.strokeRect(x * scale, y * scale, scale, scale);
      }
  
      // Draw the game grid
      function drawGrid() {
        for (let row = 0; row < canvas.height / scale; row++) {
          for (let col = 0; col < canvas.width / scale; col++) {
            drawBlock(col, row, 'white');
          }
        }
      }
  
      // Clear the playing area
      function clear() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }
  
      // Define the tetromino shapes
      const tetrominos = [
        [],
        [[1, 1, 1, 1]],
        [[1, 1], [1, 1]],
        [[1, 1, 1], [0, 1, 0]],
        [[1, 1, 1], [1, 0, 0]],
        [[1, 1, 1], [0, 0, 1]],
        [[1, 1, 0], [0, 1, 1]]
      ];
  
      // Generate a random tetromino
      function createRandomTetromino() {
        const randomIndex = Math.floor(Math.random() * tetrominos.length);
        const randomRotation = Math.floor(Math.random() * tetrominos[randomIndex].length);
        return tetrominos[randomIndex][randomRotation];
      }
  
      // Tetromino class
      class Tetromino {
        constructor() {
          this.x = Math.floor((canvas.width / scale) / 2) - 1;
          this.y = 0;
          this.shape = createRandomTetromino();
          this.color = '#' + ((1 << 24) * Math.random() | 0).toString(16);
        }
  
        draw() {
          this.shape.forEach((row, rowIndex) => {
            row.forEach((value, colIndex) => {
              if (value) {
                drawBlock(this.x + colIndex, this.y + rowIndex, this.color);
              }
            });
          });
        }
  
        moveDown() {
          this.y++;
        }
  
        moveLeft() {
          this.x--;
        }
  
        moveRight() {
          this.x++;
        }
  
        rotate() {
          const oldShape = this.shape;
          this.shape = this.shape[0].map((_, index) =>
            this.shape.map(row => row[index])
          );
  
          // Reverse the shape to rotate it clockwise
          this.shape.forEach(row => row.reverse());
  
          // Adjust the tetromino position if it goes out of bounds after rotation
          while (this.x + this.shape[0].length > canvas.width / scale) {
            this.x--;
          }
  
          if (!isValidMove()) {
            // Invalid move, revert the shape back to its previous state
            this.shape = oldShape;
          }
        }
      }
  
      let tetromino = new Tetromino();
  
      // Check if the current tetromino position is valid
      function isValidMove() {
        return tetromino.shape.every((row, rowIndex) =>
          row.every((value, colIndex) => {
            if (value) {
              const newX = tetromino.x + colIndex;
              const newY = tetromino.y + rowIndex;
  
              // Check if the position is outside the canvas bounds
              if (newX < 0 || newX >= canvas.width / scale || newY >= canvas.height / scale) {
                return false;
              }
  
              // Check if the position is occupied by another tetromino block
              return context.getImageData(newX * scale, newY * scale, 1, 1).data[3] === 0;
            }
            return true;
          })
        );
      }
  
      // Lock the tetromino in place
      function lockTetromino() {
        tetromino.shape.forEach((row, rowIndex) => {
          row.forEach((value, colIndex) => {
            if (value) {
              drawBlock(tetromino.x + colIndex, tetromino.y + rowIndex, tetromino.color);
            }
          });
        });
      }
  
      // Handle keyboard controls
      document.addEventListener('keydown', event => {
        if (event.keyCode === 37) {
          // Left arrow key
          tetromino.moveLeft();
          if (!isValidMove()) {
            tetromino.moveRight();
          }
        } else if (event.keyCode === 39) {
          // Right arrow key
          tetromino.moveRight();
          if (!isValidMove()) {
            tetromino.moveLeft();
          }
        } else if (event.keyCode === 40) {
          // Down arrow key
          tetromino.moveDown();
          if (!isValidMove()) {
            tetromino.moveUp();
            lockTetromino();
            tetromino = new Tetromino();
          }
        } else if (event.keyCode === 38) {
          // Up arrow key
          tetromino.rotate();
        }
      });
  
      // Game loop
      function update() {
        clear();
        tetromino.draw();
        tetromino.moveDown();
        if (!isValidMove()) {
          tetromino.moveUp();
          lockTetromino();
          tetromino = new Tetromino();
        }
      }
  
      function gameLoop() {
        update();
        requestAnimationFrame(gameLoop);
      }
  
      // Start the game loop
      gameLoop();
    });
  </script>
</body>
</html>
```

This implementation includes basic controls for moving the tetromino left, right, and down using the left, right, and down arrow keys respectively. The up arrow key is used to rotate the tetromino. The gameplay loop updates the canvas and checks for valid moves, locking the tetromino when it reaches the bottom.