AI game creator

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

No:41753

←

Prev Next

→

Tetris
Developer User18727｜Date and time 24/2/9 19:26:48
Build time 26.644 sec｜Game capacity 7.521KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    /* CSS styles for the game board */
    #board {
      width: 150px;
      height: 300px;
      border: 1px solid black;
      background-color: #f2f2f2;
      position: relative;
    }
    
    /* CSS styles for the game cells */
    .cell {
      width: 30px;
      height: 30px;
      border: 1px solid white;
      position: absolute;
    }
    
    /* CSS styles for the different tetromino shapes */
    .i-shape {
      background-color: cyan;
    }
    
    .j-shape {
      background-color: blue;
    }
    
    .l-shape {
      background-color: orange;
    }
    
    .o-shape {
      background-color: yellow;
    }
    
    .s-shape {
      background-color: green;
    }
    
    .t-shape {
      background-color: purple;
    }
    
    .z-shape {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="board"></div>

// Initialize the game
    function init() {
      board = createBoard();
      shapes = createShapes();
      currentShape = getRandomShape();
      drawShape(currentShape);
      timer = setInterval(moveDown, 1000);
      document.addEventListener("keydown", handleKeyPress);
    }

// Create the game board
    function createBoard() {
      var board = [];
      for (var i = 0; i < rows; i++) {
        var row = [];
        for (var j = 0; j < cols; j++) {
          row.push(0);
        }
        board.push(row);
      }
      return board;
    }

// Create the tetromino shapes
    function createShapes() {
      return [
        [[1, 1, 1, 1]],
        [[1, 1, 1], [0, 0, 1]],
        [[1, 1, 1], [1, 0, 0]],
        [[1, 1], [1, 1]],
        [[0, 1, 1], [1, 1, 0]],
        [[1, 1, 1], [0, 1, 0]],
        [[1, 1, 0], [0, 1, 1]]
      ];
    }

// Get a random tetromino shape
    function getRandomShape() {
      var index = Math.floor(Math.random() * shapes.length);
      return shapes[index];
    }

// Draw the current shape on the game board
    function drawShape(shape) {
      var boardElement = document.getElementById("board");
      for (var i = 0; i < shape.length; i++) {
        for (var j = 0; j < shape[i].length; j++) {
          if (shape[i][j] === 1) {
            var cell = document.createElement("div");
            cell.className = "cell " + getShapeClass(shape);
            cell.style.top = (i * cellSize) + "px";
            cell.style.left = (j * cellSize) + "px";
            boardElement.appendChild(cell);
          }
        }
      }
    }

// Get the CSS class for the current shape's shape type
    function getShapeClass(shape) {
      if (shape === shapes[0]) {
        return "i-shape";
      } else if (shape === shapes[1]) {
        return "j-shape";
      } else if (shape === shapes[2]) {
        return "l-shape";
      } else if (shape === shapes[3]) {
        return "o-shape";
      } else if (shape === shapes[4]) {
        return "s-shape";
      } else if (shape === shapes[5]) {
        return "t-shape";
      } else if (shape === shapes[6]) {
        return "z-shape";
      }
    }

// Move the current shape down
    function moveDown() {
      if (!gameOver) {
        var canMove = canShapeMove(1, 0);
        if (canMove) {
          clearShape();
          currentShape.row++;
          drawShape(currentShape);
        } else {
          mergeShape();
          checkRows();
          currentShape = getRandomShape();
          if (!canShapeMove(0, 0)) {
            gameOver = true;
            clearInterval(timer);
          }
        }
      }
    }

// Clear the current shape from the game board
    function clearShape() {
      var boardElement = document.getElementById("board");
      var cells = boardElement.getElementsByClassName(getShapeClass(currentShape));
      while (cells.length > 0) {
        boardElement.removeChild(cells[0]);
      }
    }

// Merge the current shape with the game board
    function mergeShape() {
      for (var i = 0; i < currentShape.length; i++) {
        for (var j = 0; j < currentShape[i].length; j++) {
          if (currentShape[i][j] === 1) {
            board[currentShape.row + i][currentShape.col + j] = 1;
          }
        }
      }
    }

// Check and clear completed rows
    function checkRows() {
      var completedRows = [];
      for (var i = 0; i < board.length; i++) {
        var isCompleted = true;
        for (var j = 0; j < board[i].length; j++) {
          if (board[i][j] !== 1) {
            isCompleted = false;
            break;
          }
        }
        if (isCompleted) {
          completedRows.push(i);
        }
      }
      if (completedRows.length > 0) {
        removeRows(completedRows);
        score += completedRows.length * 100;
        showScore();
      }
    }

// Remove completed rows from the game board
    function removeRows(rowsToRemove) {
      for (var i = rowsToRemove.length - 1; i >= 0; i--) {
        board.splice(rowsToRemove[i], 1);
        var newRow = [];
        for (var j = 0; j < cols; j++) {
          newRow.push(0);
        }
        board.unshift(newRow);
      }
    }

// Show the score on the screen
    function showScore() {
      var scoreElement = document.createElement("p");
      scoreElement.innerHTML = "Score: " + score;
      document.body.appendChild(scoreElement);
    }

// Check if the current shape can move in a given direction
    function canShapeMove(rowOffset, colOffset) {
      for (var i = 0; i < currentShape.length; i++) {
        for (var j = 0; j < currentShape[i].length; j++) {
          if (currentShape[i][j] === 1) {
            var newRow = currentShape.row + i + rowOffset;
            var newCol = currentShape.col + j + colOffset;
            if (newRow < 0 || newRow >= rows || newCol < 0 || newCol >= cols || board[newRow][newCol] === 1) {
              return false;
            }
          }
        }
      }
      return true;
    }

// Handle key press events
    function handleKeyPress(event) {
      if (!gameOver) {
        if (event.keyCode === 37) { // Left arrow key
          if (canShapeMove(0, -1)) {
            clearShape();
            currentShape.col--;
            drawShape(currentShape);
          }
        } else if (event.keyCode === 39) { // Right arrow key
          if (canShapeMove(0, 1)) {
            clearShape();
            currentShape.col++;
            drawShape(currentShape);
          }
        } else if (event.keyCode === 40) { // Down arrow key
          moveDown();
        } else if (event.keyCode === 38) { // Up arrow key (rotate)
          var rotatedShape = rotateShape();
          if (canShapeMove(0, 0, rotatedShape)) {
            clearShape();
            currentShape = rotatedShape;
            drawShape(currentShape);
          }
        }
      }
    }

// Rotate the current shape
    function rotateShape() {
      var rotatedShape = [];
      for (var i = 0; i < currentShape[0].length; i++) {
        var newRow = [];
        for (var j = currentShape.length - 1; j >= 0; j--) {
          newRow.push(currentShape[j][i]);
        }
        rotatedShape.push(newRow);
      }
      rotatedShape.row = currentShape.row;
      rotatedShape.col = currentShape.col;
      return rotatedShape;
    }

// Start the game
    init();
  </script>
</body>
</html>