title: Remove an item that is drawn on to a canvas from an array. Where each item has a different purpose
body: <p>I'm currently making a game and I am at the point where I'm trying to implement powerups. For the power ups I use a for loop that creates an object which allows me to give them different characteristics.</p>
  
  <pre><code>var type;
  Powerups = [];
        for(var j = 0; j &lt; 325; j++) {
          if (type="undefined"){
            type = "scoreUp";
          } else if(type="scoreUp"){
            type = "horizonUp"
          } else if (type="horizonUp"){
            type = "newBall"
          } else if (type="newBall") {
            type = "scoreUp"
          }
          Powerups.push({
            "x": randInt(20,360),
            "y": 345 + (j * 240),
            "width": 10,
            "type": type
          })
        }
  </code></pre>
  
  <p>I then use rect circle collision that allows me to detect if the player collides with a powerup. If it does, the following line of code runs <code>Powerups.splice(j, 1)</code></p>
  
  <p>One thing that I've noticed is that the powerups never change and always increase score when a collision occurs. I think that this is because of the code that I use to remove the power up when colliding. </p>
  
  <p>Is there a way where I could make it work as intended </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var isMenu = true;
  var isPlaying = false;
  var testing = true;
  var gameOver = false;
  var pause;
  var pressingLeft = false;
  var pressingRight = false;
  var pressingP = false;
  var Platforms = [];
  var Powerups = [];
  var difficulty = 1;
  var playerGravity = 1;
  var Player = { color: "red", radius: 7.5, stepY: 1.5, x: 175, y: 75 };
  var Score = 0;
  var speed = 1;
  var type;
  var moveR = 2;
  var moveL = 2;
  
  
  function PlayerColliding(circle, rect) { 
    var distX = Math.abs(circle.x - rect.x - rect.width / 2);
    var distY = Math.abs(circle.y - rect.y - 20 / 2); 
    if (distX &gt; (rect.width / 2 + circle.radius) &amp;&amp; (distX) - 70 &lt; (rect.width / 2 + circle.radius)) return false;
    if (distY &gt; (20 / 2 + circle.radius)) return false;
  
    if (distX &lt;= (rect.width / 2)) return true;
    if (distY &gt;= (20 / 2)) return true;
  
    var dx = distX - rect.width / 2;
    var dy = distY - 20 / 2;
    return (dx * dx + dy * dy &lt;= (circle.radius * circle.radius)); 
  }
  
  function PowerColliding(circle, rect) { 
    var distX = Math.abs(circle.x - rect.x - rect.width / 2);
    var distY = Math.abs(circle.y - rect.y - 20 / 2); 
    if (distX &gt; (rect.width / 2 + circle.radius)) return false;
    if (distY &gt; (20 / 2 + circle.radius)) return false;
  
    if (distX &lt;= (rect.width / 2)) return true;
    if (distY &gt;= (20 / 2)) return true;
  
    var dx = distX - rect.width / 2;
    var dy = distY - 20 / 2;
    return (dx * dx + dy * dy &lt;= (circle.radius * circle.radius)); 
  }
  
  function drawBackground(Player) { 
    ctx.fillStyle = "black"; ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (isMenu &amp;&amp; !isPlaying) {
      Score = 0;
      createText("60px monospace", "white", "FallDown", 45, 130);
      createText("34px Arial", "white", "PLAY", 130, 240);
      createText("34px Arial", "white", "LEADERBOARD", 50, 300);
      createText("34px Arial", "white", "SETTINGS", 90, 360);
      createText("34px Arial", "white", "INFO", 130, 420);
  
    }
    if(isMenu &amp;&amp; isPlaying) {
      createText("60px monospace", "white", "Game Mode", 40, 130);
      createText("34px Arial", "white", "CLASSIC", 110, 240);
      createText("34px Arial", "white", "VERSUS", 113.5, 300);
    }
    else if(pause) {
      isPlaying = false;
      createText("60px monospace", "white", "PAUSED", 90, 130);
      createText("34px Arial", "white", "RESUME", 115, 260);
      createText("34px Arial", "white", "SETTINGS", 100, 340);
      createText("34px Arial", "white", "QUIT", 145, 420);   
    } 
  
    else if(!isMenu &amp;&amp; isPlaying) {
      if (testing) {
  
        Platforms = [];
        for (var i = 0; i &lt; 1300; i++) {
          Platforms.push({
  
            "x": 10,
            "y": 300 + (i * 60),
            "width": (Math.random() * canvas.width) - 60
  
          });
        }
        testing = false;
  
        Powerups = [];
        for(var j = 0; j &lt; 325; j++) {
          if (type="undefined"){
            type = "scoreUp";
          } else if(type="scoreUp"){
            type = "horizonUp"
          } else if (type="horizonUp"){
            type = "newBall"
          } else if (type="newBall") {
            type = "scoreUp"
          }
          Powerups.push({
  
            "x": randInt(20,360),
            "y": 345 + (j * 240),
            "width": 10,
            "type": type
          })
        }
      }
      if(Player.y&lt;=0) {
        restartGame()
      }
  
      var playerCollided;
  
      for (var i in Platforms) {
        ctx.fillStyle = "#00ffff";
        ctx.fillRect(10, Platforms[i].y, Platforms[i].width, 20);
  
        var totalTest = Platforms[i].width + 60;
        ctx.fillRect(totalTest + 30, Platforms[i].y, canvas.width - totalTest, 20);
  
        Platforms[i].y -= 1;
  
        if (!playerCollided) { 
          if (PlayerColliding(Player, Platforms[i])) {
            playerGravity = -1;
            playerCollided = true;
          } else {
            playerGravity = 2.5;
          }        
        }
  
      }
  
      var powerCollided;
  
      for (var j in Powerups) {
        ctx.fillStyle = "#ff00ff";
        ctx.fillRect(Powerups[j].x, Powerups[j].y, Powerups[j].width, 10);
        Powerups[j].y -= 1;
        if (!powerCollided) { 
          if (PowerColliding(Player, Powerups[j])) {
            powerCollided = true;
            Powerups.splice(j, 1)
            if(type="scoreUp") {
              Score += 75
            } else if (type="horizonUp") {
              moveR+= 0.5;
              moveL+=0.5;
              console.log("hup")
            }
          }        
        } 
      }
  
  
      displayScore();
      detectBorderCollision();
      detectPlayerCollision();
      drawPlayer();
      drawBorder();
    }
  
  
  
    if (Platforms.length === 7) Platforms = [];
  }
  
  
  function displayScore() {
    ctx.beginPath(); 
    Score +=1;
    ctx.font = "15px arial black";
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'black';
    ctx.fillText(Score, 180, 50);
    ctx.lineWidth = 0.25;
    ctx.strokeText(Score, 180, 50);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  }
  
  function detectBorderCollision() {
    if (Player.x &gt; 370 - Player.radius) {
      Player.x = 370 - Player.radius;
    } else if (Player.x &lt; 3.8 + Player.radius * 2) {
      Player.x = 3.8 + Player.radius * 2 
    }
  }
  
  function detectPlayerCollision() {
  
  }
  
  function randInt(min, max) {
    return ~~(Math.random() * (max - min + 1) + min);
  }
  
  function drawPlayer() {
    ctx.beginPath();
    ctx.fillStyle = Player.color;
    ctx.arc(Player.x, Player.y, Player.radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();
  
    Player.y += playerGravity;
  
    if (pressingRight) {
      Player.x += 2;
    } else if (pressingLeft) {
      Player.x -= 2;
    }
  
    /*
    ctx.fillStyle = "#00ffff"; ctx.fillRect(10, 160, 300, 20); */ }
  
  function drawBorder() {
    ctx.beginPath();
    ctx.strokeStyle = "#00ffff";
    ctx.lineWidth = 10;
    ctx.moveTo(5, 0);
    ctx.lineTo(5, 640);
  
    ctx.moveTo(375, 0);
    ctx.lineTo(375, 640);
    ctx.stroke();
    ctx.closePath();
  }
  
  
  function createText(font, color, value, posX, posY) {
    ctx.font = font;
    ctx.fillStyle = color;
    ctx.fillText(value, posX, posY)
  }
  
  function isInside(realX, realY, x1, x2, y1, y2) { 
    return (realX &gt; x1 &amp;&amp; realX &lt; x2) &amp;&amp; (realY &gt; y1 &amp;&amp; realY &lt; y2)
  }
  
  function drawGame() {
    drawBackground(Player);
  }
  
  function startDrawing() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawGame();
    requestAnimationFrame(startDrawing);
  }
  
  function restartGame() {
    isPlaying = false;
    isMenu = true;
    pause = false;
    Player.y= 75;
    Player.x = 175
    Platforms = [];
    var Score = 1;
    testing = true;
    pressingLeft = false;
    pressingRight = false;
    var moveR = 2;
    var moveL = 2;
  }
  
  function Init() { 
    requestAnimationFrame(startDrawing);
    canvas.addEventListener("click", function(evt) {
      var rect = canvas.getBoundingClientRect();
      var mouseX = evt.clientX - rect.left;
      var mouseY = evt.clientY - rect.top;
  
      if (isMenu &amp;&amp; !isPlaying) {
        if (isInside(mouseX, mouseY, 115, 230, 220, 270)) {
          isPlaying = true;
          isMenu = false;
        } else if (isInside(mouseX, mouseY, 35, 320, 300, 345)) {
          console.log("Leaderboard");
        } else if (isInside(mouseX, mouseY, 75, 270, 380, 430)) {
          console.log("Settings");
        }
      } else if (pause) {
        if(isInside(mouseX, mouseY, 110, 270, 230, 260)) {
          pause = false;
          isPlaying = true;
        } else if (isInside(mouseX, mouseY, 95, 270, 310, 345)) {
          console.log('settings')
        } else if (isInside(mouseX, mouseY, 140, 230, 390, 425)) {
          console.log('quit')
          restartGame();        
        }
      }
    });
  
    window.addEventListener("keydown", function(evt) {
      if (!isMenu &amp;&amp; isPlaying || pause) {
        if (evt.keyCode === 39) { // right
          pressingRight = true;
        } else if (evt.keyCode === 37) { // left
          pressingLeft = true;
        } else if (evt.keyCode === 80) {
          pressingP = true;
          pause = !pause;
          if(!pause) {
            isPlaying = true;
          }
        }
      }
    });
  
    window.addEventListener("keyup", function(evt) {
      if (!isMenu &amp;&amp; isPlaying) {
        if (evt.keyCode === 39) { // right
          pressingRight = false;
        } else if (evt.keyCode === 37) { // left
          pressingLeft = false;
        }
      }
    });
  }
  
  
  Init();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt; 
    &lt;head&gt;
      &lt;title&gt;Falldown&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;canvas id="canvas" width = "380" height= "640"&gt;&lt;/canvas&gt;
      &lt;script src="beta.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>