Question

Right now I have a circle that goes from the bottom to the top of a canvas. I attached a click event to the canvas and it console logs the coordinates of the click.

The ball also console logs the coordinates of where it is.

How can I add a circle element to 'elements' and how do I compare the canvas click event to the circle diameters coordinates.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/6;
var y = canvas.height-30;
var dx = 0;
var dy = -2;
   

canvas.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft;
    var y = event.pageY - elemTop;

    console.log("CLICKED: (x,y) ", x, y);

    elements.forEach(function(element) {
        if (y > canvas.y && y < canvas.y + canvas.ballRadius && x > canvas.x && x < canvas.x + canvas.ballRadius) {
            alert('clicked an element');
        }
    });

}, false);




function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();

    console.log("Ball moving: (x,y) ", x, ", ", y)
    
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }
    
    x += dx;
    y += dy;
}

setInterval(draw, 100);

https://jsfiddle.net/aL9amevj/

Answer 1

您可以使用css呈现圆圈，.animate()为动画元素设置，检查动画animation.currentTime是否小于animation.effect.computedTiming.duration / 2 .finished的一半以重置元素到原始状态。

.circle {
  position: relative;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: blue;
  left: calc(100vw - 100px);
  top: calc(100vh - 100px);
}

<button>click</button>
<div class="circle" style="animation-fill-mode:forwards"></div>
<script>
  var score = 0;
  var button = document.querySelector("button");
  var circle = document.querySelector(".circle");
  button.addEventListener("click", function() {
    this.setAttribute("disabled", "disabled");
    var curr = circle.animate([{
      left: "0px",
      top: "0px"
    }], {
      duration: 10000,
      iterations: 1
    });
    circle.onclick = (e) => {
      console.log(e.pageX, e.pageY);
      var t = curr.currentTime <
        curr.effect.computedTiming.duration / 2;
      if (t) {
        score += 1;
      }
      curr.cancel();
      circle.style.display = "none";
      circle.onclick = null;
      alert((t ? "added 1 " : "did not add 1 ") 
            + "to score: " + score);
    }
    curr.finished.then(() => {
      circle.onclick = null;
      setTimeout(function() {
        button.removeAttribute("disabled");
      }, 10)
    }).catch(e => {
      console.log(e);
      button.removeAttribute("disabled");
      circle.style.display = "block";
    })
  });
</script>

HTML5 detect a click on a moving circle element

1 个答案: