AI game creator

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

No:42483

←

Prev Next

→

テトリス
Developer User18888｜Date and time 24/2/11 20:40:48
Build time 25.571 sec｜Game capacity 6.618KB｜

Script

←

Prev　Next

→ 　

Back　

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

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>
    #tetris {
      width: 200px;
      height: 400px;
      background-color: #eee;
      position: relative;
      border: 4px solid #ccc;
    }
    
    .block {
      width: 20px;
      height: 20px;
      position: absolute;
    }
    
    .block.red {
      background-color: red;
    }
    
    .block.blue {
      background-color: blue;
    }
    
    .block.green {
      background-color: green;
    }
    
    .block.yellow {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="tetris"></div>

// ブロックの種類と色を表す配列
    var blockData = [
      [[1, 1], [1, 1]],
      [[1, 1, 1], [0, 1, 0]],
      [[1, 1, 1], [1, 0, 0]],
      [[1, 1, 1], [0, 0, 1]]
    ];

// 現在のブロックの座標と色を表す変数
    var currentX, currentY, currentBlock, currentColor;

// ゲームオーバーフラグ
    var gameOver = false;

// ゲームのスコア
    var score = 0;

// ゲームボードを表示する関数
    function drawBoard() {
      var tetris = document.getElementById("tetris");
      tetris.innerHTML = "";

for (var i = 0; i < gameBoard.length; i++) {
        for (var j = 0; j < gameBoard[i].length; j++) {
          if (gameBoard[i][j] !== 0) {
            var block = document.createElement("div");
            block.style.top = i * 20 + "px";
            block.style.left = j * 20 + "px";
            block.className = "block " + blockColor(gameBoard[i][j]);
            tetris.appendChild(block);
          }
        }
      }
    }

// ブロックの色を返す関数
    function blockColor(color) {
      switch (color) {
        case 1:
          return "red";
        case 2:
          return "blue";
        case 3:
          return "green";
        case 4:
          return "yellow";
      }
    }

// 新しいブロックを生成する関数
    function newBlock() {
      var blockIndex = Math.floor(Math.random() * blockData.length);
      currentBlock = blockData[blockIndex];
      currentColor = blockIndex + 1;
      currentX = 4;
      currentY = 0;
    }

// 現在のブロックをゲームボードに反映する関数
    function drawBlock() {
      for (var i = 0; i < currentBlock.length; i++) {
        for (var j = 0; j < currentBlock[i].length; j++) {
          if (currentBlock[i][j] === 1) {
            gameBoard[currentY + i][currentX + j] = currentColor;
          }
        }
      }
    }

// ブロックの当たり判定を確認する関数
    function checkCollision() {
      for (var i = 0; i < currentBlock.length; i++) {
        for (var j = 0; j < currentBlock[i].length; j++) {
          if (currentBlock[i][j] === 1) {
            if (currentY + i >= gameBoard.length || currentX + j < 0 || currentX + j >= gameBoard[0].length || gameBoard[currentY + i][currentX + j] !== 0) {
              return true;
            }
          }
        }
      }
      return false;
    }

// ブロックを回転する関数
    function rotateBlock() {
      var newBlockData = [];
      for (var i = 0; i < currentBlock[0].length; i++) {
        newBlockData[i] = [];
        for (var j = 0; j < currentBlock.length; j++) {
          newBlockData[i][j] = currentBlock[currentBlock.length - 1 - j][i];
        }
      }
      currentBlock = newBlockData;
      if (checkCollision()) {
        // 回転後に衝突がある場合は元に戻す
        for (var i = 0; i < currentBlock[0].length; i++) {
          for (var j = 0; j < currentBlock.length; j++) {
            newBlockData[i][j] = currentBlock[j][i];
          }
        }
      }
    }

// ブロックを下に移動する関数
    function moveDown() {
      currentY++;
      if (checkCollision()) {
        currentY--;
        drawBlock();
        clearLines();
        if (!gameOver) {
          newBlock();
        }
      }
    }

// ブロックを左に移動する関数
    function moveLeft() {
      currentX--;
      if (checkCollision()) {
        currentX++;
      }
    }

// ブロックを右に移動する関数
    function moveRight() {
      currentX++;
      if (checkCollision()) {
        currentX--;
      }
    }

// ラインが揃った場合は消去する関数
    function clearLines() {
      for (var i = gameBoard.length - 1; i >= 0; i--) {
        if (gameBoard[i].indexOf(0) === -1) {
          gameBoard.splice(i, 1);
          gameBoard.unshift([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
          score += 10;
        }
      }
    }

// ゲームオーバー時の処理を行う関数
    function gameOverFunc() {
      drawBoard();
      alert("Game Over\nYour score: " + score);
      gameOver = true;
    }

// スワイプイベントの処理を行う関数
    function handleSwipe(event) {
      var startX, startY, endX, endY;
      startX = event.changedTouches[0].screenX;
      startY = event.changedTouches[0].screenY;
      endX = event.changedTouches[0].screenX;
      endY = event.changedTouches[0].screenY;
      document.addEventListener("touchmove", function(event) {
        endX = event.changedTouches[0].screenX;
        endY = event.changedTouches[0].screenY;
        event.preventDefault();
      });
      document.addEventListener("touchend", function(event) {
        var deltaX = endX - startX;
        var deltaY = endY - startY;
        if (Math.abs(deltaX) < Math.abs(deltaY)) {
          if (deltaY < -50) {
            rotateBlock();
          } else if (deltaY > 50) {
            moveDown();
          }
        } else {
          if (deltaX < -50) {
            moveLeft();
          } else if (deltaX > 50) {
            moveRight();
          }
        }
      });
    }

// ゲームループ
    function gameLoop() {
      drawBoard();
      if (!gameOver) {
        moveDown();
      }
    }

// 初期化
    function init() {
      newBlock();
      setInterval(gameLoop, 1000);
      document.addEventListener("touchstart", handleSwipe);
    }

// ゲームを開始する
    init();
  </script>
</body>
</html>