とてつもなく高いテトリス's game | AI game creator

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

No:39648

28

とてつもなく高いテトリス
Developer User17762｜Date and time 24/1/29 18:25:12
Build time 51.013 sec｜Game capacity 8.17KB｜

了解です。以下にテトリスのゲームを実装したコードを示します。

上記のコードでは、HTMLファイル内にテトリスのゲーム画面を表示し、JavaScriptを用いてゲームのロジックを実装しています。ゲーム画面は`<div id="game-board"></div>`で定義されており、テトリミノが表示される10×20のグリッドが描画されます。 JavaScriptのコードは`
`タグ内に記述されており、ゲームの各種操作や描画処理、テトリミノの衝突判定、行の削除などが実装されています。また、キーボード操作によるテトリミノの移動や回転もサポートされています。ゲームはページの読み込みが完了すると自動的に開始され、テトリミノは一定の速度で自動的に下に移動します。テトリミノが下まで到達した場合はその位置で固定され、行が揃った場合はその行が削除されます。テトリミノが画面上部まで到達するとゲームオーバーとなり、ページがリロードされます。スマホで操作する場合は、スマホのブラウザで上記のHTMLファイルを開いて操作することができます。

→ 　

0　

0　

　

　
　
　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

了解です。以下にテトリスのゲームを実装したコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tetris</title>
  <style>
    #game-board {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(20, 1fr);
      width: 300px;
      height: 600px;
      border: 1px solid black;
    }

.cell {
      border: 1px solid #ccc;
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
      const board = document.getElementById('game-board');
      const cols = 10;
      const rows = 20;
      const cells = [];

for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
          let cell = document.createElement('div');
          cell.classList.add('cell');
          cells.push(cell);
          board.appendChild(cell);
        }
      }

const tetrominoes = [
        [[1, 1, 1, 1]],
        [[1, 1], [1, 1]],
        [[0, 1, 0], [1, 1, 1]],
        [[0, 1, 1], [1, 1, 0]],
        [[1, 1, 0], [0, 1, 1]],
        [[1, 1, 1], [0, 1, 0]],
        [[1, 1, 1], [1, 0, 0]],
      ];

let currentTetromino;
      let currentTetrominoIndex;
      let currentRotation;
      let currentX;
      let currentY;

function generateTetromino() {
        const index = Math.floor(Math.random() * tetrominoes.length);
        const tetromino = tetrominoes[index];
        const rotationIndex = Math.floor(Math.random() * tetromino.length);
        return {
          shape: tetromino,
          rotation: rotationIndex,
          x: Math.floor(cols / 2) - 1,
          y: 0
        };
      }

function drawTetromino() {
        for (let row = 0; row < currentTetromino.shape[currentRotation].length; row++) {
          for (let col = 0; col < currentTetromino.shape[currentRotation][row].length; col++) {
            if (currentTetromino.shape[currentRotation][row][col]) {
              const x = currentX + col;
              const y = currentY + row;
              const index = x + y * cols;
              cells[index].style.backgroundColor = 'red';
            }
          }
        }
      }

function undrawTetromino() {
        for (let row = 0; row < currentTetromino.shape[currentRotation].length; row++) {
          for (let col = 0; col < currentTetromino.shape[currentRotation][row].length; col++) {
            if (currentTetromino.shape[currentRotation][row][col]) {
              const x = currentX + col;
              const y = currentY + row;
              const index = x + y * cols;
              cells[index].style.backgroundColor = '';
            }
          }
        }
      }

function moveTetromino(dir) {
        undrawTetromino();

if (dir === 'down') {
          currentY++;
        } else if (dir === 'left') {
          currentX--;
        } else if (dir === 'right') {
          currentX++;
        }

drawTetromino();
      }

function rotateTetromino() {
        undrawTetromino();
        currentRotation = (currentRotation + 1) % currentTetromino.shape.length;
        drawTetromino();
      }

