テトリスデラックス's game

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

No:27721

←

Prev Next

→

テトリスデラックス
Developer User13711｜Date and time 23/12/8 15:37:01
Build time 73.555 sec｜Game capacity 6.861KB｜

Script

了解しました。以下にテトリスデラックスの実装例を示します。

このプログラムでは、HTMLの`canvas`要素を使用してテトリスのゲーム画面を描画します。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 Deluxe</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    canvas {
      display: block;
      margin: 0 auto;
      background: #333;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Set up game variables
    const gridSize = 20;
    const gridWidth = canvas.width / gridSize;
    const gridHeight = canvas.height / gridSize;
    const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'cyan'];
    let grid = [];
    let currentPiece;
    let interval;
    let score;

// Set up event listeners
    document.addEventListener('keydown', handleKeyPress);

// Initialize game
    resetGame();

// Game loop
    function gameLoop() {
      update();
      draw();
    }

// Game update
    function update() {
      if (collisionCheck(0, 1, currentPiece)) {
        placePiece();
        removeLines();
        currentPiece = generatePiece();
        if (collisionCheck(0, 0, currentPiece)) {
          gameover();
        }
      } else {
        currentPiece.y += 1;
      }
    }

// Game draw
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawGrid();
      drawPiece(currentPiece);
      drawScore();
    }

// Draw the grid
    function drawGrid() {
      for (let i = 0; i < grid.length; i++) {
        for (let j = 0; j < grid[i].length; j++) {
          if (grid[i][j] !== 0) {
            ctx.fillStyle = colors[grid[i][j] - 1];
            ctx.fillRect(j * gridSize, i * gridSize, gridSize, gridSize);
            ctx.strokeStyle = 'white';
            ctx.strokeRect(j * gridSize, i * gridSize, gridSize, gridSize);
          }
        }
      }
    }

// Draw the falling piece
    function drawPiece(piece) {
      for (let i = 0; i < piece.shape.length; i++) {
        for (let j = 0; j < piece.shape[i].length; j++) {
          if (piece.shape[i][j] !== 0) {
            ctx.fillStyle = colors[piece.type - 1];
            ctx.fillRect((piece.x + j) * gridSize, (piece.y + i) * gridSize, gridSize, gridSize);
            ctx.strokeStyle = 'white';
            ctx.strokeRect((piece.x + j) * gridSize, (piece.y + i) * gridSize, gridSize, gridSize);
          }
        }
      }
    }

// Draw the score
    function drawScore() {
      ctx.fillStyle = 'white';
      ctx.font = '20px Arial';
      ctx.fillText(`Score: ${score}`, 10, 30);
    }

// Generate a random piece
    function generatePiece() {
      const types = [
        [[1, 1, 1, 1]],
        [[1, 1], [1, 1]],
        [[1, 0, 0], [1, 1, 1]],
        [[0, 0, 1], [1, 1, 1]],
        [[1, 1, 0], [0, 1, 1]],
        [[0, 1, 1], [1, 1, 0]],
        [[1, 1, 1], [0, 1, 0]]
      ];
      const type = Math.floor(Math.random() * types.length);
      const shape = types[type];
      const x = Math.floor(gridWidth / 2) - Math.floor(shape[0].length / 2);
      const y = -shape.length;
      return { type, shape, x, y };
    }

// Place the falling piece on the grid
    function placePiece() {
      for (let i = 0; i < currentPiece.shape.length; i++) {
        for (let j = 0; j < currentPiece.shape[i].length; j++) {
          if (currentPiece.shape[i][j] !== 0) {
            grid[currentPiece.y + i][currentPiece.x + j] = currentPiece.type;
          }
        }
      }
    }

// Remove completed lines from the grid and increase score
    function removeLines() {
      for (let i = grid.length - 1; i >= 0; i--) {
        if (grid[i].every(cell => cell !== 0)) {
          grid.splice(i, 1);
          grid.unshift(new Array(gridWidth).fill(0));
          score += 10;
        }
      }
    }

// Check for collision
    function collisionCheck(offsetX, offsetY, piece) {
      for (let i = 0; i < piece.shape.length; i++) {
        for (let j = 0; j < piece.shape[i].length; j++) {
          if (piece.shape[i][j] !== 0) {
            const newX = piece.x + j + offsetX;
            const newY = piece.y + i + offsetY;
            if (newX < 0 || newX >= gridWidth || newY >= gridHeight || grid[newY][newX] !== 0) {
              return true;
            }
          }
        }
      }
      return false;
    }

// Handle key press events
    function handleKeyPress(e) {
      if (e.key === 'ArrowLeft' && !collisionCheck(-1, 0, currentPiece)) {
        currentPiece.x -= 1;
      } else if (e.key === 'ArrowRight' && !collisionCheck(1, 0, currentPiece)) {
        currentPiece.x += 1;
      } else if (e.key === 'ArrowDown' && !collisionCheck(0, 1, currentPiece)) {
        currentPiece.y += 1;
      } else if (e.key === 'ArrowUp') {
        rotatePiece();
      }
    }

// Rotate the falling piece
    function rotatePiece() {
      const newShape = [];
      for (let i = 0; i < currentPiece.shape[0].length; i++) {
        const newRow = [];
        for (let j = currentPiece.shape.length - 1; j >= 0; j--) {
          newRow.push(currentPiece.shape[j][i]);
        }
        newShape.push(newRow);
      }
      if (!collisionCheck(0, 0, { ...currentPiece, shape: newShape })) {
        currentPiece.shape = newShape;
      }
    }

// Start a new game
    function resetGame() {
      grid = new Array(gridHeight).fill(0).map(() => new Array(gridWidth).fill(0));
      currentPiece = generatePiece();
      score = 0;
      interval = setInterval(gameLoop, 500);
    }

// Game over
    function gameover() {
      clearInterval(interval);
      alert(`Game Over! Score: ${score}`);
      resetGame();
    }
  </script>
</body>
</html>
```
このプログラムでは、HTMLの`canvas`要素を使用してテトリスのゲーム画面を描画します。JavaScriptの`script`タグでゲームのロジックを実装しています。ゲームの操作はキーボードの矢印キー（左右で移動、上で回転、下で高速落下）に対応しています。ゲームが終了するとアラートダイアログが表示され、スコアがリセットされて新しいゲームが始まります。

なお、このプログラムはテトリスの基本的な実装であり、機能の追加や改良はさらに行うことができます。また、絵文字の使用については環境に依存するため、一部の環境では正しく表示されないかもしれません。必要に応じて絵文字を適切な文字に置き換えてください。