AI game creator

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

No:26444

←

Prev Next

→

テトリス
Developer User13122｜Date and time 23/11/30 20:57:35
Build time 128.877 sec｜Game capacity 10.389KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tetris</title>
  <style>
    body {
      background-color: #333;
      color: #fff;
      font-family: Arial, sans-serif;
      text-align: center;
    }
    canvas {
      border: 1px solid #fff;
      display: block;
      margin: 0 auto;
      background-color: #000;
    }
    #score {
      font-size: 20px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="240" height="400"></canvas>
  <div id="score">Score: 0</div>
  
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const canvas = document.getElementById('tetris');
      const context = canvas.getContext('2d');
      const scoreElement = document.getElementById('score');
      
      // テトリスの単位の値を定義
      const scale = 20;
      const rows = canvas.height / scale;
      const columns = canvas.width / scale;
      
      // テトリスのエリアのデータを初期化する
      let board = createBoard();
      
      // テトリスの落下ブロックを生成する
      let block = createBlock();
      
      // スコアを初期化する
      let score = 0;
      
      // gameLoop関数を呼び出し、ゲームを開始する
      gameLoop();
      
      // ゲームループ
      function gameLoop() {
        clearBoard();
        
        // 落下ブロックを描画する
        drawBlock();
        
        // 落下ブロックが下方向に移動できるかチェックする
        if (canMoveDown()) {
          block.y++;
        } else {
          // 落下ブロックが着地した場合
          mergeBlock();
          deleteFullRows();
          
          if (isGameOver()) {
            // ゲームオーバーの場合
            scoreElement.innerHTML = 'Game Over! Score: ' + score;
            
            // 遊べないようにする
            return;
          }
          
          // 新しい落下ブロックを生成する
          block = createBlock();
        }
        
        // スコアを表示する
        scoreElement.innerHTML = 'Score: ' + score;
        
        // 0.5秒ごとにgameLoop関数を呼び出す
        setTimeout(gameLoop, 500);
      }
      
      // テトリスのエリアを初期化する
      function createBoard() {
        let board = [];
        
        for (let row = 0; row < rows; row++) {
          board[row] = [];
          
          for (let col = 0; col < columns; col++) {
            board[row][col] = '';
          }
        }
        
        return board;
      }
      
      // 落下ブロックを生成する
      function createBlock() {
        const blocks = [
          [
            [1, 1, 1, 1]
          ],
          [
            [1, 1],
            [1, 1]
          ],
          [
            [1, 1, 0],
            [0, 1, 1]
          ],
          [
            [0, 1, 1],
            [1, 1, 0]
          ],
          [
            [1, 0, 0],
            [1, 1, 1]
          ],
          [
            [0, 0, 1],
            [1, 1, 1]
          ],
          [
            [1, 1, 1],
            [1, 0, 0]
          ],
        ];
        
        const blockIndex = Math.floor(Math.random() * blocks.length);
        const blockData = blocks[blockIndex];
        
        const block = {
          data: blockData,
          x: Math.floor(columns / 2) - Math.floor(blockData[0].length / 2),
          y: -1,
          color: '#' + Math.floor(Math.random() * 16777215).toString(16)
        };
        
        return block;
      }
      
      // テトリスのエリアをクリアする
      function clearBoard() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }
      
      // 落下ブロックを描画する
      function drawBlock() {
        block.data.forEach((row, rowIndex) => {
          row.forEach((cell, colIndex) => {
            if (cell) {
              context.fillStyle = block.color;
              const x = block.x + colIndex;
              const y = block.y + rowIndex;
              context.fillRect(x * scale, y * scale, scale, scale);
            }
          });
        });
      }
      
      // 落下ブロックを移動させる（左）
      function moveLeft() {
        if (canMoveLeft()) {
          block.x--;
        }
      }
      
      // 落下ブロックを移動させる（右）
      function moveRight() {
        if (canMoveRight()) {
          block.x++;
        }
      }
      
      // 落下ブロックを回転させる
      function rotate() {
        const newData = rotateData(block.data);
        
        if (canRotate(newData)) {
          block.data = newData;
        }
      }
      
      // ブロックデータを回転させる
      function rotateData(data) {
        const newData = [];
        
        data[0].forEach((_, colIndex) => {
          const newRow = data.map(row => row[colIndex].slice());
          newRow.reverse();
          newData.push(newRow);
        });
        
        return newData;
      }
      
      // 落下ブロックを下方向に移動できるか判定する
      function canMoveDown() {
        for (let row = 0; row < block.data.length; row++) {
          for (let col = 0; col < block.data[row].length; col++) {
            if (block.data[row][col]) {
              const nextRow = block.y + row + 1;
              
              if (nextRow >= rows || board[nextRow][block.x + col]) {
                return false;
              }
            }
          }
        }
        
        return true;
      }
      
      // 落下ブロックを左に移動できるか判定する
      function canMoveLeft() {
        for (let row = 0; row < block.data.length; row++) {
          for (let col = 0; col < block.data[row].length; col++) {
            if (block.data[row][col]) {
              const nextCol = block.x + col - 1;
              
              if (nextCol < 0 || board[block.y + row][nextCol]) {
                return false;
              }
            }
          }
        }
        
        return true;
      }
      
      // 落下ブロックを右に移動できるか判定する
      function canMoveRight() {
        for (let row = 0; row < block.data.length; row++) {
          for (let col = 0; col < block.data[row].length; col++) {
            if (block.data[row][col]) {
              const nextCol = block.x + col + 1;
              
              if (nextCol >= columns || board[block.y + row][nextCol]) {
                return false;
              }
            }
          }
        }
        
        return true;
      }
      
      // 落下ブロックを回転できるか判定する
      function canRotate(data) {
        for (let row = 0; row < data.length; row++) {
          for (let col = 0; col < data[row].length; col++) {
            if (data[row][col]) {
              const nextRow = block.y + row;
              const nextCol = block.x + col;
              
              if (
                nextRow >= rows ||
                nextCol < 0 ||
                nextCol >= columns ||
                board[nextRow][nextCol]
              ) {
                return false;
              }
            }
          }
        }
        
        return true;
      }
      
      // 落下ブロックをエリアにマージする
      function mergeBlock() {
        block.data.forEach((row, rowIndex) => {
          row.forEach((cell, colIndex) => {
            if (cell) {
              const row = block.y + rowIndex;
              const col = block.x + colIndex;
              board[row][col] = block.color;
            }
          });
        });
      }
      
      // スコアを更新する
      function updateScore() {
        score += 100;
        
        if (score % 1000 === 0) {
          // スコアが1000の倍数の場合はゲームの速度を上げる
          clearInterval(gameLoop);
          setTimeout(gameLoop, 100);
        }
      }
      
      // 指定した行が揃っているか判定する
      function isRowFull(row) {
        for (const cell of board[row]) {
          if (!cell) {
            return false;
          }
        }
        
        return true;
      }
      
      // 揃った行を削除し、上の行を下ろす
      function deleteRow(row) {
        for (let r = row; r > 0; r--) {
          board[r] = board[r - 1];
        }
        
        board[0] = Array(columns).fill('');
      }
      
      // 揃った行を削除する
      function deleteFullRows() {
        let rowCount = 0;
        
        for (let row = 0; row < rows; row++) {
          if (isRowFull(row)) {
            deleteRow(row);
            rowCount++;
          }
        }
        
        if (rowCount > 0) {
          updateScore(rowCount);
        }
      }
      
      // ゲームオーバーか判定する
      function isGameOver() {
        for (const cell of board[0]) {
          if (cell) {
            return true;
          }
        }
        
        return false;
      }
      
      // スマホ操作用のボタンを作成
      const buttonsContainer = document.createElement('div');
      buttonsContainer.style.marginTop = '20px';
      
      const leftButton = document.createElement('button');
      leftButton.textContent = '←';
      leftButton.addEventListener('click', moveLeft);
      buttonsContainer.appendChild(leftButton);
      
      const rightButton = document.createElement('button');
      rightButton.textContent = '→';
      rightButton.addEventListener('click', moveRight);
      buttonsContainer.appendChild(rightButton);
      
      const rotateButton = document.createElement('button');
      rotateButton.textContent = '↺';
      rotateButton.addEventListener('click', rotate);
      buttonsContainer.appendChild(rotateButton);
      
      document.body.appendChild(buttonsContainer);
      
      // スマホでの操作を追加
      document.addEventListener('keydown', (event) => {
        switch (event.keyCode) {
          case 37: // Left Arrow Key
            moveLeft();
            break;
          case 39: // Right Arrow Key
            moveRight();
            break;
          case 38: // Up Arrow Key
            rotate();
            break;
        }
      });
    });
  </script>
</body>
</html>