Vacuum sucking up blocks's game

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

No:17317

←

Prev Next

→

Vacuum sucking up blocks
Developer User7638｜Date and time 23/9/23 4:28:13
Build time 32.358 sec｜Game capacity 3.125KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Vacuum Sucking Game</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Arial, sans-serif;
    }

#canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>

// Define block colors and sizes
  const blockSize = 50;
  const blockColors = ['#FF7171', '#849EFF', '#FFD65C'];

// Define the vacuum starting position and size
  const vacuumSize = blockSize * 1.5;
  let vacuumX = canvas.width / 2 - vacuumSize / 2;
  let vacuumY = canvas.height / 2 - vacuumSize / 2;

// Define the blocks array
  let blocks = [];

// Function to generate blocks at random positions
  function generateBlocks() {
    for (let i = 0; i < 10; i++) {
      const randomX = Math.floor(Math.random() * (canvas.width - blockSize));
      const randomY = Math.floor(Math.random() * (canvas.height - blockSize));
      const randomColor = blockColors[Math.floor(Math.random() * blockColors.length)];
      blocks.push({ x: randomX, y: randomY, color: randomColor });
    }
  }

// Function to clear the canvas
  function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }

// Function to draw the vacuum
  function drawVacuum() {
    ctx.fillStyle = 'gray';
    ctx.fillRect(vacuumX, vacuumY, vacuumSize, vacuumSize);
  }

// Function to draw the blocks
  function drawBlocks() {
    blocks.forEach(block => {
      ctx.fillStyle = block.color;
      ctx.fillRect(block.x, block.y, blockSize, blockSize);
    })
  }

// Function to move the vacuum
  function moveVacuum(direction) {
    switch (direction) {
      case 'up':
        vacuumY -= blockSize;
        break;
      case 'down':
        vacuumY += blockSize;
        break;
      case 'left':
        vacuumX -= blockSize;
        break;
      case 'right':
        vacuumX += blockSize;
        break;
    }
  }

// Function to check if the vacuum has collided with a block
  function checkCollision() {
    blocks.forEach(block => {
      if (vacuumX < block.x + blockSize &&
          vacuumX + vacuumSize > block.x &&
          vacuumY < block.y + blockSize &&
          vacuumY + vacuumSize > block.y) {
        blocks = blocks.filter(b => b !== block);
      }
    });
  }

// Function to update the game state
  function update() {
    clearCanvas();
    drawVacuum();
    drawBlocks();
    checkCollision();
  }

// Function to handle keyboard events
  function handleKeyDown(event) {
    const key = event.key.toLowerCase();
    const validKeys = ['arrowup', 'arrowdown', 'arrowleft', 'arrowright'];

if (validKeys.includes(key)) {
      event.preventDefault();
      moveVacuum(key.replace('arrow', ''));
      update();
    }
  }

// Start the game
  generateBlocks();
  update();
  window.addEventListener('keydown', handleKeyDown);
</script>
</body>
</html>