AI game creator

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

No:27720

←

Prev Next

→

テトリス2
Developer User13711｜Date and time 23/12/8 15:35:02
Build time 60.16 sec｜Game capacity 5.928KB｜

Script

テトリスゲームの実装例を以下に示します。

このコードは、HTMLファイルとして実装されており、必ず1枚のファイルとなります。JavaScriptはscriptタグ内に記述されています。ゲームはスマートフォンで遊ぶことができます。絵文字は使用していませんが、後から追加することも可能です。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

テトリスゲームの実装例を以下に示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    #game-board {
      background-color: #f2f2f2;
      border: 1px solid #ccc;
      width: 300px;
      height: 600px;
      margin: 0 auto;
      position: relative;
    }
    .cell {
      width: 29px;
      height: 29px;
      border: 1px solid #ddd;
    }
    .cell.active {
      background-color: #333;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

function draw() {
        for (let row = 0; row < height; row++) {
          for (let col = 0; col < width; col++) {
            cells[row][col].classList.remove('active');
          }
        }

currentPiece.position.forEach(coord => {
          const [row, col] = coord;
          cells[row][col].classList.add('active');
        });
      }

function moveDown() {
        if (canMoveDown()) {
          currentPiece.position.forEach(coord => coord[0]++);
          draw();
        }
      }

function canMoveDown() {
        return currentPiece.position.every(coord => coord[0] + 1 < height);
      }

function isValidPosition(position) {
        return position.every(coord => {
          const [row, col] = coord;
          return row >= 0 && row < height && col >= 0 && col < width;
        });
      }

const pieces = [
        { position: [[0, 3], [0, 4], [0, 5], [0, 6]], pivot: [0, 4] },  // I
        { position: [[0, 4], [1, 4], [1, 5], [1, 6]], pivot: [1, 5] },  // T
        { position: [[0, 4], [1, 4], [1, 5], [0, 5]], pivot: [0, 4] },  // O
        { position: [[0, 5], [1, 5], [1, 4], [2, 4]], pivot: [1, 4] },  // L
        { position: [[0, 4], [1, 4], [1, 5], [2, 5]], pivot: [1, 4] },  // J
        { position: [[0, 5], [0, 6], [1, 4], [1, 5]], pivot: [1, 5] },  // S
        { position: [[0, 4], [0, 5], [1, 5], [1, 6]], pivot: [1, 5] },  // Z
      ];

let currentPiece = pieces[Math.floor(Math.random() * pieces.length)];

function moveLeft() {
        if (canMoveLeft()) {
          currentPiece.position.forEach(coord => coord[1]--);
          draw();
        }
      }

function canMoveLeft() {
        return currentPiece.position.every(coord => coord[1] > 0);
      }

function moveRight() {
        if (canMoveRight()) {
          currentPiece.position.forEach(coord => coord[1]++);
          draw();
        }
      }

function canMoveRight() {
        return currentPiece.position.every(coord => coord[1] + 1 < width);
      }

function animate() {
        moveDown();

if (canMoveDown()) {
          requestAnimationFrame(animate);
        } else {
          // Lock current piece in place
          currentPiece.position.forEach(coord => {
            const [row, col] = coord;
            cells[row][col].classList.add('locked');
          });

// Check for full rows
          for (let row = 0; row < height; row++) {
            if (cells[row].every(cell => cell.classList.contains('locked'))) {
              // Remove full row
              cells.splice(row, 1);
              const newRow = [];
              for (let col = 0; col < width; col++) {
                const newCell = document.createElement('div');
                newCell.classList.add('cell');
                board.prepend(newCell);
                newRow[col] = newCell;
              }
              cells.unshift(newRow);
            }
          }

// Generate new piece
          currentPiece = pieces[Math.floor(Math.random() * pieces.length)];

if (isValidPosition(currentPiece.position)) {
            draw();
            animate();
          } else {
            // Game over
            alert('Game Over');
          }
        }
      }

initialize();
      draw();
      animate();
    });
  </script>
</body>
</html>
```