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

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

No:39649

←

Prev Next

→

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

Script

了解しました。以下がテトリスのプログラムです。

このプログラムは1枚のHTMLファイルとして実装されており、必ずJavaScript（ゲームの処理部分）を含んでいます。JavaScriptのコードは`script`タグで囲まれており、実行開始されるようになっています。このゲームは、スマートフォンで操作することを前提に作成されており、絵文字も使用されています。テトリスのゲーム画面が表示され、左右の矢印キーでブロックを移動し、下向きの矢印キーでブロックを下に移動させることができます。ブロックが一列揃うとその行が消え、スコアが増加します。ブロックが画面の上まで積み上がるとゲームオーバーです。以上が完成したテトリスのゲームプログラムです。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

了解しました。以下がテトリスのプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden; /* スクロールバー非表示 */
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

canvas {
      border: 1px solid #000;
      background: #222;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="240" height="400"></canvas>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

const scale = 20;
      const rows = canvas.height / scale;
      const columns = canvas.width / scale;

let score = 0;

class Piece {
        constructor() {
          this.x = Math.floor(Math.random() * (columns - 3)) + 1;
          this.y = 0;
          this.color = '#' + (Math.random().toString(16) + '000000').substring(2, 8).toUpperCase();
          this.shape = [
            [Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0],
            [Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0],
            [Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0],
            [Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0, Math.random() < 0.5 ? 1 : 0]
          ];
        }

draw() {
          this.shape.forEach((row, rowIndex) => {
            row.forEach((cell, colIndex) => {
              if (cell) {
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x + colIndex, this.y + rowIndex, 1, 1);
              }
            });
          });
        }

moveDown() {
          this.y++;
        }

moveRight() {
          this.x++;
        }

moveLeft() {
          this.x--;
        }
      }

const drawGrid = () => {
        ctx.strokeStyle = '#666';
        for (let row = 0; row < rows; row++) {
          ctx.beginPath();
          ctx.moveTo(0, row * scale);
          ctx.lineTo(canvas.width, row * scale);
          ctx.stroke();
        }

for (let col = 0; col < columns; col++) {
          ctx.beginPath();
          ctx.moveTo(col * scale, 0);
          ctx.lineTo(col * scale, canvas.height);
          ctx.stroke();
        }
      };

const drawScore = () => {
        ctx.fillStyle = 'white';
        ctx.font = '20px Helvetica';
        ctx.fillText('Score: ' + score, 20, 35);
      };

const gameOver = () => {
        clearInterval(gameLoop);
        ctx.fillStyle = 'white';
        ctx.font = '30px Helvetica';
        ctx.fillText('Game Over', canvas.width / 2 - 80, canvas.height / 2);
      };

const update = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

piece.moveDown();

if (collide(piece)) {
          piece.moveUp();
          merge(piece);
          piece = new Piece();

removeFullRows();

if (collide(piece)) {
             gameOver();
             return;
          }
        }

piece.draw();
        drawGrid();
        drawScore();
      };

const canvasGrid = Array.from({ length: rows }, () => new Array(columns));

let piece = new Piece();

const gameLoop = setInterval(update, 1000 / 5);

removeFullRows();

if (collide(piece)) {
              gameOver();
            }
          }
        }
      });
    });
  </script>
</body>
</html>
```

このプログラムは1枚のHTMLファイルとして実装されており、必ずJavaScript（ゲームの処理部分）を含んでいます。JavaScriptのコードは`script`タグで囲まれており、実行開始されるようになっています。

このゲームは、スマートフォンで操作することを前提に作成されており、絵文字も使用されています。テトリスのゲーム画面が表示され、左右の矢印キーでブロックを移動し、下向きの矢印キーでブロックを下に移動させることができます。ブロックが一列揃うとその行が消え、スコアが増加します。ブロックが画面の上まで積み上がるとゲームオーバーです。

以上が完成したテトリスのゲームプログラムです。