stuck again (Invaders)

tim50

How do I make these aliens into one variable? Once I start shooting them, they become a mess of confusion.

I have no idea what do to.

If you answer, please talk to me like you'd talk to a five year old... Thanks.

https://openprocessing.org/sketch/421935

Lord_of_the_Galaxy

Learn about ArrayList.

TfGuy44

First, stop having three classes for three different types of aliens. Have one class of aliens, and add a type variable to that class that determines what a specific alien looks like.

Then, add a boolean to that class as well, that determines if an alien exists any more. Do not draw aliens that do not exist. Do not bother updating their position. Do not cause the aliens to change direction because of an alien that does not exist.

Now when you shoot them, if an alien gets hit, all you need to do is change that value from true to false...

tim50

Hi Tf, I work in p5 and i think classes in p5 are called constructor functions. I have three aliens, where or how do I start to make one class. Or how do I start or where do I look to get going with regards to your first paragraph?

GoToLoop

... and I think classes in p5.js are called constructor() functions.

https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

... where or how do I start to make one class.

https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class

https://forum.Processing.org/two/discussion/21362/typeerror-undefined-is-not-an-object-evaluating-bunker-x#Item_7

jeremydouglass

@tim50 -- whether you choose to call p5.js classes "classes" or not...

https://github.com/processing/p5.js/wiki/JavaScript-basics#objects

...TfGuy's advice is that you have three of them, and you should combine them into one. So instead calling three different constructor functions "Alien()" "Alien1()" "Alien2()" you would pass a type argument to a single constructor function, "Alien()", which does something different depending on the argument: "Alien(0)" "Alien(1)" "Alien(2)"

• https://p5js.org/examples/objects-objects.html
• https://p5js.org/examples/objects-multiple-objects.html

tim50

I did this. Now I only have one class. I don't have an array. If I had an array, I'd only be able to make an unlimited amount of ONE of the ellipses- the first one. Does the term "type variable" mean something?

https://openprocessing.org/sketch/422108

TfGuy44

Each of your Aliens has an X position, right? Even though it is different for each Alien, you have an X position variable in your Alien class (or object constructor function), so each Alien has their own copy of an X position variable.

Do the same thing for a new variable, but store a number for the TYPE of Alien that each alien is. So Some Aliens will have a type-value of 0, some will have 1, and some will be 2. Then draw the aliens differently based on the value each alien has stored in it's own copy of the type variable.

jeremydouglass

Does the term "type variable" mean something?

No. It short for "what-TYPE-of-alien-is-it variable."

edit: example written in Processing(Java), not p5.js

class Alien{
  int alienType;
  Alien(int type){
    alienType = type;
  }
  void display(){
    if(alienType==0){
      // draw type 0
    }
    if(alienType==1){
      // draw type 1
    }
  }
}

tim50

My x and y positions are a mess.

translate(this.x, this.y); 
alien_2[m++] = new Alien2(-100 + (190*i), 25 + (190*j));
aliens[m++] = new Alien(-30 + (135.5*i), 435 + (105*j));
alien1[m++] = new Alien1(-30 + (105.4*i), 235 + (93*j));

tim50

I don't know what I'm doing and I have no idea where to go from here. I don't know (and it's going to take me a while to know) what a different class is going to mean about anything... Would you guys say, my code is completely off?

tim50

I'm really stuck. I think you guys are saying: Make one class and put the three aliens in one constructor and put them into an array then you have them as [0, 1, 2].... so I guess if that is what you are saying, I should be able to figure that out... but will that help the overall problem I have with hit detection?

TfGuy44

Here is an example. It has one Alien class, but there are three types of aliens. Notice that the class has a type variable, which determines the shape and color for each alien.

