title: Stuck at Goomba's speed and cancelling animation at game over
body: <p>I'll try to be as precise as possible.</p>
  
  <p><strong>First Issue:</strong> If you look in the code, I have a <code>drawObjects</code> function which calls <code>collisionDetection</code> function.</p>
  
  <p>Inside <code>collisionDetection</code> if <code>player(mario)</code> touches the <code>object(Goomba)</code> then game should be over and animation should stop.</p>
  
  <p>However, even on cancelling the animation frame, the animation won't stop somehow. </p>
  
  <p><strong>Second Issue:</strong> I want to speed up <code>Objects(Goomba)</code> but if I try to reduce their <code>x</code> position by more than two (i.e. <code>objects[i].x -= 3</code> for example), the <code>object(goomba)</code> doesn't show at all except for the first one.</p>
  
  <p>So, in this issue what I seek is, is there another better way to speed up goombas?</p>
  
  <p>Code :</p>
  
  <pre><code>        var startTime  = 0;
          var rAF;
  
          var cnv = document.getElementById("canvas");
          var ctx = cnv.getContext("2d");
  
          var cWidth = cnv.width = window.innerWidth-10;
          var cHeight = cnv.height = window.innerHeight-20;
  
  
          var bgImg = new Image();
          var playerImg = new Image();
          var goombaImg = new Image();
  
          bgImg.src = "images/mariobg.png";
          playerImg.src = "images/mario.png";
          goombaImg.src = "images/goomba.png";
  
          var game = {
          state : true,
          score : 0
          }
  
          var player = {
          x : 15,
          y : cHeight-110,
          w : 75,
          h : 75,
          canJump : true,
          xVelocity : 0,
          yVelocity : 0
          }
  
  
          var objects = [];
          objects[0]={
          x : cWidth-110,
          y : cHeight-90,
          w : 50,
          h : 50,
  
          }
  
          var controller = {
          moveLeft : false,
          moveUp : false,
          moveRight : false,
          keyListener : function(event){
          var keyState = (event.type == 'keydown') ? true : false ;
  
          switch (event.keyCode) {
          case 37:
          controller.moveLeft = keyState;
          break;
  
          case 38:
          controller.moveUp = keyState;
          break;
  
          case 39:
          controller.moveRight = keyState;
          break;
          }
          }
  
          }
  
  
  
  
          document.addEventListener('keydown', controller.keyListener);
          document.addEventListener('keyup', controller.keyListener);
  
  
  
          function draw(timestamp){
          //console.log(performance.now);
          ctx.drawImage(bgImg, 0, 0 , cWidth, cHeight);
          drawPlayer();
          drawObjects();
          drawScore();
          drawDevInfo();
          rAF = requestAnimationFrame(draw);
          }
  
  
          function drawPlayer(){
          if(controller.moveLeft){
          player.xVelocity -= 0.5;
          }
  
          if(controller.moveRight){
          player.xVelocity += 0.5;
          }
  
          if(controller.moveUp &amp;&amp; player.canJump == true){
          player.yVelocity -= 25;
          player.canJump = false;
  
          }
  
  
          player.x += player.xVelocity;
          player.y += player.yVelocity;
          player.xVelocity *= 0.95;
          player.yVelocity *= 0.95;
          player.yVelocity += 1.3;
  
  
          if(player.y &gt; cHeight-110){
          player.y = cHeight-110;
          player.yVelocity = 0; 
          player.canJump = true;
          }
  
          if(player.x &gt; cWidth || player.x &lt; 0){
          player.x = 0; 
          }
          ctx.drawImage(playerImg, player.x, player.y, player.w, player.h);
          }
  
          function drawObjects(){
  
          for (let i = 0; i &lt; objects.length; i++) {
          ctx.drawImage(goombaImg, objects[i].x, objects[i].y, objects[i].w, objects[i].h);
  
          objects[i].x-=1;
  
  
          //var now = Date.now;
  
          //timeElapsed = now - startTime;
          //console.log(timeElapsed);
  
          if(objects[i].x == cWidth/2){
          objects.push({
              x : cWidth-110,
              y : cHeight-90,
              w : 50,
              h : 50 
          });
          }
  
          collisionDetection(i);        
          }
          }
  
  
  
          function collisionDetection(i){
          if (player.x+player.w &gt; objects[i].x &amp;&amp; player.x &lt; objects[i].x+objects[i].w &amp;&amp; (player.y+player.h &gt; objects[i].y)) {
          ctx.font = "25px Verdana";
          ctx.fillText("GAME OVER",cWidth/2, cHeight/2 ); 
          drawScore();
          drawDevInfo();
          cancelAnimationFrame(rAF);
  
          }
          else {
          game.score = game.score + 1;
          }
          }
  
          function drawScore(){
          ctx.font = "15px Verdana";
          ctx.fillText("Score : "+ game.score, 15, 20);
          ctx.fillStyle="white";
          }
  
          function drawDevInfo(){
          ctx.font = "15px Verdana";
          ctx.fillText("@KaushikCodeArts - 2019 ", cWidth/2-15, 20 );
          ctx.fillStyle="white";
          }
  
          //draw();
          rAF = requestAnimationFrame(draw);
  </code></pre>