JavaScript的畫布元素 - 檢查是否點擊圈元素

Question

我是新使用畫布，所以我有幾個問題。我有這樣一個小小的遊戲，圈子以一致的速度下降，但我在確定是否選擇了一個下降的圓圈時遇到了問題。

所以基本上我需要幫助確定如何選擇一個移動的圓。你可以在ctx元素上添加事件監聽器嗎？如果可能的話，我也不想使用jQuery。

感謝您的任何幫助！

var myGamePiece; 
var range = document.getElementById("myRange"); 
var rangeValue = document.getElementById("sliderValue"); 
var score = document.getElementById("score"); 
var canvas = document.getElementById("canvasElement"); 

var speedValue = 1; 
var counter = 0; 
canvas.width = 480; 
canvas.height = 350; 


canvas.addEventListener("click", function(){ 
    counter += 1; 
    score.innerHTML = counter; 
}); 

range.onchange = function(){ 
    rangeValue.innerHTML = this.value; 
    speedValue = this.value; 
}; 

function startGame() { 
    var randomXCord = Math.random() * (450 - 100) + 100; 
    var randomSize = Math.random()* (50 - 10) + 10; //random dot size between 100px - 10px 

    //check to make sure dots will not go off the side of the screen 
    if(randomSize >= 30){ 
     if(randomXCord >= 400){ 
      randomXCord -= 50; 
     } 
    } 
    myGamePiece = new component(10, 10, "red", randomXCord, 10, randomSize); 
    console.log(randomSize); 
    console.log(randomXCord); 

    myGameArea.start(); 
}; 

var myGameArea = { 

    start : function() { 
     document.body.insertBefore(canvas, document.body.childNodes[0]); 
     this.context = canvas.getContext("2d"); 
     var interval = setInterval(updateGameArea, 20); 
    }, 
    clear : function() { 
     this.context.clearRect(0, 0, canvas.width, canvas.height); 
    } 
}; 

function component(width, height, color, x, y, size) { 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y; 
    console.log(this.width); 
    this.radius = size; 
    this.update = function(){ 
     ctx = myGameArea.context; 
     ctx.beginPath(); 
     ctx.fillStyle = color; 
     ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); 
     ctx.fill(); 
    }; 
}; 

function updateGameArea() { 
    myGameArea.clear(); 
    //makes the dot go vertically down then calls update 
    myGamePiece.y += speedValue; 
    //check to see if dot if off the page 
    if(myGamePiece.y >= canvas.height){ 
     myGameArea.clear(); 
     // startGame(); 
     //setTimeout(function() { startGame(); }, 1000); 

    } 
    myGamePiece.update(); 
}; 

Answer 1

你可以使用this answer找出鼠標的位置單擊時，並使用此：

(mouseXpos - circleXpos)^2 + (mouseYpos - circleYpos)^2 < circleRadius^2

檢查，如果鼠標位置在圓圈內。 這是假定您的圓的x和y座標位於中心。

此檢查應在您的updateGameArea()函數中完成。

Answer 2

canvas是您繪製的元素。你在它上面畫的東西不是元素，因此events不能被添加。您可以將您的畫布視爲您使用JavaScript繪製的圖像。當您在context（您命名爲ctx）上運行函數時，您正在使用canvas進行繪圖，而不是添加元素。一旦你畫出了你的圈子，它就是圖像的一部分。

您可以添加event listener到canvas本身，並得到您click event的座標，然後計算，看是否點擊打圓圈內（因爲你知道圓的位置和大小，可以計算）。要做到這一點，你應該有你當前存儲的圓圈位置。

//save your circle somewhere before drawing 

var myGameAreaRect = myGameArea.getBoundingClientRect(); 

myGameArea.addEventListener("click", event => { 

    var click = { 
    x: event.pageX - window.scrollX - myGameAreaRect.left, 
    y: event.pageY - window.scrollY - myGameAreaRect.top 
    } 

    var clickHitCircle = 
    Math.sqrt(
     Math.pow((click.x - circle.x), 2) + 
     Math.pow((click.y - circle.y), 2) 
    ) < circle.radius 
    ; 

    //clickHitCircle === true if click was inside the circle 
    if(clickHitCircle) { 
    //do stuff 
    } 

}); 

如果您一次有多個圈，只是把他們都在一個數組和循環遍歷他們Array.prototype.forEach()例如。