So I'm learning about how to use classes and I've made this code (it's exactly 100 lines long!) using P5.JS which is just supposed to draw three rectangles and three circles. One of the circles is able to be moved with the arrow keys, and the other two follow that one around. Here's the part that doesn't work: when the follower circles move over the squares, it's supposed to make them slow down as they move over it. I've tried everything.
function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
character1 = new character(250, 200, 30, 4);
follower1 = new enemy(100, 20, 30, 2);
follower2 = new enemy(200, 20, 30, 2);
obstacle1 = new obstacle(200, 200, 100, 50, follower1.x, follower1.y, follower1.s);
obstacle2 = new obstacle(300, 300, 50, 25, follower1.x, follower1.y, follower1.s);
obstacle3 = new obstacle(200, 400, 25, 50, follower1.x, follower1.y, follower1.s);
}
function draw() {
background(0);
character1.drawCharacter();
follower1.drawEnemy();
follower2.drawEnemy();
obstacle2.drawObstacle();
obstacle1.drawObstacle();
obstacle3.drawObstacle();
}
class character {
constructor(x, y, d, s) {
this.x = x;
this.y = y;
this.d = d;
this.s = s;
}
drawCharacter() {
fill(255);
ellipse(character1.x, character1.y, character1.d);
if (keyIsDown(UP_ARROW)) {
character1.y -= character1.s;
}
if (keyIsDown(DOWN_ARROW)) {
character1.y += character1.s;
}
if (keyIsDown(LEFT_ARROW)) {
character1.x -= character1.s;
}
if (keyIsDown(RIGHT_ARROW)) {
character1.x += character1.s;
}
}
}
class enemy {
constructor(x, y, d, s) {
this.x = x;
this.y = y;
this.d = d;
this.s = s;
}
drawEnemy() {
fill(255, 0, 0);
ellipse(this.x, this.y, this.d);
if (this.x < character1.x - this.d) {
this.x += this.s;
}
if (this.x > character1.x + this.d) {
this.x -= this.s;
}
if (this.y < character1.y - this.d) {
this.y += this.s;
}
if (this.y > character1.y + this.d) {
this.y -= this.s;
}
}
}
class obstacle {
constructor(x, y, w, h, enemyX, enemyY, enemyS) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
enemyX = enemyX;
enemyY = enemyY;
enemyS = enemyS;
}
drawObstacle(enemyX, enemyY, enemyS) {
fill(255);
rectMode(CENTER);
rect(this.x, this.y, this.w, this.h);
if (
this.x - this.w / 2 - 10 < enemyX &&
this.x + this.w / 2 + 10 > enemyX &&
this.y - this.h / 2 - 10 < enemyY &&
this.y + this.h / 2 + 10 > enemyY
) {
enemyS = 0.5;
} else {
enemyS = 2.5;
}
}
}
Try only having one obstacle. Here's my guess:
draw calls obstacle.drawObstacle three times, and if an enemy should be slowed down by obstacle1 or obstacle2, it doesn't matter because enemy.s will be reset by obstacle3.drawObstacle
I highly recommend that each of your character and enemy class have a draw and a move method, and put everything about how enemies move within the enemy class. Maybe the obstacle class should have a draw and maybe a isCollidingWith method that enemy.move would call.
Keeping all your logic for an class within the class means that you can do variants much more easily. For example, maybe later you'll want to have an enemy that's much slower but isn't hindered by obstacles at all. Having all the logic within the class makes that easy. Putting the logic within the obstacle class would quickly become a nightmare if you have enough different types of enemies.
Also, you could have a game object that holds everything about the game including character, enemies, and obstacles properties and draw and move methods that call the respective methods on character, enemy, and obstacle objects, and a destroy or quit method that clears its properties and such. (In some languages this is important, because if you were to add a game property to each piece in the game, they'd have handles to each other and since (in some languages) garbage collection only reaps objects that have no references to them, they'll take up memory much longer than you want.)