Game with arrow key

p5.js Coding Questions
1

Here is three things I want to do

  1. Keep the red ball remain in the canvas when it meets the boundary.
    (the whole interface disappears when it meets the boundary)

  2. Create a random “Green” target, and the goal is to use the red ball to hit this
    target, every successful hit will score1-point.

  3. Re-create a new random “Yellow Target” when the last one is hit.

 function setup() {
   createCanvas(300, 400);
 }

 let x = 150;
 let y = 150;
 let score = 0;

 function draw() {
     if (keyIsDown(LEFT_ARROW)) {
       x -= 5;
     }
     if (keyIsDown(RIGHT_ARROW)) {
       x += 5;
     }
     if (keyIsDown(UP_ARROW)) {
       y -= 5;
     }
     if (keyIsDown(DOWN_ARROW)) {
       y += 5;
     }

     background(220);
     fill(255, 0, 0);
      if (x <= width-20 && x >= 20) {
     ellipse(x, y, 30);


     fill(0, 255, 0);
     ellipse(20, 30, 30);
     fill(0);
     text(score, 10, 20);
   }
 }

I have no idea how to do them…

2

here is my prototype. The movement is still buggy (i added movement and staying withing borders)

float x = 300, y = 300, xs = 0, ys = 0, friction = 0.9, r = 10, acc = 0.3;
boolean accelerate[] = new boolean[4];

void setup() {
  size(600,600);
  
}

void draw() {
  background(0);
  ellipse(x,y,r*2,r*2);
  
 
  
  x += xs;
  y += ys;
  println(x,y,xs,ys);
  xs *= friction;
  ys *= friction;
  
  if(x + r > width) {
    xs = 0;
    x = width-r;
  } else if(x - r < 0) {
    xs = 0;
    x = r;
  }
  if(y + r > height) {
    ys = 0;
    y = height-r;
  } else if(y - r < 0) {
    ys = 0;
    y = r;
  }
  
  if(keyPressed && keyCode == LEFT) {
    xs -= acc;
    ys = 0;
  }
  if (keyPressed && keyCode == RIGHT) {
    xs += acc;
    ys = 0;
  }
  if (keyPressed && keyCode == UP) {
    ys -= acc;
    xs = 0;
  }
  if (keyPressed && keyCode == DOWN) {
    ys += acc;
    xs = 0;
  }
  
  
}

//void keyPressed() {
//  if(keyCode == LEFT) {
//    accelerate[0] = true;
//  }
//  if (keyCode == RIGHT) {
//    accelerate[0] = true;
//  }
//  if (keyCode == UP) {
//    accelerate[0] = true;
//  }
//  if (keyCode == DOWN) {
//    accelerate[0] = true;
//  }
//}
3

added the circles and score varriable

float x = 300, y = 300, xs = 0, ys = 0, friction = 0.9, r = 20, acc = 0.3, tx = 500, ty = 300, tr = 10;
int score = 0;
boolean accelerate[] = new boolean[4];

void setup() {
  size(600,600);
  
}

void draw() {
  background(0);
  fill(255);
  ellipse(x,y,r*2,r*2);
  
 
  
  x += xs;
  y += ys;
  println(x,y,xs,ys);
  xs *= friction;
  ys *= friction;
  
  if(x + r > width) {
    xs = 0;
    x = width-r;
  } else if(x - r < 0) {
    xs = 0;
    x = r;
  }
  if(y + r > height) {
    ys = 0;
    y = height-r;
  } else if(y - r < 0) {
    ys = 0;
    y = r;
  }
  
  if(keyPressed && keyCode == LEFT) {
    xs -= acc;
    ys = 0;
  }
  if (keyPressed && keyCode == RIGHT) {
    xs += acc;
    ys = 0;
  }
  if (keyPressed && keyCode == UP) {
    ys -= acc;
    xs = 0;
  }
  if (keyPressed && keyCode == DOWN) {
    ys += acc;
    xs = 0;
  }
  
  fill(255,0,0);
  circle(tx,ty,tr*2);
  if(dist(x,y,tx,ty) < tr + r) {
    tx = random(tr, width-tr);
    ty = random(tr, height-tr);
    score++;
  }
}

