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

No:19150

122

←

Prev Next

→

Crie um jogo chamado ying yang
Developer User8225｜Date and time 23/10/1 22:10:00
Build time 12.169 sec｜Game capacity 2.412KB｜

Script

Yin Yang Game

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1>Yin Yang Game</h1>

// Função chamada quando a página é carregada
    window.onload = function() {
      // Obtém o elemento canvas do HTML
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');

// Define a frequência de atualização do jogo
      var framesPerSecond = 30;
      setInterval(update, 1000 / framesPerSecond);

// Configura o evento de toque na tela para movimentar o yin yang
      canvas.addEventListener('touchmove', function(event) {
        var touch = event.touches[0];
        yingYangX = touch.pageX - canvas.offsetLeft;
        yingYangY = touch.pageY - canvas.offsetTop;
      });

// Inicia a animação do jogo
      update();
    }

// Função responsável pela atualização e desenho do jogo
    function update() {
      // Move o yin yang
      yingYangX += yingYangSpeedX;
      yingYangY += yingYangSpeedY;

// Detecta colisão com as bordas do canvas
      if (yingYangX + 20 > canvas.width || yingYangX - 20 < 0) {
        yingYangSpeedX *= -1;
      }
      if (yingYangY + 20 > canvas.height || yingYangY - 20 < 0) {
        yingYangSpeedY *= -1;
      }

// Limpa o canvas
      canvasContext.fillStyle = 'white';
      canvasContext.fillRect(0, 0, canvas.width, canvas.height);

// Desenha o yin yang
      canvasContext.fillStyle = 'black';
      canvasContext.beginPath();
      canvasContext.arc(yingYangX, yingYangY, 20, 0, Math.PI * 2, false);
      canvasContext.closePath();
      canvasContext.fill();

canvasContext.fillStyle = 'white';
      canvasContext.beginPath();
      canvasContext.arc(yingYangX - 10, yingYangY, 10, 0, Math.PI * 2, false);
      canvasContext.closePath();
      canvasContext.fill();

canvasContext.fillStyle = 'black';
      canvasContext.beginPath();
      canvasContext.arc(yingYangX + 10, yingYangY, 10, 0, Math.PI * 2, false);
      canvasContext.closePath();
      canvasContext.fill();

// Chama a função novamente para a próxima atualização
      requestAnimationFrame(update);
    }
  </script>
</body>
</html>