Teria como quadrado mais bola's game

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

No:41395

←

Prev Next

→

Teria como quadrado mais bola
Developer User18527｜Date and time 24/2/7 8:22:36
Build time 14.206 sec｜Game capacity 3.867KB｜

Script

Claro! Vou criar um simples jogo onde você pode controlar um quadrado para pegar bolas. Aqui está a implementação em um único arquivo HTML com JavaScript:

Para jogar o jogo, você pode mover o quadrado usando as setas do teclado e seu objetivo é clicar nas bolas vermelhas que aparecem no tabuleiro. As bolas desaparecerão quando você clicar nelas. Divirta-se!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Claro! Vou criar um simples jogo onde você pode controlar um quadrado para pegar bolas. Aqui está a implementação em um único arquivo HTML com JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Quadrado Mais Bola</title>
  <style>
    #game-board {
      position: relative;
      width: 300px;
      height: 300px;
      border: 1px solid black;
      overflow: hidden;
      margin: 50px auto;
    }
    
    #square {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background-color: blue;
    }
    
    .ball {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="square"></div>
  </div>
  
  <script>
    // Obtendo a referência dos elementos do jogo
    const gameBoard = document.getElementById("game-board");
    const square = document.getElementById("square");
    
    // Definindo a posição inicial do quadrado
    let squareX = 0;
    let squareY = 0;
    
    // Função para atualizar a posição do quadrado na tela
    function updateSquarePosition() {
      square.style.left = squareX + 'px';
      square.style.top = squareY + 'px';
    }
    
    // Função para checar colisão entre o quadrado e as bolas
    function checkCollision(ball) {
      const squareRect = square.getBoundingClientRect();
      const ballRect = ball.getBoundingClientRect();
      
      return !(
        squareRect.right < ballRect.left ||
        squareRect.left > ballRect.right ||
        squareRect.bottom < ballRect.top ||
        squareRect.top > ballRect.bottom
      );
    }
    
    // Função para criar uma nova bola e adicioná-la ao jogo
    function createBall() {
      const ball = document.createElement("div");
      ball.classList.add("ball");
      gameBoard.appendChild(ball);
      
      const maxX = gameBoard.clientWidth - ball.clientWidth;
      const maxY = gameBoard.clientHeight - ball.clientHeight;
      
      // Definindo a posição inicial da bola de forma aleatória
      const ballX = Math.floor(Math.random() * maxX);
      const ballY = Math.floor(Math.random() * maxY);
      
      ball.style.left = ballX + 'px';
      ball.style.top = ballY + 'px';
      
      // Verifica se houve colisão ao criar a bola
      if (checkCollision(ball)) {
        gameBoard.removeChild(ball);
        createBall(); // Tenta criar uma nova bola
        return;
      }
      
      // Adiciona evento de clique na bola
      ball.addEventListener("click", () => {
        gameBoard.removeChild(ball);
      });
    }
    
    // Função para movimentar o quadrado de acordo com os eventos
    function moveSquare(event) {
      switch (event.key) {
        case "ArrowUp":
          squareY -= 10;
          break;
        case "ArrowDown":
          squareY += 10;
          break;
        case "ArrowLeft":
          squareX -= 10;
          break;
        case "ArrowRight":
          squareX += 10;
          break;
      }
      
      // Verifica se houve colisão ao movimentar o quadrado
      const balls = document.getElementsByClassName("ball");
      Array.from(balls).forEach((ball) => {
        if (checkCollision(ball)) {
          gameBoard.removeChild(ball);
        }
      });
      
      // Atualiza a posição do quadrado na tela
      updateSquarePosition();
    }
    
    // Inicializa o jogo
    updateSquarePosition();
    createBall();
    
    // Escuta os eventos de teclado para movimentar o quadrado
    window.addEventListener("keydown", moveSquare);
  </script>
</body>
</html>
```