edit: a bit better version:

float x = 300, y = 300, xs = 0, ys = 0, friction = 0.9, r = 20, acc = 0.6, tx = 500, ty = 300, tr = 10;
int score = 0;
boolean pressed[] = new boolean[4];

void setup() {
  size(600,600);
  
}

void draw() {
  background(0);
  fill(255);
  ellipse(x,y,r*2,r*2);
  
 
  
  x += xs;
  y += ys;
  println(x,y,xs,ys);
  xs *= friction;
  ys *= friction;
  
  if(x + r > width) {
    xs = 0;
    x = width-r;
  } else if(x - r < 0) {
    xs = 0;
    x = r;
  }
  if(y + r > height) {
    ys = 0;
    y = height-r;
  } else if(y - r < 0) {
    ys = 0;
    y = r;
  }
  
  if(pressed[2]) {
    xs -= acc;
    ys = 0;
  }
  if (pressed[3]) {
    xs += acc;
    ys = 0;
  }
  if (pressed[0]) {
    ys -= acc;
    xs = 0;
  }
  if (pressed[1]) {
    ys += acc;
    xs = 0;
  }
  
  fill(255,0,0);
  circle(tx,ty,tr*2);
  if(dist(x,y,tx,ty) < tr + r) {
    tx = random(tr, width-tr);
    ty = random(tr, height-tr);
    score++;
  }
}

void keyPressed() {
  if(key == 'w') pressed[0] = true;
  if(key == 's') pressed[1] = true;
  if(key == 'a') pressed[2] = true;
  if(key == 'd') pressed[3] = true;
}
void keyReleased() {
  if(key == 'w') pressed[0] = false;
  if(key == 's') pressed[1] = false;
  if(key == 'a') pressed[2] = false;
  if(key == 'd') pressed[3] = false;
}
4

here is the final code!

float x = 300, y = 300, xs = 0, ys = 0, friction = 0.9, r = 20, acc = 1, tx = 500, ty = 300, tr = 10;
int score = 0;
boolean pressed[] = new boolean[4];

void setup() {
  size(600,600);
  
}

void draw() {
  background(0);
  fill(255);
  ellipse(x,y,r*2,r*2);
  
 
  
  x += xs;
  y += ys;
  xs *= friction;
  ys *= friction;
  
  if(x + r > width) {
    xs = 0;
    x = width-r;
  } else if(x - r < 0) {
    xs = 0;
    x = r;
  }
  if(y + r > height) {
    ys = 0;
    y = height-r;
  } else if(y - r < 0) {
    ys = 0;
    y = r;
  }
  
  if(pressed[2]) {
    xs -= acc + abs(ys);
    ys = 0;
  }
  if (pressed[3]) {
    xs += acc + abs(ys);
    ys = 0;
  }
  if (pressed[0]) {
    ys -= acc + abs(xs);
    xs = 0;
  }
  if (pressed[1]) {
    ys += acc + abs(xs);
    xs = 0;
  }
  
  fill(255,0,0);
  circle(tx,ty,tr*2);
  if(dist(x,y,tx,ty) < tr + r) {
    tx = random(tr, width-tr);
    ty = random(tr, height-tr);
    score++;
  }
}

void keyPressed() {
  if(key == 'w') pressed[0] = true;
  if(key == 's') pressed[1] = true;
  if(key == 'a') pressed[2] = true;
  if(key == 'd') pressed[3] = true;
}
void keyReleased() {
  if(key == 'w') pressed[0] = false;
  if(key == 's') pressed[1] = false;
  if(key == 'a') pressed[2] = false;
  if(key == 'd') pressed[3] = false;
}
5

Wow is so good and complicated

6

Platformers are difficult. I suggest you try something easier.