#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# [Newbie to p5.js] Making a mini avoidance game, hazard doesn't seem to be showing up?

edited August 2017

Hi there! I've recently taken up learning p5.js after a friend showed me its potential, and I wanted to try some simple but complete stuff, but I've not worked with anything like this for very long. I've ham-fisted together some of the examples from the p5.js site and youtube, and I got the movement of the player working, but I can't seem to display the hazards. I'm thinking the issue is purely somewhere between line 28 and 53, where the bulk of the hazard's code is but can't quite visualize all the variables physically. Any thoughts?

``````var canvasWidth = 700;
var canvasHeight = 400;
var yoff = 0.0;

function setup() {
createCanvas(canvasWidth, canvasHeight);
}

function draw() {
drawBackground();
drawCar();
}

//Car (player)
var car = {
x : 50,
y : 230,
draw : function() {
fill(0);
rect(this.x, this.y, 50, 50);
}
}

//Rock (enemies to avoid)
var rocks = [];

function rock(I) {
I.active = true;
I.yvelocity = 2;
I.width = 20;
I.height = 20;
I.y = Math.random() * (canvasHeight-I.height);
I.x = 400;
I.inBounds = function() {
return I.x >= 700 && I.x < canvasWidth + I.width;
};
I.draw = function() {
//fill(0); this comes up as an error every now and then, not sure how to add
//this attribute to the var in the array, unlike I did with the car.
//The rect attribute also comes up with an error sometimes
rect(I.x, I.y, I.width, I.height);
};
I.update = function() {
I.active = I.active && I.inBounds();
I.x -= I.xvelocity;
};
return I;

}

//Background and setting
function drawBackground() {
background(175, 213, 255);
//noStroke();
fill(225, 212, 160);
beginShape();
var xoff = 0;
// Iterate over horizontal pixels
for (var x = 0; x <= width; x += 10) {
// Calculate a y value according to noise, map to
var y = map(noise(xoff, yoff), 0, 1, 100,200);
vertex(x, y);
// Increment x dimension for noise
xoff += 0.05;
}
// increment y dimension for noise
yoff += 0.01;
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
}

//Car controls / drawing
function drawCar() {

car.draw();
if (keyIsDown(DOWN_ARROW)) {
if (car.y + 5 >= 350)
car.y = 350;
else
car.y += 5;
}
if (keyIsDown(UP_ARROW)) {
if (car.y <= 150)
car.y = 150;
else
car.y -= 5;
}
}

if(Math.random() < 0.05){
rocks.push(rock({}));
}

rocks = rocks.filter(function(rock){
return rock.active;
});
rocks.forEach(function(rock){
rock.update();
rock.draw();
});
``````
Tagged:

## Answers

• edited August 2017 Answer ✓

Any thoughts?

Well, there are some mal-indentations in your code which makes studying it harder. :-<
You may copy & paste your code in this site in order to "beautify" it: http://JSBeautifier.org O:-)
Also you should skip 1 line between blocks. Gets easier to visualize them. :)>-

• edited August 2017 Answer ✓

I've ham-fisted together some of the examples from the p5.js site and youtube, ...

• JS is a multi-paradigm language. That is, there are many divergent approaches to choose from.
• It's as if JS wasn't 1 but multiple programming languages sharing the same name! @-)
• Some of the problems to learn JS is most of its available tutorials follow their own particular paradigm and/or they're too old! :-&
• Given you've picked p5.js library, which is 1 of the many spinoffs of Processing Java, the easiest paradigm to follow is OOP (Object-Oriented Programming). ~O)
• And for OOP, nothing's better than `class` constructors, and instantiate objects outta them: \m/
https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
• We can always learn other paradigms much later, once we've got the basics btW. ;;)
• For now, I've converted your car and rocks[] objects to be created outta `class` structures instead.
• However, I still couldn't figure out 100% what they're supposed to do. X_X
• Therefore, you're gonna need to make your own adjustments to those 2 classes. 8-|
• And any doubts about classes in JS, just ask here again. :\">

``````class Car {
static get DIAM() {
delete this.DIAM;
return this.DIAM = 50;
}

static get FILL() {
delete this.FILL;
return this.FILL = color('blue');
}

constructor(x = Car.DIAM, y = height - Car.DIAM >> 1) {
this.x = x, this.y = y;
}

display() {
fill(Car.FILL).rect(this.x, this.y, Car.DIAM, Car.DIAM);
return this;
}

collision(rock) {
const { x: cx, y: cy, constructor: { DIAM: cd } } = this,
{ x: rx, y: ry, constructor: { DIAM: rd } } = rock;

return cx+cd > rx && cx < rx+rd && cy+cd > ry && cy < ry+rd;
}
}

const car = new Car;
``````

``````class Rock {
static get DIAM() {
delete this.DIAM;
return this.DIAM = 20;
}

static get SPD() {
delete this.SPD;
return this.SPD = -2;
}

static get FILL() {
delete this.FILL;
return this.FILL = color('brown');
}

constructor(x = width, y = random(height - Rock.DIAM)) {
this.x = x, this.y = y;
}

display() {
fill(Rock.FILL).rect(this.x, this.y, Rock.DIAM, Rock.DIAM);
return this;
}

update() {
this.x += Rock.SPD;
return this.isGone();
}

isGone() {
return this.x < -Rock.DIAM;
}
}

const rocks = [];
rocks.push(new Rock);
``````

• Brilliant! Thank you so much for your help, I think this should work for what I was going for. Sorry for being so vague, I don't know the depth of what can be understood from just reading the code. I reckon I might eyeball some of my friends tutorials, go back to basics, see if I can get some more understanding of this stuff =). Cheers

Sign In or Register to comment.