AI game creator

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

No:499

462

←

Prev Next

→

tetrine
Developer User3044｜Date and time 23/6/15 2:06:02
Build time 90.005 sec｜Game capacity 7.499KB｜

Script

*This program was created by an AI assistant.、Quality is not guaranteed. Please use at your own risk.

←

Prev　Next

→ 　

Back　

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

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

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>テトリン</title>
    <style>
      /* CSS */
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="240" height="400"></canvas>
    <script>
      /* JavaScript */
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const blockSize = 20; // ブロックの大きさ
      const rows = canvas.height / blockSize; // 縦のブロック数
      const columns = canvas.width / blockSize; // 横のブロック数
      const board = []; // 盤面
      let score = 0; // スコア
      let block; // 現在のブロック
      let dropCounter = 0; // 落下処理のカウンター
      let dropInterval = 1000; // 落下処理の間隔
      
      // 盤面を初期化
      function initBoard() {
        for (let row = 0; row < rows; row++) {
          board[row] = [];
          for (let col = 0; col < columns; col++) {
            board[row][col] = 0;
          }
        }
      }
      
      // ブロックを作成
      function createBlock() {
        const blockTypes = [
          [[1, 1],
           [1, 1]],
          [[0, 2, 0],
           [2, 2, 2]],
          [[0, 3, 3],
           [3, 3, 0]],
          [[4, 4, 0],
           [0, 4, 4]],
          [[0, 5, 0],
           [5, 5, 5]],
          [[6, 6, 6],
           [0, 6, 0]],
          [[7, 7, 7, 7]]
        ];
        const blockType = blockTypes[Math.floor(Math.random() * blockTypes.length)];
        const block = [];
        for (let row = 0; row < blockType.length; row++) {
          block[row] = [];
          for (let col = 0; col < blockType[0].length; col++) {
            block[row][col] = blockType[row][col];
          }
        }
        return block;
      }
      
      // ブロックを描画
      function drawBlock(x, y, block) {
        for (let row = 0; row < block.length; row++) {
          for (let col = 0; col < block[0].length; col++) {
            if (block[row][col]) {
              const blockX = x + col * blockSize;
              const blockY = y + row * blockSize;
              ctx.fillStyle = getBlockColor(block[row][col]);
              ctx.fillRect(blockX, blockY, blockSize, blockSize);
              ctx.strokeRect(blockX, blockY, blockSize, blockSize);
            }
          }
        }
      }
      
      // ブロックの色を取得
      function getBlockColor(blockType) {
        switch (blockType) {
          case 1: return '#F00'; // 赤
          case 2: return '#0F0'; // 緑
          case 3: return '#00F'; // 青
          case 4: return '#FF0'; // 黄
          case 5: return '#0FF'; // 水
          case 6: return '#F0F'; // 紫
          case 7: return '#0AF'; // 明るい青
          default: return '#000'; // 黒
        }
      }
      
      // 盤面を描画
      function drawBoard() {
        for (let row = 0; row < rows; row++) {
          for (let col = 0; col < columns; col++) {
            if (board[row][col]) {
              const blockX = col * blockSize;
              const blockY = row * blockSize;
              ctx.fillStyle = getBlockColor(board[row][col]);
              ctx.fillRect(blockX, blockY, blockSize, blockSize);
              ctx.strokeRect(blockX, blockY, blockSize, blockSize);
            }
          }
        }
      }
      
      // スコアを描画
      function drawScore() {
        ctx.font = '20px Arial';
        ctx.fillStyle = '#000';
        ctx.fillText(`Score: ${score}`, 10, 30);
      }
      
      // ブロックを落とす
      function dropBlock() {
        if (isCollision(0, 1, block)) {
          // 衝突したらブロックを盤面に固定する
          landBlock();
          block = createBlock();
        } else {
          // 衝突しなければブロックを1マス落とす
          blockY += blockSize;
        }
        dropCounter = 0;
      }
      
      // ブロックを盤面に固定する
      function landBlock() {
        for (let row = 0; row < block.length; row++) {
          for (let col = 0; col < block[0].length; col++) {
            if (block[row][col]) {
              const boardRow = blockY / blockSize + row;
              const boardCol = blockX / blockSize + col;
              board[boardRow][boardCol] = block[row][col];
            }
          }
        }
        clearLines();
      }
      
      // 衝突判定
      function isCollision(deltaX, deltaY, block) {
        const nextX = blockX + deltaX * blockSize;
        const nextY = blockY + deltaY * blockSize;
        for (let row = 0; row < block.length; row++) {
          for (let col = 0; col < block[0].length; col++) {
            if (block[row][col]) {
              const boardRow = nextY / blockSize + row;
              const boardCol = nextX / blockSize + col;
              if (boardRow < 0 || boardRow >= rows ||
                  boardCol < 0 || boardCol >= columns ||
                  board[boardRow][boardCol]) {
                return true;
              }
            }
          }
        }
        return false;
      }
      
      // 行が揃っているかチェックして削除する
      function clearLines() {
        let lines = 0;
        for (let row = 0; row < rows; row++) {
          if (board[row].every(cell => cell !== 0)) {
            // 行が揃っている場合
            board.splice(row, 1);
            board.unshift([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
            lines++;
          }
        }
        score += lines * 100;
      }
      
      // ゲームループ
      let blockX, blockY;
      initBoard();
      block = createBlock();
      function loop(timestamp) {
        const deltaTime = timestamp - prevTime;
        prevTime = timestamp;
        dropCounter += deltaTime;
        if (dropCounter >= dropInterval) {
          dropBlock();
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBoard();
        drawScore();
        blockX = Math.floor(canvas.width / 2 / blockSize) * blockSize;
        blockY = 0;
        drawBlock(blockX, blockY, block);
        requestAnimationFrame(loop);
      }
      let prevTime = 0;
      requestAnimationFrame(loop);
      
      // キー入力
      window.addEventListener('keydown', event => {
        switch (event.keyCode) {
          case 37: // 左
            if (!isCollision(-1, 0, block)) {
              blockX -= blockSize;
            }
            break;
          case 39: // 右
            if (!isCollision(1, 0, block)) {
              blockX += blockSize;
            }
            break;
          case 40: // 下
            dropBlock();
            break;
          case 38: // 上
            // ブロックを回転する
            const rotatedBlock = [];
            for (let row = 0; row < block[0].length; row++) {
              rotatedBlock[row] = [];
              for (let col = 0; col < block.length; col++) {
                rotatedBlock[row][col] = block[block.length - col - 1][row];
              }
            }
            if (!isCollision(0, 0, rotatedBlock)) {
              block = rotatedBlock;
            }
            break;
        }
      });
      
    </script>
  </body>
</html>

※本プログラムはAIアシスタントによって作成されたものであり、クオリティを保証するものではありません。必ず自己責任においてご利用ください。