Crie um jogo onde se você clica na tela vai aperaça um quadrado azul e vermelho e quando eles se tocam e gerado um verde e os quadrados ficam andando pela na tela's game

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

No:35979

←

Prev Next

→

Crie um jogo onde se você clica na tela vai aperaç..ALL
Developer User16419｜Date and time 24/1/16 5:42:13
Build time 10.247 sec｜Game capacity 2.588KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Jogo de Quadrados</title>
<style>
.canvas {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: black;
}

.square {
  width: 50px;
  height: 50px;
  position: absolute;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

</style>
</head>
<body>
<div class="canvas" onclick="createSquare(event)"></div>

function createSquare(event) {
  const square = document.createElement('div');
  square.classList.add('square');

const x = event.clientX - canvas.getBoundingClientRect().left;
  const y = event.clientY - canvas.getBoundingClientRect().top;

square.style.left = x + 'px';
  square.style.top = y + 'px';

const color = Math.random() > 0.5 ? 'blue' : 'red';
  square.classList.add(color);

canvas.appendChild(square);
  
  moveSquare(square);
}

function moveSquare(square) {
  const directionX = Math.random() > 0.5 ? 1 : -1;
  const directionY = Math.random() > 0.5 ? 1 : -1;

const intervalId = setInterval(() => {
    const currentLeft = parseInt(square.style.left);
    const currentTop = parseInt(square.style.top);

const newLeft = currentLeft + directionX;
    const newTop = currentTop + directionY;

if (newLeft > canvas.clientWidth - square.clientWidth || newLeft < 0) {
      directionX *= -1;
    }

if (newTop > canvas.clientHeight - square.clientHeight || newTop < 0) {
      directionY *= -1;
    }

square.style.left = newLeft + 'px';
    square.style.top = newTop + 'px';

checkCollision(square);
  }, 10);

function checkCollision(square) {
    const squares = document.querySelectorAll('.square');
    squares.forEach(otherSquare => {
      if (otherSquare !== square) {
        const rect1 = square.getBoundingClientRect();
        const rect2 = otherSquare.getBoundingClientRect();

if (
          rect1.left < rect2.left + rect2.width &&
          rect1.left + rect1.width > rect2.left &&
          rect1.top < rect2.top + rect2.height &&
          rect1.top + rect1.height > rect2.top
        ) {
          const newSquare = document.createElement('div');
          newSquare.classList.add('square', 'green');
          newSquare.style.left = rect1.left + 'px';
          newSquare.style.top = rect1.top + 'px';

canvas.appendChild(newSquare);

clearInterval(intervalId);
          square.remove();
          otherSquare.remove();

moveSquare(newSquare);
        }
      }
    });
  }
}
</script>
</body>
</html>