Question

I am sort of new to JavaScript (Just started using it in school) and I have been looking around to get this program done for class. For some reason I just cant get it to work properly (with whatever I currently am working on) I am trying to fill up an Player Object with an array of Missle Objects… Before switching my code to this use of objects, I was able to display the “missles” but now I’m stuck.

I am only placing my necessary code:

function Player(){
    this.x = c.width/2;
    this.y = c.height-20;
    this.w = 50;
    this.h = 10;
    this.dx = 30;
    this.score = 0;
    this.missles = new Array();}

function Missle(x, y){
    this.x = x;
    this.y = y;
    this.dy = 10;
    this.w = 8;
    this.h = 8;
    this.visible = "false";}


function init1P(){
if (playing == "true"){
    player = new Player();
    animate1P();
}}

function animate1P(){
cntxt.clearRect( 0, 0, c.width, c.height );

cntxt.fillStyle="#000000";
cntxt.fillRect(0,0,c.width,c.height);

cntxt.fillStyle="#ffffff";
cntxt.font="34px Verdana";
cntxt.fillText(player.score, 10, c.height-10);  

cntxt.fillStyle="#ffffff";

cntxt.fillRect(player.x,player.y,player.w,player.h);

//cntxt.fillRect(comp.x,comp.y,comp.w,comp.h);

if ( player.missles.visible == "true" ) {
    cntxt.fillStyle = "#FF0000";
    cntxt.fillRect( player.missles.x, player.missles.y, player.missles.w, player.missles.h );
    //isHit();
    if ( hit == "false" ) {
        player.missles.y -= player.missles.dy;
        if ( player.missles.y <= 0 ) {
            player.missles.visible = "false";
        }
    }
}

// request new frame
if ( playing == "true" ) {
    requestFrame( function() { animate1P(); } );
}

//moveComp();
checkBoundaries(player);
//checkBoundaries(comp);
//isHit(player);
//isHit(comp);  }

function shoot() {
player.missles.push(new Missle(player.x + player.w/2, player.y + 10));
player.missles.visible = "true";
hit = "false";}

Answer 1

Your player is supposed to have several missles, which you denoted by using an array:

this.missles = new Array();

When using an array, you have to loop (using e.g. for) to apply something to each element. So, doing player.missles.visible = "false" really just sets a property on the array itself, and not on each element. You’d have to do:

for(var i = 0; i < player.missles.length; i++) {
  player.missles[i].visible = "false";  // player.missles[i] is one item on each iteration
}

The same goes for the drawing: fetch and update data of each missle in a loop:

for(var i = 0; i < player.missles.length; i++) {
  if ( player.missles[i].visible == "true" ) {
    // ...
}

Also, note that there are booleans in JavaScript. You can use just true/false, and you can then directly use an if like this:

if(player.missles[i].visible) {
  // ...