creating objects by a constructor

doeroe

Hi there,

here is my problem:

I'm trying to build rectangles (by a constructor), that move one after another from right to left, jump at the end of my canvas one row up, move back to the right end, jump one row up and so on.

Running the program shows the problem: as soon as one rectangle has reached the end of the canvas, the direction-move of every rectangle is changed by the move function. How can I fix this with the result that every rectangle reaches the end of the canvas before jumping one row up?

Thanks a lot!

the constructor :

function Rect(x, y, w, h) {
  this.w = w;
  this.h = h; 
  this.x = x;
  this.y = y - h/2;

  speed = 4;

  this.display = function () {
    rectMode(CENTER);
    noStroke();
    fill(255);
    rect(this.x, this.y, this.w, this.h);
  }

  this.move = function () {
    this.x = this.x - speed;

    if ((this.x < 0) || (this.x > width)){
      speed = speed * -1;
      this.y = this.y - this.h;
    }
  }
}

the sketch:

var rects = [];
var speed, w, h;


function setup() {
  w = 10;
  h = 10;
  createCanvas(600, 400);
  frameRate(40)

  for (var i = 0; i < 4; i++) {
    rects[i] = new Rect(width - i*1.5*w, height, w, h)
  }
}


function draw() {
  background(0);

  for (var i = 0; i < rects.length; i++){
    rects[i].display(); 
    rects[i].move(); 
  }
}

koogs

Do you see how everything in that first function is referenced as this.name, except for speed...

doeroe

Uh yes! Thanks!!! I must have been blind.

GoToLoop

In order to catch undeclared variables inside functions, we can add "use strict";as their 1st statement:

function Rect(x, y, w, h) {
  "use strict";

  this.w = w;
  this.h = h; 
  this.x = x;
  this.y = y - .5*h;

  speed = 4;
}

Now if we try to instantiate Rect's constructor function new Rect();, it's gonna throw:
"Uncaught ReferenceError: speed is not defined"

An even better choice is to place "use strict"; as the 1st statement inside a ".js" file.
This way, it's gonna activate Strict Mode for the whole script file. \m/

Go to this link for more detailed explanations: https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

GoToLoop

1 more thing:
We're all better off abandoning that outta-fashion prototypical pattern way of doing OOP in JS. :-q

Let's all embrace ES6's newest class keyword: :-bd
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

As a bonus, it's got "use strict"; built-in already. So it's safer and cleaner! :bz
Check it out how I've transformed your Rect constructor function as class Rect: *-:)

class Rect {
  constructor(x, y, w, h) {
    this.w = w, this.h = h; 
    this.x = x, this.y = y - (h>>1);
    this.speed = 4
  }

  static setRectGraph() { rectMode(CENTER).noStroke().fill(0xff); }

  display() {
    Rect.setRectGraph();
    rect(this.x, this.y, this.w, this.h);
  }

  move() {
    const radX = this.w>>1;
    this.x -= Rect.SPD;

    if (this.x < radX | this.x > width-radX) {
      this.speed *= -1;
      this.y -= this.h;
    }
  }
}

Lord_of_the_Galaxy

So JavaScript is even more similar to Java now? Nice. But I'm not sure everyone will like that...

GoToLoop

But I'm not sure everyone will like that...

No 1 is obliged to use latest ES6 features. We can all choose instead to be stuck w/ ES5! 8-}

Lord_of_the_Galaxy

Oh. So they have made a system that all sorts of people will like.

blindfish

An even better choice is to place "use strict"; as the 1st statement inside a ".js" file. This way, it's gonna activate Strict Mode for the whole script file.

This is actually NOT recommended - though the reasons why are relevant only when you apply a build process to your script files. If you use strict outside a function at the top of your file and the file is concatenated (e.g. in a build process) with legacy code that doesn't adhere to use strict then things will break badly...

So JavaScript is even more similar to Java now? Nice. But I'm not sure everyone will like that...

Indeed some people don't like it at all.

No 1 is obliged to use latest ES6 features. We can all choose instead to be stuck w/ ES5!

This comment appears to imply that ES6 features are there only to serve class-based programming; which is somewhat misleading. In fact many of the new features are just as useful when applying functional programming paradigms - rather than choosing to be stuck with stuffy class definitions and inheritance :P

doeroe

Thanks for all your input!