AI game creator

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

No:6079

1509

←

Prev Next

→

Tetris
Developer User3860｜Date and time 23/7/1 16:22:59
Build time 30.782 sec｜Game capacity 3.25KB｜

Script

了解です。以下にJavaScriptを用いたテトリスの例を記述します。

以上のコードは、HTMLファイルの中にJavaScriptを含んだテトリスのゲームの一例です。スマホの操作にも対応しており、ブロックを操作するために画面をタップすることでゲームを開始できます。ただし、完全なテトリスの実装ではなく、ブロックは一つの種類のみで、ブロックの衝突判定や行の消去などの詳細な処理が省略されています。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にJavaScriptを用いたテトリスの例を記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    #game-board {
      border: 1px solid black;
      width: 300px;
      height: 600px;
      position: relative;
    }

.block {
      width: 30px;
      height: 30px;
      position: absolute;
      background-color: grey;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// ブロックの情報
    const blocksList = [
      {
        shape: [
          [1, 1],
          [1, 1],
        ],
        color: "yellow",
      },
      {
        shape: [
          [1, 1, 1],
          [0, 1, 0],
        ],
        color: "blue",
      },
      {
        shape: [
          [1, 1, 1],
          [1, 0, 0],
        ],
        color: "green",
      }
      // 他のブロックの情報も追加...
    ];

// 現在のブロックの位置と形状を格納する変数
    let currentBlock = {
      shape: [],
      x: 0,
      y: 0,
      color: ""
    };

// ブロックを初期位置に配置する関数
    function initializeBlock() {
      const randomIndex = Math.floor(Math.random() * blocksList.length);
      const randomBlock = blocksList[randomIndex];
      currentBlock.shape = randomBlock.shape;
      currentBlock.x = Math.floor(Math.random() * 10) * 30;
      currentBlock.y = -30;
      currentBlock.color = randomBlock.color;
    }

// ブロックを描画する関数
    function drawBlock() {
      const { shape, x, y, color } = currentBlock;
      for (let i = 0; i < shape.length; i++) {
        for (let j = 0; j < shape[i].length; j++) {
          if (shape[i][j] === 1) {
            const blockElement = document.createElement("div");
            blockElement.className = "block";
            blockElement.style.left = x + j * 30 + "px";
            blockElement.style.top = y + i * 30 + "px";
            blockElement.style.backgroundColor = color;
            gameBoard.appendChild(blockElement);
          }
        }
      }
    }

// ゲームのメイン処理
    function gameLoop() {
      gameBoard.innerHTML = "";
      currentBlock.y += 30; // ブロックを下に移動

// ブロックを描画
      drawBlock();

// 一定時間ごとにゲームループを再帰的に呼び出す
      setTimeout(gameLoop, 1000);
    }

// ゲーム開始
    function startGame() {
      initializeBlock();
      gameLoop();
    }

// ゲームを開始するために、画面をタップした時のイベントリスナーを追加
    document.addEventListener("click", startGame);
  </script>
</body>
</html>
```