I was making a dodge ball game with p5js:) the player can move a yellow circle from the top left corner to the bottom right corner of the canvas using the arrow keys, while dodging six linearly moving red dots -- three of them horizontally, others vertically.

all I want is -> if the yellow dot hits one of the red dots, the game stops and the background turns black.

let c;
let cspeed = 4
let x= 25;
let y = 25;
let level=0;
let width = 800
let height = 800

function setup() {
  createCanvas(800, 800);
  c=0
  let d = dist(c,height/4,x,y); //becuz of 'dist is not defined' issue, i moved it to setup() position
  let e = dist(c,height/2,x,y);
  let f = dist(c,height/9,x,y);
  let g = dist(height/2,c,x,y);
  let h = dist(height/4,c, x,y);
  let j = dist(height/9,c, x,y);
  print(d);
  print(e); 
  print(f);
  print(g);
  print(h); 
  print(j); 
  if (d<20||e<20||f<20||g<20||j<20);{
    loseScreen();
}
}

function draw() {
  keyPressed()
  background(220);
  fill(50);
  textSize(30)
  text(level, 770, 30);
  

  fill('green')
  square(0, 0, 50);
  fill('purple');
  square(750, 750, 50);
  fill('yellow')
  ellipse(x, y, 40);
  
  
  c =cspeed;
  fill('red');
  noStroke();   
  ellipse(c, height / 4, 50, 50);
  ellipse(c, height / 2, 50, 50);
  ellipse(c, height / 9, 50, 50);
  ellipse(height / 4, c, 50, 50);
  ellipse(height / 2, c, 50, 50);
  ellipse(height / 9, c, 50, 50);
    if (c > width || c < 0) {
    cspeed *= -1;
  }
    
}
  if (c > width || c < 0) {
    cspeed *= -1;
  }
  if (x > 770 && y >770){
   x = 25
   y= 25;
    cspeed *= 1.5
    level  ;
  }
function loseScreen(){ // it's not working,,
  noStroke(); 
  fill('black');
  square(0,0,800); 
}

function keyPressed() {
  //print(keyCode, key);
  
  if (keyCode == LEFT_ARROW && keyIsPressed) {
    x = x - 5;
    if (x<20){
      x=20
    }
  } else if (keyCode == RIGHT_ARROW&& keyIsPressed) {
     x = x   5;
    if (x>780){
      x=780
    }
  } else if(keyCode == DOWN_ARROW&& keyIsPressed){
     y = y   5; 
      if (y>780){
        y=780
      }
  }else if(keyCode == UP_ARROW&& keyIsPressed){
     y = y - 5; 
     if (y<20){
        y=20
      }
  }
}

here's my p5js code https://editor.p5js.org/kiskl/sketches/XzwAM5pDA

I will appreciate any help you can provide!

CodePudding user response：

On your request, I expanded on the answer to your first question. The trick with my previous solution and why it is generally better to use arrays for things like this is that you can check collision for each dot with a couple of lines in the for loop.

Now there definitely is a benefit in using array over hard-coded points.

let height = 700;
let width = 700;
let s = 4;
let d = 50;

let gamestate = 'running';

let level = 0;
let x = 25;
let y = 25;

function setup() {
  createCanvas(width, height);
}

let dots = [
  {y: height / 4, x: 0, s: s, d: d, direction: 'h' },
  { y: height / 2, x: 0, s: s, d: d, direction: 'h' },
  { y: height / 9, x: 0, s: s, d: d, direction: 'h' },
  { x: width / 4, y: 0, s: s, d: d, direction: 'v' },
  { x: width / 2, y: 0, s: s, d: d, direction: 'v' },
  { x: width / 9, y: 0, s: s, d: d, direction: 'v' },
]

function draw() {
  switch (gamestate) {
    case 'victory':
      victoryScreen();
      break;
    case 'lose':
      loseScreen();
      break;
    default:
      keyPressed();
      background(220);
      fill(50);
      textSize(30)
      text(level, 770, 30);


      fill('green');
      square(0, 0, d);
      fill('purple');
      square(width - d, height - d, d);
      fill('yellow');
      ellipse(x, y, 40);

      dots.forEach((dot) => {
        fill('red')
        ellipse(dot.x, dot.y, dot.d, dot.d);
        if (dot.direction === 'h') {
          dot.x  = dot.s

          if (dot.x > width || dot.x < 0) {
            dot.s *= -1;
          }
        } else if (dot.direction === 'v') {
          dot.y  = dot.s

          if (dot.y > height || dot.y < 0) {
            dot.s *= -1;
          }
        }

        if (x < (dot.x   d) && (dot.x - d) < x) {
          if (y < (dot.y   d) && (dot.y - d) < y) {
            gamestate = 'lose';
          }
        }
      });

      if (x > width - d && y > height - d) {
        gamestate = 'victory'
      }
  }
}


function loseScreen() {
  noStroke();
  fill('black');
  square(0, 0, 800);
}

function victoryScreen() {
  noStroke();
  fill('green');
  square(0, 0, 800);
}

function keyPressed() {
  if (keyCode == LEFT_ARROW && keyIsPressed) {
    x = x - 5;
    if (x < d / 2) {
      x = d / 2;
    }
  } else if (keyCode == RIGHT_ARROW && keyIsPressed) {
    x = x   5;
    if (x > (width - d / 2)) {
      x = width - d / 2;
    }
  } else if (keyCode == DOWN_ARROW && keyIsPressed) {
    y = y   5;
    if (y > (height - d / 2)) {
      y = height - d / 2;
    }
  } else if (keyCode == UP_ARROW && keyIsPressed) {
    y = y - 5;
    if (y < d / 2) {
      y = d / 2;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>