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

No:33017

←

Prev Next

→

Série Rabiscos
Developer User13367｜Date and time 24/1/2 3:31:18
Build time 18.475 sec｜Game capacity 3.034KB｜

Script

Série Rabiscos - Jogo

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Série Rabiscos - Jogo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      text-align: center;
      padding-top: 50px;
    }
    h1 {
      color: #333;
    }
    #canvas {
      margin-top: 20px;
      border: 1px solid black;
    }
    #startButton {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: 1px solid #4CAF50;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Série Rabiscos - Jogo</h1>
  <canvas id="canvas" width="400" height="400"></canvas>
  <button id="startButton">Iniciar Jogo</button>
  
  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var score = 0;
    var timer;
    var isRunning = false;

// Função para desenhar o círculo na tela
    function drawCircle(x, y) {
      ctx.beginPath();
      ctx.arc(x, y, 20, 0, 2 * Math.PI);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath();
    }

// Função para atualizar a pontuação
    function updateScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Pontuação: " + score, 10, 20);
    }

// Função para mover o círculo
    function moveCircle() {
      canvas.addEventListener("click", function(event) {
        var rect = canvas.getBoundingClientRect();
        var x = event.clientX - rect.left;
        var y = event.clientY - rect.top;

// Verificar se o clique foi dentro do círculo
        if (x > circleX - 20 && x < circleX + 20 && y > circleY - 20 && y < circleY + 20) {
          score++;
          updateScore();
          resetCircle();
        }
      });
    }

// Função para iniciar o jogo
    function startGame() {
      if (isRunning) {
        clearInterval(timer);
        isRunning = false;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        document.getElementById("startButton").innerHTML = "Iniciar Jogo";
        document.getElementById("startButton").disabled = false;
      } else {
        isRunning = true;
        score = 0;
        updateScore();
        resetCircle();
        moveCircle();
        timer = setInterval(moveCircle, 1000);
        document.getElementById("startButton").innerHTML = "Finalizar Jogo";
        document.getElementById("startButton").disabled = true;
      }
    }

// Função para posicionar o círculo em uma nova posição
    function resetCircle() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      var randomX = Math.floor(Math.random() * (canvas.width - 40)) + 20;
      var randomY = Math.floor(Math.random() * (canvas.height - 40)) + 20;
      circleX = randomX;
      circleY = randomY;
      drawCircle(circleX, circleY);
    }

// Evento de clique no botão "Iniciar Jogo"
    document.getElementById("startButton").addEventListener("click", startGame);
  </script>
</body>
</html>