Question

我正在制作画布动画。我们的想法是，蓝色圆圈每次点击都会加速，但出于某种原因，经过3或4次点击，它会停止加速并减速。谁能帮我弄明白我哪里出错了？我认为问题在bClick函数内，因为其他一切正常。

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
//Variables for the blue ball
var bx = Math.random() * innerWidth;
var by = Math.random() * innerHeight;
var bbdx = 1.5;
var bbdy = 1.5;
var bRadius = 12;
//Variables for the red ball
var rx = Math.random() * innerWidth;
var ry = Math.random() * innerHeight;
var rrdx = 1.5;
var rrdy = 1.5;
var rRadius = 12;
//Mouse coordinate object
/*var mouse = {
  x: undefined,
  y: undefined
}*/
function bCircle(){
    c.beginPath();
    c.arc(bx, by, bRadius, 0, Math.PI * 2, false);
    c.strokeStyle = "white";
    c.stroke();
    c.fillStyle = "cornflowerblue";
    c.fill();
    c.closePath();

  //Ball bouncing Conditional



}
function rCircle(){
        c.beginPath();
        c.arc(rx, ry, rRadius, 0, Math.PI*2, false);
        c.strokeStyle = "pink";
        c.stroke();
        c.fillStyle = "red";
        c.fill();
        c.closePath();
        //Ball Bouncing Conditional



      }

  //Interactivity function
function bClick(e){
  var mouseX = e.clientX;
  var mouseY = e.clientY;
  //Tracking clicks on blue circle
  if(mouseX - bx < 50 && mouseX - bx > -50
  && mouseY - by < 50 && mouseY - by > -50){
    bbdx ++;
    bbdy ++;
   
  }
  //Tracking clicks on red circle
  if(mouseX - rx < 50 && mouseX - rx > -50
  && mouseY - ry < 50 && mouseY - ry > -50){
      console.log("bad");
  }
}
document.addEventListener("click", bClick);
//event listerner syntax: element.addEventListener(event, function, useCapture);


        function draw(){
          c.clearRect(0, 0, innerWidth, innerHeight);
          bCircle();
          rCircle();


          //bCircle Conditional
         if (bx + bRadius > innerWidth || bx - bRadius < 0){
            bbdx = -bbdx;
          }
          //Conditional to mall the ball bounce up and down
          if (by + bRadius > innerHeight || by - bRadius < 0){
            bbdy = -bbdy;
          }
          //Add 1 to x continously for it to move
            bx += bbdx;
          //Add 1 constantly to y for it to move up and down also
            by += bbdy;

            //rCircle Conditional
            if (rx + rRadius > innerWidth || rx - rRadius < 0){
              rrdx = -rrdx;
            }
            if (ry + rRadius > innerHeight || ry - rRadius < 0){
              rrdy = -rrdy;
            }
            rx += rrdx;
            ry += rrdy;

            /*interactivty Conditional
            if (mouse.x - bbdx < 50 && mouse.x - bbdx > -50
              && mouse.y - bbdy < 50 && mouse.y - bbdy > -50){
              rCircle();
            }*/
            //console.log(bx, by);

            window.requestAnimationFrame(draw);

        }


draw();

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset="UTF-8">
  <title>Ball</title>

  <style type = "text/css">
    canvas {
      border: 1px solid black;
    }
    body {
      margin: 0;
      background-color: black;
    }
    </style>
</head>

<body>
  <canvas></canvas>

  <script src = "ball.js" type = "text/javascript"></script>
  
</body>

</html>

Answer 1

更新您的点击功能。这种情况正在发生，因为如果你的球在你增加时它有一个负速度，事实上你没有让它更快，但速度更慢，所以根据你应该增加或减少的标志，我将保持解决方案打开，Math.sign是在ie中不可用，所以你应该使用三元组来增加或减少，

https://jsfiddle.net/ibowankenobi/bnwzfq2q/1/

function bClick(e){
  var mouseX = e.clientX;
  var mouseY = e.clientY;
  //Tracking clicks on blue circle
  if(mouseX - bx < 50 && mouseX - bx > -50
  && mouseY - by < 50 && mouseY - by > -50){
   bbdx = (Math.abs(bbdx)+1)*Math.sign(bbdx);
   bbdy = (Math.abs(bbdy)+1)*Math.sign(bbdy);

  }
  //Tracking clicks on red circle
  if(mouseX - rx < 50 && mouseX - rx > -50
  && mouseY - ry < 50 && mouseY - ry > -50){
      console.log("bad");
  }
}

Answer 2

请注意bbdx＆amp; bbdy可能是负值，因此使用++增加它们意味着减慢球的速度。只需尝试将其替换为例如bbdx * = 1.5;

为什么我的画布动画在应该加速时会减速？

2 个答案: