でかいテトリスビックゲーム's game

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

No:39861

←

Prev Next

→

でかいテトリスビックゲーム
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/30 18:13:02
Build time 34.298 sec｜Game capacity 7.926KB｜

Script

了解です。以下に大きなテトリスブロックゲームの実装例を示します。

このコードは、HTMLファイルの中に書かれたJavaScriptコードによって、1つの大きなテトリスブロックゲームを実装しています。プレイヤーは矢印キーでテトリスブロックを動かし、上矢印キーで回転させることができます。ゲームは自動的にブロックを下に移動させ、行が揃った場合にブロックを消去します。また、ゲームオーバー条件も設定されています。このHTMLファイルをブラウザで開くと、実際のゲームとして遊ぶことができます。スマートフォンの操作にも対応しています。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に大きなテトリスブロックゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tetris</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #container {
      display: grid;
      grid-template-columns: repeat(10, 30px);
      grid-template-rows: repeat(20, 30px);
      gap: 1px;
      border: 1px solid black;
    }
    .cell {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <div id="container"></div>

const container = document.getElementById('container');
      container.style.width = cols * 30 + 'px';
      container.style.height = rows * 30 + 'px';

let cells = [];
      for (let i = 0; i < rows; i++) {
        cells.push([]);
        for (let j = 0; j < cols; j++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          container.appendChild(cell);
          cells[i].push(cell);
        }
      }

let currentShape = [
        [1, 1],
        [1, 1]
      ];
      let currentRow = 0;
      let currentCol = Math.floor(cols / 2) - 1;
      drawShape();

function clearShape() {
        const activeCells = document.querySelectorAll('.active');
        activeCells.forEach(cell => {
          cell.textContent = emptyCell;
          cell.classList.remove('active');
        });
      }

function moveDown() {
        if (canMoveDown()) {
          currentRow++;
          drawShape();
        }
      }

function getRandomShape() {
        const shapes = [
          [[1, 1], [1, 1]],
          [[1, 1, 0], [0, 1, 1]],
          [[0, 1, 0], [1, 1, 1]],
          [[1, 0, 0], [1, 1, 1]],
          [[1, 1, 1]]
        ];
        const randomIndex = Math.floor(Math.random() * shapes.length);
        return shapes[randomIndex];
      }

function handleKeyPress(event) {
        switch (event.key) {
          case 'ArrowLeft':
            moveLeft();
            break;
          case 'ArrowRight':
            moveRight();
            break;
          case 'ArrowDown':
            moveDown();
            break;
          case 'ArrowUp':
            rotate();
            break;
        }
      }
      document.addEventListener('keydown', handleKeyPress);

function moveLeft() {
        if (canMoveLeft()) {
          currentCol--;
          drawShape();
        }
      }

function moveRight() {
        if (canMoveRight()) {
          currentCol++;
          drawShape();
        }
      }

let interval = setInterval(function() {
        moveDown();
        clearRows();
        gameOver();
      }, 500);
    });
  </script>
</body>
</html>
```

このコードは、HTMLファイルの中に書かれたJavaScriptコードによって、1つの大きなテトリスブロックゲームを実装しています。プレイヤーは矢印キーでテトリスブロックを動かし、上矢印キーで回転させることができます。

ゲームは自動的にブロックを下に移動させ、行が揃った場合にブロックを消去します。また、ゲームオーバー条件も設定されています。

このHTMLファイルをブラウザで開くと、実際のゲームとして遊ぶことができます。スマートフォンの操作にも対応しています。