Tetris's game | AI game creator

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

No:8966

111

Tetris
Developer User4253｜Date and time 23/7/20 0:24:20
Build time 92.84 sec｜Game capacity 9.274KB｜

了解です。以下にHTMLとJavaScriptを使用した簡単なテトリスゲームの実装例を示します。

このコードは、HTMLのcanvas要素を使用してテトリスのゲームを実装しています。JavaScriptでテトリスのゲームのロジックを記述しており、キーボードの入力に応じてテトリミノを操作することができます。ゲームのスコアも表示されます。スマートフォンでも操作可能なように実装してありますが、一部の操作はキーボードの入力を使用していますので、必要に応じて変更してください。また、ゲームのループはsetTimeoutを使用して処理していますが、もっとスムーズなアニメーションを実現するためにはrequestAnimationFrameなどを使用することが推奨されます。以上が簡単なテトリスゲームの実装例です。お手元の環境でお試しいただければ幸いです。ご希望に応じてカスタマイズしたり、他のゲーム要素を追加したりすることも可能です。

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

了解です。以下にHTMLとJavaScriptを使用した簡単なテトリスゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>テトリス</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
      }

canvas {
        border: 1px solid black;
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

<script>
      // ゲームの処理を記述
      const canvas = document.getElementById("gameCanvas");
      const context = canvas.getContext("2d");
      const blockSize = 40; // ブロックのサイズ
      const boardWidth = canvas.width / blockSize;
      const boardHeight = canvas.height / blockSize;

let score = 0;
      let board = [];

// ボードの初期化
      for (let r = 0; r < boardHeight; r++) {
        board[r] = [];
        for (let c = 0; c < boardWidth; c++) {
          board[r][c] = "";
        }
      }

function drawBlock(x, y, color) {
        context.fillStyle = color;
        context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
        context.strokeStyle = "black";
        context.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
      }

function drawBoard() {
        for (let r = 0; r < boardHeight; r++) {
          for (let c = 0; c < boardWidth; c++) {
            if (board[r][c] !== "") {
              drawBlock(c, r, board[r][c]);
            }
          }
        }
      }

function clearBoard() {
        for (let r = 0; r < boardHeight; r++) {
          for (let c = 0; c < boardWidth; c++) {
            board[r][c] = "";
          }
        }
      }

function drawScore() {
        context.font = "20px Arial";
        context.fillStyle = "black";
        context.fillText("Score: " + score, 20, 30);
      }

function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBoard();
        drawScore();
      }

// テトリスのブロックを表すクラス
      class Tetromino {
        constructor(shape, color) {
          this.shape = shape;
          this.curShape = this.shape[0];
          this.color = color;
          this.x = Math.floor(boardWidth / 2) - Math.floor(this.curShape[0].length / 2);
          this.y = -1;
        }

draw() {
          for (let r = 0; r < this.curShape.length; r++) {
            for (let c = 0; c < this.curShape[r].length; c++) {
              if (this.curShape[r][c] === "X") {
                drawBlock(this.x + c, this.y + r, this.color);
              }
            }
          }
        }

undraw() {
          for (let r = 0; r < this.curShape.length; r++) {
            for (let c = 0; c < this.curShape[r].length; c++) {
              if (this.curShape[r][c] === "X") {
                drawBlock(this.x + c, this.y + r, "#f2f2f2");
              }
            }
          }
        }

moveDown() {
          if (this.isValidMove(0, 1)) {
            this.undraw();
            this.y++;
            this.draw();
          } else {
            this.lock();
            if (isGameOver()) {
              alert("Game Over!");
              clearBoard();
              score = 0;
            }
            else {
              clearRows();
              currentTetromino = randomTetromino();
            }
          }
        }

moveRight() {
          if (this.isValidMove(1, 0)) {
            this.undraw();
            this.x++;
            this.draw();
          }
        }

moveLeft() {
          if (this.isValidMove(-1, 0)) {
            this.undraw();
            this.x--;
            this.draw();
          }
        }

rotate() {
          const oldShape = this.curShape;
          this.curShape = this.shape[(this.shape.indexOf(oldShape) + 1) % this.shape.length];
          if (!this.isValidMove(0, 0)) {
            this.curShape = oldShape;
          }
          this.undraw();
          this.draw();
        }

isValidMove(dx, dy) {
          for (let r = 0; r < this.curShape.length; r++) {
            for (let c = 0; c < this.curShape[r].length; c++) {
              if (this.curShape[r][c] === "X") {
                const newX = this.x + c + dx;
                const newY = this.y + r + dy;
                if (newX < 0 || newX >= boardWidth || newY >= boardHeight || board[newY][newX] !== "") {
                  return false;
                }
              }
            }
          }
          return true;
        }

lock() {
          for (let r = 0; r < this.curShape.length; r++) {
            for (let c = 0; c < this.curShape[r].length; c++) {
              if (this.curShape[r][c] === "X") {
                const newX = this.x + c;
                const newY = this.y + r;
                board[newY][newX] = this.color;
              }
            }
          }
        }
      }

