AI game creator

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

No:44803

←

Prev Next

→

Tetris in a snow
Developer User19470｜Date and time 24/2/19 6:02:59
Build time 14.706 sec｜Game capacity 3.922KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Snow Tetris</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="300" height="600"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const context = canvas.getContext('2d');
    
    const blockSize = 30;
    const gridWidth = canvas.width / blockSize;
    const gridHeight = canvas.height / blockSize;
    
    let grid = Array.from({ length: gridHeight }, () => Array(gridWidth).fill(0));
    
    const colors = ['red', 'blue', 'green', 'purple', 'yellow'];
    
    const shapes = [
      [[1, 1, 1],
       [0, 1, 0]],
      [[1, 1],
       [1, 1]],
      [[0, 1, 0],
       [1, 1, 1]],
      [[1, 1, 0],
       [0, 1, 1]],
      [[1, 1, 1, 1]]
    ];
    
    let currentShape = getRandomShape();
    let currentShapeX = 0;
    let currentShapeY = 0;
    
    function getRandomShape() {
      const randomIndex = Math.floor(Math.random() * shapes.length);
      return shapes[randomIndex];
    }
    
    function drawBlock(x, y, color) {
      context.fillStyle = color;
      context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
      context.strokeStyle = 'black';
      context.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
    }
    
    function drawGrid() {
      for (let y = 0; y < gridHeight; y++) {
        for (let x = 0; x < gridWidth; x++) {
          if (grid[y][x] !== 0) {
            drawBlock(x, y, colors[grid[y][x] - 1]);
          }
        }
      }
    }
    
    function drawShape() {
      currentShape.forEach((row, y) => {
        row.forEach((block, x) => {
          if (block) {
            drawBlock(currentShapeX + x, currentShapeY + y, colors[shapes.indexOf(currentShape)]);
          }
        });
      });
    }
    
    function moveShape(dirX, dirY) {
      if (!collisionDetection(currentShapeX + dirX, currentShapeY + dirY, currentShape)) {
        currentShapeX += dirX;
        currentShapeY += dirY;
        draw();
      }
    }
    
    function rotateShape() {
      const rotated = currentShape[0].map((val, index) => currentShape.map(row => row[index]).reverse());
      if (!collisionDetection(currentShapeX, currentShapeY, rotated)) {
        currentShape = rotated;
        draw();
      }
    }
    
    function collisionDetection(x, y, shape) {
      for (let row = 0; row < shape.length; row++) {
        for (let col = 0; col < shape[0].length; col++) {
          if (shape[row][col] && (x + col < 0 || x + col >= gridWidth || y + row >= gridHeight || grid[y + row][x + col])) {
            return true;
          }
        }
      }
      return false;
    }
    
    function mergeShape() {
      currentShape.forEach((row, y) => {
        row.forEach((block, x) => {
          if (block) {
            grid[currentShapeY + y][currentShapeX + x] = shapes.indexOf(currentShape) + 1;
          }
        });
      });
    }
    
    function clearRows() {
      for (let y = gridHeight - 1; y >= 0; y--) {
        if (grid[y].every(block => block !== 0)) {
          grid.splice(y, 1);
          grid.unshift(Array(gridWidth).fill(0));
          y++;
        }
      }
    }
    
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawGrid();
      drawShape();
    }
    
    function update() {
      moveShape(0, 1);
    }
    
    function gameLoop() {
      update();
      setTimeout(gameLoop, 1000);
    }
    
    document.addEventListener('keydown', event => {
      switch (event.key) {
        case 'ArrowLeft':
          moveShape(-1, 0);
          break;
        case 'ArrowRight':
          moveShape(1, 0);
          break;
        case 'ArrowDown':
          moveShape(0, 1);
          break;
        case 'ArrowUp':
          rotateShape();
          break;
      }
    });
    
    gameLoop();
  </script>
</body>
</html>