OnHit wall detection Problem

p5.js
1

i am trying to make a game in p5.js and i need a wall and when i hit that wall it stops, i’ve tryed using constrain and the var d = dist thing but nothing works, here is my source code:

var ob;
var wall;
var scl = 20;
var PlayerPos;

this.wallx = 100;
this.wally = 0;

function setup() {
  ob = new object();
  createCanvas(600, 600,)
}

function draw() {
  background(0)

  ob.update()
  ob.show()

  fill(7, 0, 255)
  wall = rect(this.wallx, this.wally, 20, 100)
}


function keyPressed() {
  if (keyCode === UP_ARROW) {
    ob.dir(0, -1);
} else if(keyCode === DOWN_ARROW) {
    ob.dir(0, 1);
} else if(keyCode === LEFT_ARROW) {
    ob.dir(-1, 0);
} else if(keyCode === RIGHT_ARROW) {
    ob.dir(1, 0);
}
}
function object() {
  this.x = 0;
  this.y = 0;

  this.xspeed = 2;
  this.yspeed = 0;

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

    this.x = constrain(this.x, 0, width-scl);
    this.y = constrain(this.y, 0, height-scl);


  }

  this.show = function() {
    fill(255)
    rect(this.x, this.y, scl, scl);
  }

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

I have attempted to do a demo using your original code. However, I failed and I organized it a bit but I tried not to change it too much, or at least you should be able to understand your new layout as it is based on your original base code. I have combined p5js with other structures as you will see. Notice this code has potential for further improvement. The main one is to choose a better reference frame for drawing figures. I believe, instead of drawing rectangles based on the rectangle’s corner mode, you could use the center mode instead as it could make collision detection easier to manage if you decide to expand this demo into a full flesh 2D demonstration.

Other potential improvements: could Wall and object extend from a similar parent class? Also, is there a better way to attach functions to your objects? Of course, these changes are not required for this demo but it would be a good exercise.

For the demo below, notice I have setup the initial speed of the object to zero so you need to provide some input to get it going. Also, the object is limited in motion along the height of the sketch. This is related to the tempy variable. I didn’t bother to fix it as you will need to rewrite this section if you are looking to use it in a 2D demo. For the time being, you can disable any line associated to tempy.

If something is not clear, please ask. One more thing. You should consider dropping the usage of var and shift to usage of let and const.

Kf

var wall= new Array();
var ob;
var PlayerPos;



function setup() {
  ob = new object();
  createCanvas(600, 600);

  wall[0]=new Wall(width/2, 0, 20, 100);
}

function draw() {
  background(0)

    ob.update(wall[0])
    wall.forEach(function(w) { ob.update(w); } );

    ob.show()
    wall.forEach(function(w) { w.show(); } );
  //wall.forEach(w=>w.show());   //Previous line written in Fat arrow notation
}


function keyPressed() {  
  ob.processUsrInput(keyCode);
}

//=====================================================
//            Wall        
//=====================================================
function Wall(xx, yy, ww, hh) {
  this.wallx = xx;
  this.wally = yy;
  this.wallw = ww;
  this.wallh = hh;

  this.show = function() {
    fill(7, 0, 255)
      rect(this.wallx, this.wally, this.wallw, this.wallh)
  }
}



//=====================================================
//            object        
//=====================================================
function object() {
  this.x = 0;
  this.y = 0;
  this.scl=20;

  this.xspeed = 0;
  this.yspeed = 0;

  this.update = function(cwall) {
    var tempx=this.x;
    var tempy=this.y;

    this.x = this.x + this.xspeed;
    this.y = this.y + this.yspeed;

    if (this.x>=cwall.wallx-this.scl) {
      this.x=tempx;
    }

    if (this.y>=cwall.wally+cwall.wallh) {
      this.y=tempy;
    }
  }

  this.show = function() {
    fill(255);
    rect(this.x, this.y, this.scl, this.scl);
  }

  this.processUsrInput=function(inkey) {
    if (inkey === UP_ARROW) {
      ob.dir(0, -1);
    } else if (inkey === DOWN_ARROW) {
      ob.dir(0, 1);
    } else if (inkey === LEFT_ARROW) {
      ob.dir(-1, 0);
    } else if (inkey === RIGHT_ARROW) {
      ob.dir(1, 0);
    }
  }

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