Почему моя анимация холста замедляется, когда она должна ускоряться? - PullRequest
Новая
       0

Почему моя анимация холста замедляется, когда она должна ускоряться?

0 голосов
/ 29 апреля 2018

Я работаю над холстом анимации. Идея состоит в том, что синий круг должен ускоряться при каждом нажатии, но по какой-то причине после 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>

Ответы [ 2 ]

0 голосов
/ 29 апреля 2018

обратите внимание, что bbdx & bbdy могут иметь отрицательные значения, поэтому увеличение их с помощью ++ означает замедление шага. Просто попробуйте заменить это, например, bbdx * = 1,5;

0 голосов
/ 29 апреля 2018

Обновите функцию щелчка. Это происходит потому, что если у вашего мяча отрицательная скорость, когда вы увеличиваете его, то, на самом деле, вы делаете это не быстрее, а медленнее, поэтому на основании знака, который вы должны увеличивать или уменьшать, я оставлю решение открытым, 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");
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...