class Alien { // A SINGLE CLASS.
  int type; // WITH MANY TYPES.
  float x;
  Alien(int itype, float ix){
    type = itype;
    x = ix;
  }
  void draw(){
    switch(type){ // What type of alien is this?
      case 0: // Red square alien.
        fill(255,0,0);
        rect(x,200,40,40);
        break;
      case 1: // Green triangle alien.
        fill(0,255,0);
        triangle(x,220,x+20,180,x-20,180);
        break;
      case 2: // Blue circle alien.
        fill(0,0,255);
        ellipse(x,200,40,40);
        break;
    }
    // And draw a generic face.
    fill(255);
    ellipse(x-4,190,6,6);
    ellipse(x+4,190,6,6);
    fill(0);
    ellipse(x-4,190,2,2);
    ellipse(x+4,190,2,2);
    rect(x,200,16,2);
  }
}

Alien [] aliens; // A SINGLE ARRAY.

void setup(){
  size(800,400);
  rectMode(CENTER);
  ellipseMode(CENTER);
  noStroke();
  aliens = new Alien[3];
  for(int i = 0; i < aliens.length; i++){
    aliens[i] = new Alien(i, 200 * (i+1));
  }
}

void draw(){
  background(0);
  for(int i = 0; i < aliens.length; i++){
    aliens[i].draw();
  }
}

TfGuy44

Yes, that is exactly what I mean. And then, once you have one class for Aliens, you won't have to have three copies of the hit-detecting code. You will also be able to add a single boolean to the class that gets set to true when an Alien is hit.

tim50

Jeremy left this above. If I were to do this, would it help me at all? I can do this but there is no array so why would I want to do it?

https://p5js.org/examples/objects-multiple-objects.html

I can make one class and one constructor but I can't get those methods or whatever they are called into one array because the array uses the class name, not the constructor part that says: this.alien1 = function(). I don't know processing. That will just confuse me more. Where does the type variable thing go? Do I use push?

aliens = [];

 function Alien() {
   this.x = ___;
   this.y = ____;   

   this.alien1 = function(){
  }
   this.alien2 = function(){
  }
   this.alien3 = function(){
  }
}

for (var i = 0; i < 10; i++){
      aliens[i] = new Alien

NOTE: Should I just take a screenshot of the aliens, buy photoshop, create a png, and after a year of trying to figure all that out, use a png image for the aliens? or will that not work?

TfGuy44

Okay, here is the same example done using P5.js:

function Alien(itype, ix){

  this.type = itype;
  this.x = ix;

  this.draw = function() {
    push();
    translate(this.x,60);
    switch(this.type){ // What type of alien is this?
      case 0: // Red square alien.
        fill(255,0,0);
        rect(0,0,40,40);
        break;
      case 1: // Green triangle alien.
        fill(0,255,0);
        triangle(-20,-20,20,-20,0,20);
        break;
      case 2: // Blue circle alien.
        fill(0,0,255);
        ellipse(0,0,40,40);
        break;
    }
    // And draw eyes on it.
    fill(255);
    ellipse(-4,-10,6,6);
    ellipse(4,-10,6,6);
    fill(0);
    ellipse(-4,-10,2,2);
    ellipse(4,-10,2,2);
    pop();
  } // End of draw()

} // End of Alien()

var aliens = [];

function setup(){
  createCanvas(windowWidth,windowHeight);
  rectMode(CENTER);
  ellipseMode(CENTER);
  noStroke();
  for(var i = 0; i < 3; i++){
    aliens.push(new Alien(i, 60 * (i+1)));
  }
}

function draw(){
  background(128);
  for(var i = 0; i < aliens.length; i++){
    aliens[i].draw();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

See how there is one Alien function? Any object created by the Alien() constructor function is an Alien. But there are three types of Aliens, and the type is passed to the Alien() function as a parameter. The stored type then determines how the Alien actually looks when it is drawn.

The "type" variable could be named anything. The concept here is that each Alien has it's own copy of the variables used in the Alien() constructor function, and "type" is just one of them. You can now add other variables (and behavior) to this single class.

tim50

Thanks Tf... Sorry, just frustrated. I better go away from it for a bit.