難しいテトリス's game

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

No:39870

←

Prev Next

→

難しいテトリス
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/30 18:42:01
Build time 36.559 sec｜Game capacity 7.953KB｜

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>
  <meta charset="UTF-8">
  <title>Tetris</title>
  <style>
    /* スタイル設定 */
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f5f5f5;
      font-family: Arial, sans-serif;
    }

#canvas {
      background-color: #fff;
      border: 2px solid #333;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="240" height="400"></canvas>

// ゲームの状態を管理する変数
    let game = null;

// ゲームオブジェクトの定義
    function Game() {
      this.canvas = document.getElementById("canvas");
      this.context = this.canvas.getContext("2d");
      this.score = 0;
      this.board = [];

// ゲームの初期化
      this.init = function() {
        this.board = [];
        for (let row = 0; row < 20; row++) {
          this.board[row] = [];
          for (let col = 0; col < 10; col++) {
            this.board[row][col] = 0;
          }
        }
      };

// ブロックの描画
      this.drawBlock = function(x, y, color) {
        this.context.fillStyle = color;
        this.context.fillRect(x * 24, y * 24, 24, 24);
        this.context.strokeStyle = "#333";
        this.context.lineWidth = 2;
        this.context.strokeRect(x * 24, y * 24, 24, 24);
      };

// ボードの描画
      this.drawBoard = function() {
        for (let row = 0; row < 20; row++) {
          for (let col = 0; col < 10; col++) {
            if (this.board[row][col] !== 0) {
              this.drawBlock(col, row, this.board[row][col]);
            }
          }
        }
      };

// テトリスブロックの生成
      this.generateBlock = function() {
        const blocks = [
          [[1, 1, 1, 1]],
          [[1, 1], [1, 1]],
          [[1, 1, 0], [0, 1, 1]],
          [[0, 1, 1], [1, 1, 0]],
          [[1, 1, 0], [0, 1, 1]],
          [[1, 0, 0], [1, 1, 1]],
          [[0, 0, 1], [1, 1, 1]]
        ];
        const block = blocks[Math.floor(Math.random() * blocks.length)];
        const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
        return { block, color };
      };

// ブロックの描画位置の初期化
      this.initPosition = function() {
        this.position = {
          x: 3,
          y: 0,
          block: this.generateBlock()
        };
      };

// ブロックの描画
      this.drawBlockPosition = function() {
        const { block, color } = this.position.block;
        for (let row = 0; row < block.length; row++) {
          for (let col = 0; col < block[row].length; col++) {
            if (block[row][col] === 1) {
              this.drawBlock(this.position.x + col, this.position.y + row, color);
            }
          }
        }
      };

// ブロックの移動
      this.moveBlock = function(dx, dy) {
        const { block } = this.position.block;
        if (!this.checkCollision(this.position.x + dx, this.position.y + dy, block)) {
          this.position.x += dx;
          this.position.y += dy;
        }
      };

// ブロックの回転
      this.rotateBlock = function() {
        const { block } = this.position.block;
        const rotatedBlock = this.rotate90(block);
        if (!this.checkCollision(this.position.x, this.position.y, rotatedBlock)) {
          this.position.block.block = rotatedBlock;
        }
      };

// ブロックの90度回転
      this.rotate90 = function(block) {
        const N = block.length;
        const M = block[0].length;
        const rotatedBlock = [];
        for (let col = M-1; col >= 0; col--) {
          rotatedBlock[col] = [];
          for (let row = 0; row < N; row++) {
            rotatedBlock[col][row] = block[row][M-1-col];
          }
        }
        return rotatedBlock;
      };

// ブロックの衝突判定
      this.checkCollision = function(x, y, block) {
        for (let row = 0; row < block.length; row++) {
          for (let col = 0; col < block[row].length; col++) {
            if (
              (block[row][col] === 1) &&
              (
                (x + col < 0) ||
                (x + col >= 10) ||
                (y + row >= 20) ||
                (this.board[y + row][x + col] !== 0)
              )
            ) {
              return true;
            }
          }
        }
        return false;
      };

// ブロックの固定
      this.fixBlock = function() {
        const { block } = this.position.block;
        for (let row = 0; row < block.length; row++) {
          for (let col = 0; col < block[row].length; col++) {
            if (block[row][col] === 1) {
              this.board[this.position.y + row][this.position.x + col] = this.position.block.color;
            }
          }
        }
        this.clearLines();
        this.initPosition();
        if (this.checkCollision(this.position.x, this.position.y, this.position.block.block)) {
          this.gameOver();
        }
      };

// 行のクリア
      this.clearLines = function() {
        let lines = 0;
        for (let row = 0; row < 20; row++) {
          let isLineFull = true;
          for (let col = 0; col < 10; col++) {
            if (this.board[row][col] === 0) {
              isLineFull = false;
              break;
            }
          }
          if (isLineFull) {
            this.board.splice(row, 1);
            this.board.unshift(Array(10).fill(0));
            lines++;
          }
        }
        if (lines > 0) {
          this.score += lines;
        }
      };

// ゲームオーバー処理
      this.gameOver = function() {
        clearInterval(this.interval);
        alert("Game Over");
        this.init();
        this.initPosition();
        this.start();
      };

// ゲーム開始
      this.start = function() {
        this.init();
        this.initPosition();
        this.interval = setInterval(() => {
          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
          this.moveBlock(0, 1);
          this.drawBoard();
          this.drawBlockPosition();
        }, 500);
      };
    }

function startGame() {
      game = new Game();
      game.start();

// キーボード操作によるブロックの移動・回転
      document.addEventListener("keydown", (event) => {
        switch (event.code) {
          case "ArrowUp":
            game.rotateBlock();
            break;
          case "ArrowRight":
            game.moveBlock(1, 0);
            break;
          case "ArrowLeft":
            game.moveBlock(-1, 0);
            break;
          case "ArrowDown":
            game.moveBlock(0, 1);
            break;
          case "Space":
            while (!game.checkCollision(game.position.x, game.position.y + 1, game.position.block.block)) {
              game.moveBlock(0, 1);
            }
            break;
        }
      });
    }
  </script>
</body>
</html>
```

このプログラムでは、HTMLのcanvas要素を使用してテトリスのゲーム画面を表示しています。JavaScriptでゲームの状態を管理し、キーボード操作を受け付けてブロックを操作できるようにしています。

ただし、スマートフォンの操作に対応しておらず、キーボード操作を前提としています。スマートフォンでプレイする場合には、適切なタッチイベントを実装する必要があります。また、絵文字を使用する部分は記述されていませんが、必要に応じて絵文字を追加することができます。