function canMoveTetromino(dir) {
        let newX = currentX;
        let newY = currentY;

if (dir === 'down') {
          newY++;
        } else if (dir === 'left') {
          newX--;
        } else if (dir === 'right') {
          newX++;
        }

for (let row = 0; row < currentTetromino.shape[currentRotation].length; row++) {
          for (let col = 0; col < currentTetromino.shape[currentRotation][row].length; col++) {
            if (currentTetromino.shape[currentRotation][row][col]) {
              const x = newX + col;
              const y = newY + row;

if (x < 0 || x >= cols || y >= rows || (y > 0 && cells[x + y * cols].style.backgroundColor !== '')) {
                return false;
              }
            }
          }
        }

return true;
      }

function dropTetromino() {
        while (canMoveTetromino('down')) {
          moveTetromino('down');
        }
        
        lockTetromino();
        checkLines();
        spawnTetromino();
      }

function lockTetromino() {
        for (let row = 0; row < currentTetromino.shape[currentRotation].length; row++) {
          for (let col = 0; col < currentTetromino.shape[currentRotation][row].length; col++) {
            if (currentTetromino.shape[currentRotation][row][col]) {
              const x = currentX + col;
              const y = currentY + row;
              const index = x + y * cols;
              cells[index].style.backgroundColor = 'gray';
            }
          }
        }
      }

function checkLines() {
        for (let row = rows - 1; row >= 0; row--) {
          let lineFilled = true;

for (let col = 0; col < cols; col++) {
            if (cells[col + row * cols].style.backgroundColor === '') {
              lineFilled = false;
              break;
            }
          }

if (lineFilled) {
            removeLine(row);
            row++;
          }
        }
      }

function removeLine(line) {
        for (let row = line; row >= 0; row--) {
          for (let col = 0; col < cols; col++) {
            if (row === 0) {
              cells[col + row * cols].style.backgroundColor = '';
            } else {
              cells[col + row * cols].style.backgroundColor = cells[col + (row - 1) * cols].style.backgroundColor;
            }
          }
        }
      }

function spawnTetromino() {
        currentTetromino = generateTetromino();
        currentTetrominoIndex = Math.floor(Math.random() * tetrominoes.length);
        currentRotation = Math.floor(Math.random() * currentTetromino.shape.length);
        currentX = currentTetromino.x;
        currentY = currentTetromino.y;

if (canMoveTetromino('down')) {
          drawTetromino();
        } else {
          // Game Over
          alert('Game Over');
          location.reload();
        }
      }

function handleKeyPress(event) {
        if (event.key === 'ArrowUp' || event.key === 'w') {
          rotateTetromino();
        } else if (event.key === 'ArrowLeft' || event.key === 'a') {
          moveTetromino('left');
        } else if (event.key === 'ArrowRight' || event.key === 'd') {
          moveTetromino('right');
        } else if (event.key === 'ArrowDown' || event.key === 's') {
          moveTetromino('down');
        } else if (event.key === ' ') {
          dropTetromino();
        }
      }

spawnTetromino();
      document.addEventListener('keydown', handleKeyPress);

setInterval(() => {
        if (canMoveTetromino('down')) {
          moveTetromino('down');
        } else {
          lockTetromino();
          checkLines();
          spawnTetromino();
        }
      }, 500);
    });
  </script>
</body>
</html>
```

上記のコードでは、HTMLファイル内にテトリスのゲーム画面を表示し、JavaScriptを用いてゲームのロジックを実装しています。ゲーム画面は`<div id="game-board"></div>`で定義されており、テトリミノが表示される10×20のグリッドが描画されます。

JavaScriptのコードは`<script>`タグ内に記述されており、ゲームの各種操作や描画処理、テトリミノの衝突判定、行の削除などが実装されています。また、キーボード操作によるテトリミノの移動や回転もサポートされています。

ゲームはページの読み込みが完了すると自動的に開始され、テトリミノは一定の速度で自動的に下に移動します。テトリミノが下まで到達した場合はその位置で固定され、行が揃った場合はその行が削除されます。テトリミノが画面上部まで到達するとゲームオーバーとなり、ページがリロードされます。

スマホで操作する場合は、スマホのブラウザで上記のHTMLファイルを開いて操作することができます。