title: JS Galaxian Shooter enemies shooting
body: <p>Hey i'm trying to make a super simple Galaxian Shooter game. I'm having a problem in making all the enemies in the enemy list shoot separately. Right now, only one shoots bullets. I know there are a lot of better ways to do things in this code, I just haven't made it efficient yet and I'm fixing it all so please don't say anything about that. Lines 193,86,72, and 42 all have something do with the enemyBulletList, if that helps.</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 c = document.getElementById("myCanvas");
      ctx = c.getContext("2d");
      keys = [];
      width = 500;
      height = 500;
      bulletList = {};
      enemyBulletList = {};
      enemyList = {};
      enemyAmount = 10;
  
  var player = {
      x:400,
      y:450,
      speedX:7,
      speedY:7,
      width:32,
      height:32,
      hp:3,
      shootCdTimer:0,
      shootCd:1,
  };
  
  tickShootCooldown = function(){
   player.shootCdTimer--;
  }
      setInterval(tickShootCooldown,500);
      
  onGameStart = function(){
   generateEnemy();
      generateBullet();
      generateEnemyBullet();
      setInterval(changeEnemyDirection,2000);
      setInterval(changeEnemyDirection2,4000);
  }
      setTimeout(onGameStart,0);
  
  Bullet = function(id,x,y,speedX,speedY,width,height) {
      var asd = {
          x:x,
          y:y,
          speedX:speedX,
          speedY:speedY,
          name:'B',
          id:id,
          width:width,
          height:height,
          color:'black',
      };
      bulletList[id] = asd;
  }
  generateBullet = function() {
      var x = player.x;
      var y = player.y;
      var width = 5;
      var height = 15;
      var id = Math.random();
      var speedX = 0;
      var speedY = 15;
      Bullet(id,x,y,speedX,speedY,width,height);
  }
  EnemyBullet = function(id,x,y,speedX,speedY,width,height) {
      var asd = {
          x:x,
          y:y,
          speedX:speedX,
          speedY:speedY,
          name:'B',
          id:id,
          width:width,
          height:height,
          color:'black',
      };
      enemyBulletList[id] = asd;
  }
  generateEnemyBullet = function() {
      for(var key3 in enemyList){
          var x = enemyList[key3].x;
          var y = enemyList[key3].y;
      }
      var width = 5;
      var height = 15;
      var id = Math.random();
      var speedX = 0;
      var speedY = -15;
      EnemyBullet(id,x,y,speedX,speedY,width,height);
  }
      
  Enemy = function(id,x,y,speedX,speedY,width,height) {
      var asd = {
          x:x,
          y:y,
          speedX:speedX,
          speedY:speedY,
          name:'B',
          id:id,
          width:width,
          height:height,
          color:'red',
      };
      enemyList[id] = asd;
  }
  generateEnemy = function() {
      var x = 50;
      var y = 50;
      var width = 32;
      var height = 32;
      var id = 1;
      var speedX = 2;
      var speedY = 0;
      Enemy(id,x,y,speedX,speedY,width,height);
      Enemy(id*2,x*2,y,speedX,speedY,width,height);
      Enemy(id*3,x*3,y,speedX,speedY,width,height);
      Enemy(id*4,x*4,y,speedX,speedY,width,height);
      Enemy(id*5,x*5,y,speedX,speedY,width,height);
      Enemy(id*6,x,y*2,speedX,speedY,width,height);
      Enemy(id*7,x*2,y*2,speedX,speedY,width,height);
      Enemy(id*8,x*3,y*2,speedX,speedY,width,height);
      Enemy(id*9,x*4,y*2,speedX,speedY,width,height);
      Enemy(id*10,x*5,y*2,speedX,speedY,width,height);
  }
  changeEnemyDirection = function() {
      for(var key in enemyList){
          if(enemyList[key].speedX &gt; 0){
              enemyList[key].speedX *= -1;
          }
      }
  }
  changeEnemyDirection2 = function() {
      for(var key in enemyList){
          if(enemyList[key].speedX &lt; 0){
              enemyList[key].speedX *= -1;
          }
      }
  }
  
      
  function update() {
      ctx.clearRect(0, 0, width, height);
      ctx.fillRect(player.x,player.y,player.width,player.height);
      
      if(enemyAmount &lt; 1){
          generateEnemy();
          enemyAmount = 10;
      }
      
      if(player.x &lt; player.width/2){
          player.x = player.width/2;
      }
      if(player.x &gt; width - player.width){
          player.x = width - player.width;
      }
      if(player.y &lt; height-150){
          player.y = height-150;
      }
      if(player.y &gt; height-32){
          player.y = height-33;
      }
      
      if (keys[39]) { //right arrow
              player.x+=player.speedX;
      }
      if (keys[37]) { //left arrow
              player.x-=player.speedX;
      }
      if (keys[38]) { //up arrow
              player.y-=player.speedY;
      }
      if (keys[40]) { //down arrow
              player.y+=player.speedY;
      }
      if (keys[32]) { //space bar
              if(player.shootCdTimer&lt;=0){
                  generateBullet();
                  player.shootCdTimer = player.shootCd;
              }
      }
      
      for(var key in bulletList) {
          updateEntity(bulletList[key]);
      }
      for(var keyy in enemyBulletList) {
          updateEntity(enemyBulletList[keyy]);
      }
      
          for(var key2 in enemyList) {
              var isColliding = testCollisionEntity(bulletList[key],enemyList[key2]);
              if(isColliding) {
                  delete enemyList[key2];
                  enemyAmount --;
                  delete bulletList[key];
                  break;
              }
          }
      
      //for(var key3 in enemyList){
          var timer = Math.random();
          if(timer &lt;= 0.01){
              generateEnemyBullet(enemyList[key2]);
          }
     // }
      
      for(var key in enemyList){ //change to collision with enemy bullet
          updateEntity(enemyList[key]);
          var isColliding = testCollisionEntity(player,enemyList[key]);
          if(isColliding){
              player.hp = player.hp - 1;
          }
      }
      
      
      ctx.fillText(player.shootCdTimer,5,10);
  }
      setInterval(update,20);
      
  
  testCollisionEntity = function (entity1,entity2){       //return if colliding (true/false)
          var rect1 = {
                  x:entity1.x-entity1.width/2,
                  y:entity1.y-entity1.height/2,
                  width:entity1.width,
                  height:entity1.height,
          }
          var rect2 = {
                  x:entity2.x-entity2.width/2,
                  y:entity2.y-entity2.height/2,
                  width:entity2.width,
                  height:entity2.height,
          }
          return testCollisionRectRect(rect1,rect2);
         
  }
  testCollisionRectRect = function(rect1,rect2){
          return rect1.x &lt;= rect2.x+rect2.width
                  &amp;&amp; rect2.x &lt;= rect1.x+rect1.width
                  &amp;&amp; rect1.y &lt;= rect2.y + rect2.height
                  &amp;&amp; rect2.y &lt;= rect1.y + rect1.height;
  }
  
      
      
  updateEntity = function(something){
   updateEntityPosition(something);
   drawEntity(something);
  }
  
  updateEntityPosition = function(something){
   something.x += something.speedX;
      something.y -= something.speedY;
  }
  
  drawEntity = function(something){
   ctx.save();
   ctx.fillStyle = something.color;
   ctx.fillRect(something.x-something.width/2,something.y-something.height/2,something.width,something.height);
   ctx.restore();
  }
  
  
   
      
      
  document.body.addEventListener("keydown", function (e) {
      keys[e.keyCode] = true;
  });
  
  document.body.addEventListener("keyup", function (e) {
      keys[e.keyCode] = false;
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;"&gt;</code></pre>
  </div>
  </div>
  </p>