Jumping Pikachu

Goals

1. use classes, objects, and arrays to reorganize code in draw().

2. objects can be produced as many as we like.

3. have objects "communicate" with each other.

How to start?

step 1: class() for Pikachu. Functions include - can jump when pressed the key, can fall when the key is released.

step 2: class() for obstacles. Functions include - continuously move from the right of the screen to the left, appear randomly (but with enough time interval).

step 3: calculate when Pikachu and obstacles collide with each other.

Version 1

//move pika
move(yspeed, gravity) {
    this.yspeed = -10;
    this.gravity = 1;
    this.y = this.y + this.yspeed;
    this.yspeed += this.gravity;

🔗

Version 2

value() {
if(this.y == height - this.h){
this.yspeed = -15;
}
console.log('jump');
}

jump(){
this.y += this.yspeed;
this.yspeed += this.gravity;
this.y = constrain(this.y, 0 height - this.h);
}

🔗

Version 3

let timebetween = random(600, 3000);
if (millis()-startTime>timebetween) {
   ballGroup.push(new Pokeball(50, 50, -5));
    startTime = millis();
    console.log(millis());
}
    
    for (let b of ballGroup) {
    b.display();
    b.move();
}

🔗

Version 4

collide(ball){
  if(this.x + this.w >= ball.x &&    // r1 right edge past r2 left
     this.x <= ball.x + ball.w &&    // r1 left edge past r2 right
     this.y + this.h >= ball.y &&    // r1 top edge past r2 bottom
     this.y <= ball.y + ball.h) {    // r1 bottom edge past r2 top
   return true;
   }

reference: https://github.com/bmoren/p5.collide2D/blob/master/p5.collide2d.js

🔗

Final Version

🔗

Remaining Questions

1. colliding area

2. start page