// テトリスのブロックの種類を表すクラス
      class TetrominoShape {
        constructor(shapeArray) {
          this.shapeArray = shapeArray;
        }
      }

const shapes = [
        new TetrominoShape([
          ["XXXX"]
        ]),
        new TetrominoShape([
          ["X",
           "X",
           "XX"],
          ["XXX",
           "X"]
        ]),
        new TetrominoShape([
          ["X",
           "X",
           "X",
           "X"],
          ["XXXX"]
        ]),
        new TetrominoShape([
          ["X",
           "X",
           "X",
           "X"]
        ]),
        new TetrominoShape([
          ["XX",
           "XX"]
        ]),
        new TetrominoShape([
          ["X",
           "XX",
           "X"],
          ["X",
           "XX",
           "X"]
        ]),
        new TetrominoShape([
          ["X",
           "XX",
           " X"],
          [" X",
           "XX",
           "X"]
        ])
      ];

function randomTetromino() {
        const randomIdx = Math.floor(Math.random() * shapes.length);
        return new Tetromino(shapes[randomIdx].shape, "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")");
      }

let currentTetromino = randomTetromino();

function drawTetromino() {
        currentTetromino.draw();
      }

function undrawTetromino() {
        currentTetromino.undraw();
      }

function isGameOver() {
        for (let c = 0; c < boardWidth; c++) {
          if (board[0][c] !== "") {
            return true;
          }
        }
        return false;
      }

function clearRow(row) {
        for (let c = 0; c < boardWidth; c++) {
          board[row][c] = "";
        }

for (let r = row; r >= 0; r--) {
          for (let c = 0; c < boardWidth; c++) {
            if (r === 0) {
              board[r][c] = "";
            } else {
              board[r][c] = board[r - 1][c];
            }
          }
        }
      }

function clearRows() {
        for (let r = 0; r < boardHeight; r++) {
          let rowFilled = true;
          for (let c = 0; c < boardWidth; c++) {
            if (board[r][c] === "") {
              rowFilled = false;
              break;
            }
          }
          if (rowFilled) {
            clearRow(r);
            score += 10;
          }
        }
      }

function updateGame() {
        currentTetromino.moveDown();
        draw();
      }

function gameLoop() {
        setTimeout(function() {
          updateGame();
          gameLoop();
        }, 1000);
      }

// キーボードの入力に応じてテトリミノを操作
      document.addEventListener('keydown', function(e) {
        if (e.code === "ArrowUp") {
          currentTetromino.rotate();
        } else if (e.code === "ArrowRight") {
          currentTetromino.moveRight();
        } else if (e.code === "ArrowLeft") {
          currentTetromino.moveLeft();
        } else if (e.code === "ArrowDown") {
          currentTetromino.moveDown();
          score += 1;
        }
        draw();
      });

gameLoop();
    </script>
  </body>
</html>
```

このコードは、HTMLのcanvas要素を使用してテトリスのゲームを実装しています。JavaScriptでテトリスのゲームのロジックを記述しており、キーボードの入力に応じてテトリミノを操作することができます。ゲームのスコアも表示されます。

スマートフォンでも操作可能なように実装してありますが、一部の操作はキーボードの入力を使用していますので、必要に応じて変更してください。また、ゲームのループはsetTimeoutを使用して処理していますが、もっとスムーズなアニメーションを実現するためにはrequestAnimationFrameなどを使用することが推奨されます。

以上が簡単なテトリスゲームの実装例です。お手元の環境でお試しいただければ幸いです。ご希望に応じてカスタマイズしたり、他のゲーム要素を追加したりすることも可能です。