Movement on the y-axis but not the x-axis??

benjim1996

Hey, I have some code from a university project, and am trying to implement key based movement. I have got the movement to work up and down along the y-axis, but cannot get it to move left and right along the x-axis, and am unsure why.

My code for the object, and movement is as follows:

`function bomberMan(){

this.x = 100; this.y = 100; this.xpseed = 0; this.yspeed = 0;

this.dir = function(x,y){ this.xspeed = x; this.yspeed = y; }

this.update = function(){ this.x = this.x + this.xpseed; this.y = this.y + this.yspeed; }

this.show = function(){ fill(0); rect(this.x, this.y, 15, 15); }

}

function keyPressed(){ if (keyCode === UP_ARROW){ bomber.dir(0, -1); }

if (keyCode === DOWN_ARROW){ bomber.dir(0,1); }

if (keyCode === LEFT_ARROW){ bomber.dir(-1,0); }

if (keyCode === RIGHT_ARROW){ bomber.dir(1,0); } }`

Any help as to why this doesn't seem to work would be greatly appreciated, thanks so much!

GoToLoop

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

benjim1996

Hey sorry! Here is the code:

function bomberMan(){

  this.x = 100;
  this.y = 100;
  this.xpseed = 0;
  this.yspeed = 0;

  this.dir = function(x,y){
    this.xspeed = x;
    this.yspeed = y;
  }

  this.update = function(){
  this.x = this.x + this.xpseed;
  this.y = this.y + this.yspeed;
  }

  this.show = function(){
    fill(0);
    rect(this.x, this.y, 15, 15);
  }

}

function keyPressed(){
  if (keyCode === UP_ARROW){
    bomber.dir(0, -1);
  } 

  if (keyCode === DOWN_ARROW){
    bomber.dir(0,1);
  } 

  if (keyCode === LEFT_ARROW){
    bomber.dir(-1,0);
  }

  if (keyCode === RIGHT_ARROW){
    bomber.dir(1,0);
  } 
}

GoToLoop

@ lines #5 this.xpseed = 0; & #14 this.x = this.x + this.xpseed;, property name xpseed seems a mistype to me. :-?

benjim1996

So it was, thank you very much! Been starting at the code for so long didn't notice

GoToLoop

Nothing like another pair of eyes, huh? $-)
BtW, I've got some additional tips... O:-)

Classes should be named using UpperCamelCase.
So bomberMan should be better named as Bomberman. :-bd

And while we're talking about classes, JS got keyword class for some time already:
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

I've just refactored your class Bomberman to use an actual class block below. Give it a try: B-)

// forum.Processing.org/two/discussion/22155/
// movement-on-the-y-axis-but-not-the-x-axis#Item_5

// GoToLoop (2017-Apr-23)

"use strict";

class Bomberman {
  static get SIZE() { return 15; }

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = this.vy = 0;
  }

  dir(vx, vy) {
    this.vx = vx;
    this.vy = vy;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
  }

  show() {
    fill(0).rect(this.x, this.y, Bomberman.SIZE, Bomberman.SIZE);
  }
}

jeremydouglass

JS got keyword class for some time already

@GoToLoop -- very interesting -- this was syntactic sugar added in ECMAScript 2015, is that right? Seems like using class would make JS code easier to read....

At present the style that is modeled by the p5.js object examples is still to use function for classes:

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

...and the p5.js documentation also recommends that function style -- explaining it in pre-class terms, but still valid:

JavaScript doesn't have a "class" statement like Java or C++, instead it just uses functions as classes. Defining a class is as easy as defining a function. https://github.com/processing/p5.js/wiki/JavaScript-basics

GoToLoop

This was syntactic sugar added in ECMAScript 2015, is that right?

Yup! Classes internally become classical prototype-based inheritance pattern:
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

However, if you consider such as sugar, for fairness' sake, Java's "enhanced foreach" loop is 1 as well.
For example, iterating over a PVector[] vecs array, under its "enhanced" loop below:

for (final PVector v : vecs)  println(v);

Java compiler would internally transpile it as something like this:

for (int i = 0; i < vecs.length; ++i) {
  final PVector v = vecs[i];
  println(v);
}

http://docs.Oracle.com/javase/8/docs/technotes/guides/language/foreach.html

Similarly, a JS' class would get transpiled as 1 function constructor().
And its non-static methods added to its prototype{} object. ~O)

GoToLoop

Seems like using class would make JS code easier to read...

That's why I'm insisting on spreading such news in this forum for about 2 years already! #:-S

Although JS language started being developed by Brendan Eich based mainly on Scheme language, he was asked later by Netscape to turn it into a Java spinoff:
https://en.Wikipedia.org/wiki/JavaScript#Beginnings_at_Netscape

Now at version 6 (ES2015), JS advances on becoming even more similar to Java w/ the introduction of the class syntax. \m/

It makes the transition from Java, Python, etc. to JS more pleasurable.
Processing's Java Mode sketches become much easier to be converted to p5.js, etc. B-)

It saddens me that p5.js & Khan's Pjs haven't embraced ES6 yet after more than a year available to browser's big names. :-<

They keep on teaching a much older & harder OOP pattern for beginners! X(

GoToLoop

... the style that is modeled by the p5.js object examples is still to use function for classes.

It's not enough to teach archaic JS' OOP, they even teach such using a low quality approach! [-(

• Pay attention now to @benjim1996's constructor() function for its Bomberman version.
• You'll see that its methods are defined inside the constructor() function itself.
• However, that's very memory inefficient, b/c those 3 methods are unnecessarily re-created for each new.
• The formal way to emulate OOP in JS is by attaching the methods as properties for their constructor()'s prototype{} object instead.
• Any transpiler-to-JS based language, such as TypeScript, CoffeeScript,etc., worth its beef, transpiles its class structure to ES5 JS following the prototype-based inheritance pattern. :)>-
• As proof, take a look at the link below on how my ES6 version for Bomberman class gets transpiled to ES5 using prototype-based inheritance pattern. $-)
• Notice that all 3 methods are attached later to Bomberman.prototype{} outside function Bomberman(x, y) {}:

http://www.TypeScriptLang.org/play/

// forum.Processing.org/two/discussion/22155/
// movement-on-the-y-axis-but-not-the-x-axis#Item_5

// GoToLoop (2017-Apr-23)

var Bomberman = (function () {
    function Bomberman(x, y) {
        this.x = x;
        this.y = y;
        this.vx = this.vy = 0;
    }

    Object.defineProperty(Bomberman, "SIZE", {
        get: function () { return 15; },
        enumerable: true,
        configurable: true
    });

    Bomberman.prototype.dir = function (vx, vy) {
        this.vx = vx;
        this.vy = vy;
    };

    Bomberman.prototype.update = function () {
        this.x += this.vx;
        this.y += this.vy;
    };

    Bomberman.prototype.show = function () {
        fill(0).rect(this.x, this.y, Bomberman.SIZE, Bomberman.SIZE);
    };

    return Bomberman;
}());