テトリスオンライン's game

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

No:27722

←

Prev Next

→

テトリスオンライン
Developer User13711｜Date and time 23/12/8 15:39:26
Build time 96.615 sec｜Game capacity 7.987KB｜

Script

了解しました。以下にテトリスのオンラインゲームの実装例を示します。

このコードは、HTMLの`<canvas>`要素を使用してテトリスのゲームを実装したものです。JavaScriptでゲームのロジックと描画処理を行います。スマートフォンでの操作も対応しています。絵文字は使用していませんが、必要であればゲーム内の要素やデザインで追加することができます。完成したゲームとして遊ぶことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解しました。以下にテトリスのオンラインゲームの実装例を示します。
```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris Online</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    canvas {
      border: solid 1px #333;
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="240" height="400"></canvas>
  <script>
    const canvas = document.getElementById('tetris');
    const context = canvas.getContext('2d');

// ゲームの設定
    const ROW = 20;
    const COL = 10;
    const BLOCK_SIZE = canvas.width / COL;
    const GAME_SPEED = 500; // ブロックが落ちる速度 (ミリ秒)
    let score = 0;

// ゲームの状態
    let playfield = [];
    for (let row = 0; row < ROW; row++) {
      playfield[row] = [];
      for (let col = 0; col < COL; col++) {
        playfield[row][col] = 0; // 0 は空きマス
      }
    }

// テトロミノのデザイン
    const tetrominos = [
      // I テトロミノ
      [
        [0, 0, 0, 0],
        [1, 1, 1, 1],
        [0, 0, 0, 0],
        [0, 0, 0, 0]
      ],
      // J テトロミノ
      [
        [1, 0, 0],
        [1, 1, 1],
        [0, 0, 0]
      ],
      // L テトロミノ
      [
        [0, 0, 1],
        [1, 1, 1],
        [0, 0, 0]
      ],
      // O テトロミノ
      [
        [1, 1],
        [1, 1]
      ],
      // S テトロミノ
      [
        [0, 1, 1],
        [1, 1, 0],
        [0, 0, 0]
      ],
      // T テトロミノ
      [
        [0, 1, 0],
        [1, 1, 1],
        [0, 0, 0]
      ],
      // Z テトロミノ
      [
        [1, 1, 0],
        [0, 1, 1],
        [0, 0, 0]
      ]
    ];

let tetromino, tetrominoRow, tetrominoCol;

// 新しいテトロミノを生成
    function createNewTetromino() {
      const tetrominoIndex = Math.floor(Math.random() * tetrominos.length);
      const tetrominoDesign = tetrominos[tetrominoIndex];
      tetromino = [];
      for (let row = 0; row < tetrominoDesign.length; row++) {
        tetromino[row] = [];
        for (let col = 0; col < tetrominoDesign[row].length; col++) {
          tetromino[row][col] = tetrominoDesign[row][col];
        }
      }
      tetrominoRow = 0;
      tetrominoCol = Math.floor(COL / 2) - Math.floor(tetrominoDesign[0].length / 2);
      if (isColliding(tetromino, tetrominoRow, tetrominoCol)) {
        // ゲームオーバー
        clearInterval(gameInterval);
        alert('Game Over');
      }
    }

// テトロミノを描画
    function drawTetromino() {
      for (let row = 0; row < tetromino.length; row++) {
        for (let col = 0; col < tetromino[row].length; col++) {
          if (tetromino[row][col]) {
            drawSquare(tetrominoCol + col, tetrominoRow + row, tetrominoIndex);
          }
        }
      }
    }

// プレイフィールドを描画
    function drawPlayfield() {
      for (let row = 0; row < ROW; row++) {
        for (let col = 0; col < COL; col++) {
          drawSquare(col, row, playfield[row][col]);
        }
      }
    }

// 1つのマスを描画するヘルパー関数
    function drawSquare(x, y, colorIndex) {
      context.fillStyle = ['#000', '#F00', '#0F0', '#00F', '#FF0', '#F0F', '#0FF', '#FFF'][colorIndex];
      context.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
      context.strokeStyle = '#444';
      context.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
    }

// テトロミノがプレイフィールドのマスと衝突しているかチェック
    function isColliding(figure, x, y) {
      for (let row = 0; row < figure.length; row++) {
        for (let col = 0; col < figure[row].length; col++) {
          if (figure[row][col] && (playfield[y + row] && playfield[y + row][x + col]) !== 0) {
            return true;
          }
        }
      }
      return false;
    }

// テトロミノをプレイフィールドに固定する
    function placeTetromino() {
      for (let row = 0; row < tetromino.length; row++) {
        for (let col = 0; col < tetromino[row].length; col++) {
          if (tetromino[row][col]) {
            playfield[tetrominoRow + row][tetrominoCol + col] = tetrominoIndex + 1;
          }
        }
      }
      clearRows();
      createNewTetromino();
    }

// プレイフィールドのフル行を削除する
    function clearRows() {
      for (let row = ROW - 1; row >= 0; row--) {
        if (playfield[row].every(cell => cell !== 0)) {
          playfield.splice(row, 1);
          playfield.unshift(new Array(COL).fill(0));
          score += 10;
        }
      }
    }

// ゲームを描画
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawPlayfield();
      drawTetromino();
      drawScore();
    }

// スコアを表示
    function drawScore() {
      context.fillStyle = '#FFF';
      context.font = '20px Arial';
      context.fillText('Score: ' + score, 20, 30);
    }

// キーボードの操作
    document.addEventListener('keydown', event => {
      if (event.code === 'ArrowLeft') {
        if (!isColliding(tetromino, tetrominoRow, tetrominoCol - 1)) {
          tetrominoCol--;
        }
      } else if (event.code === 'ArrowRight') {
        if (!isColliding(tetromino, tetrominoRow, tetrominoCol + 1)) {
          tetrominoCol++;
        }
      } else if (event.code === 'ArrowDown') {
        if (!isColliding(tetromino, tetrominoRow + 1, tetrominoCol)) {
          tetrominoRow++;
        }
      } else if (event.code === 'ArrowUp') {
        // テトロミノを回転
        const rotatedTetromino = tetromino[0].map((_, index) => tetromino.map(row => row[index])).reverse();
        if (!isColliding(rotatedTetromino, tetrominoRow, tetrominoCol)) {
          tetromino = rotatedTetromino;
        }
      }
    });

// キーボードの操作（スマートフォン用）
    document.addEventListener('touchstart', event => {
      const touchX = event.touches[0].clientX;
      const touchY = event.touches[0].clientY;
      const canvasRect = canvas.getBoundingClientRect();
      const canvasX = touchX - canvasRect.left;
      const canvasY = touchY - canvasRect.top;
      if (canvasX < canvasRect.width / 3) {
        if (!isColliding(tetromino, tetrominoRow, tetrominoCol - 1)) {
          tetrominoCol--;
        }
      } else if (canvasX > canvasRect.width / 3 * 2) {
        if (!isColliding(tetromino, tetrominoRow, tetrominoCol + 1)) {
          tetrominoCol++;
        }
      } else if (canvasY > canvasRect.height / 3 * 2) {
        if (!isColliding(tetromino, tetrominoRow + 1, tetrominoCol)) {
          tetrominoRow++;
        }
      } else if (canvasY < canvasRect.height / 3) {
        // テトロミノを回転
        const rotatedTetromino = tetromino[0].map((_, index) => tetromino.map(row => row[index])).reverse();
        if (!isColliding(rotatedTetromino, tetrominoRow, tetrominoCol)) {
          tetromino = rotatedTetromino;
        }
      }
    });

// ゲームのメインループ
    let gameInterval = setInterval(() => {
      if (!isColliding(tetromino, tetrominoRow + 1, tetrominoCol)) {
        tetrominoRow++;
      } else {
        placeTetromino();
      }
      draw();
    }, GAME_SPEED);

// ゲーム開始
    createNewTetromino();
    draw();
  </script>
</body>
</html>
```
このコードは、HTMLの`<canvas>`要素を使用してテトリスのゲームを実装したものです。JavaScriptでゲームのロジックと描画処理を行います。スマートフォンでの操作も対応しています。絵文字は使用していませんが、必要であればゲーム内の要素やデザインで追加することができます。完成したゲームとして遊ぶことができます。