Question

我是使用Canvas的新手，所以我遇到了一些问题。我已经设置了这个小游戏，其中圆圈以一致的速率下降，但是我在确定是否选择了下降圆时遇到了问题。

所以基本上我需要帮助确定如何选择移动圆。你能在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()循环它们。

Javascript Canvas元素 - 检查是否单击了圆形元素

2 个答案: