Help with my code

p5.js Coding Questions
1

Hello, my name is Bryce,

   I have been working on a project for a while and I just cant get it. This is what I'm supposed to do:

“Your job is to create a game where there is a row of boxes along the top of the canvas, and a mid-line that your player cannot cross (the program will stop it). Your player should also be contained to the boundaries of the canvas. Your player should then be able to shoot at the squares and when the square are “hit” they should appear to disappear”.

I have completed everything except for making the squares disappear upon contact with the bullet anything helps.

and this is my code:

// circX is for the smaller circle
let circX;
// circY is for the smaller circle
let circY;
//bulletX is for the shooting bullet
let bulletX;
//bulletX is for the shooting bullet
let bulletY;
// is for the first blue rect
let rect1x=0;
// is for the second green rect
let rect2x=40;
// is for the third red rect
let rect3x=80;
// is for the fourth pink rect
let rect4x=120;
// is for the fifth blue rect
let rect5x=160;
// is for the sixth green rect
let rect6x=200;
// is for the seventh red rect
let rect7x=240;
// is for the eighth pink rect
let rect8x=280;
// is for the ninth blue rect
let rect9x=320;
// is for the tenth green rect
let rect10x=360;

// is for the mouseX to lead the object
let myMouseX;
// is for the mouseY to lead the object
let myMouseY;
// to enable shooting
let shoot = false;

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

function draw() {
background(“turquoise”);
// for the bullet to follow the mouse
bulletx = mouseX;

// to activate the bullet
circle(bulletx, mouseY, 10);

if (bulletx >= rect1x){
rect1x = 5
}

//middle line
rect (0,250,400,0);

// rect1
stroke (“Black”);
fill (“Blue”);
rect (0,0,40,40);
// rect2
stroke (“Black”);
fill (“green”);
rect (40,0,40,40);
// rect3
stroke (“Black”);
fill (“red”);
rect (80,0,40,40);
// rect4
stroke (“Black”);
fill (“pink”);
rect (120,0,40,40);
// rect5
stroke (“Black”);
fill (“Blue”);
rect (160,0,40,40);
// rect6
stroke (“Black”);
fill (“green”);
rect (200,0,40,40);
// rect7
stroke (“Black”);
fill (“red”);
rect (240,0,40,40);
// rect8
stroke (“black”);
fill (“pink”);
rect (280,0,40,40);
// rect9
stroke (“Black”);
fill (“Blue”);
rect (320,0,40,40);
// rect10
stroke (“Black”);
fill (“green”);
rect (360,0,40,40);

circX = mouseX;
circY = mouseY;

// all is for the boundries for the purple circle
if (circY <= 275){
circY = 275;
}
if (circX <= 25){
circX = 25;
}
if (circY >= 375){
circY = 375;
}
if (circX >= 375){
circX = 375;
}

// big circle
stroke(“Yellow”);
fill (“Purple”);
circle(circX, circY,50);

if (mouseIsPressed){
if (mouseButton === LEFT){
shoot = true;
myMouseX = mouseX;
myMouseY = mouseY;
}
}
// to enable shooting
if (shoot == true){
myMouseY = myMouseY - 5;

// smaller circle
stroke("yellow");
fill("red");
circle(myMouseX,myMouseY,10);

}

}

2

There’s much easier ways to do this.

Think about the objects that are in your sketch. What has it got?
There are Boxes.
There’s the Player.
There are Bullets that the player shoots.

Knowing what your sketch needs means we can write classes to describe each thing in it. This way we can keep all the logic for how a thing behaves in one place.

Here’s the basic structure:

class Box {
  Box() {
  }
  void draw() {
  }
}

class Player {
  Player() {
  }
  void draw() {
  }
}

class Bullet {
  Bullet() {
  }
  boolean draw() { 
    return(true);
  }
}

// We have a fixed number of boxes.
Box[] boxes = new Box[20];
// We have only one Player.
Player player = new Player();
// We have a dynamic number of Bullets.
ArrayList<Bullet> bullets = new ArrayList();

void setup() {
  size(600, 400);
  for ( int i=0; i<boxes.length; i++) boxes[i] = new Box();
}

void draw() {
  background(0);
  for ( int i=0; i<boxes.length; i++) boxes[i].draw();
  for ( int i=bullets.size()-1; i>=0; i--) if ( !bullets.get(i).draw() ) bullets.remove(i);
  player.draw();
}

This code doesn’t do anything yet, of course, because we aren’t having any of the things draw anything. We can add their appearances next, plus some basic bullet logic:

class Box {
  color fill_color, stroke_color;
  float x, y, w, h;
  boolean is_visible;
  Box() {
    fill_color = color(200,0,0);
    stroke_color = color(100,0,50);
    x = random(width);
    y = random(height/2, height);
    w = 40;
    h = 30;
  }
  void draw() {
    fill(fill_color);
    stroke(stroke_color);
    rect(x,y,w,h);
  }
}

class Player {
  Player() {
  }
  void draw() {
    noStroke();
    fill(250);
    pushMatrix();
    translate(mouseX, mouseY);
    triangle(-10,-10,10,-10,0,10);
    popMatrix();
  }
}

class Bullet {
  float x, y, dx, dy;
  Bullet(float ix, float iy) {
    x = ix;
    y = iy;
    dx = 0;
    dy = 2;
  }
  boolean draw() {
    fill(255,255,0);
    stroke(255,0,0);
    ellipseMode(CENTER);
    ellipse(x,y,5,5);
    x += dx;
    y += dy;
    return(y < height + 50);
  }
}

// We have a fixed number of boxes.
Box[] boxes = new Box[20];
// We have only one Player.
Player player = new Player();
// We have a dynamic number of Bullets.
ArrayList<Bullet> bullets = new ArrayList();

void setup() {
  size(600, 400);
  for ( int i=0; i<boxes.length; i++) boxes[i] = new Box();
}

void draw() {
  background(0);
  for ( int i=0; i<boxes.length; i++) boxes[i].draw();
  for ( int i=bullets.size()-1; i>=0; i--) if ( !bullets.get(i).draw() ) bullets.remove(i);
  player.draw();
}

void mousePressed(){
  bullets.add( new Bullet( mouseX, mouseY) );
}

Now we need to make the bullets hit the blocks. We can do this by having each Bullet look to see if it has hit any of the blocks:

class Box {
  color fill_color, stroke_color;
  float x, y, w, h;
  boolean is_visible;
  Box() {
    fill_color = color(200, 0, 0);
    stroke_color = color(100, 0, 50);
    x = random(width);
    y = random(height/2, height);
    w = 40;
    h = 30;
    is_visible = true;
  }
  void draw() {
    if( !is_visible ) return;
    fill(fill_color);
    stroke(stroke_color);
    rect(x, y, w, h);
  }
}

class Player {
  Player() {
  }
  void draw() {
    noStroke();
    fill(250);
    pushMatrix();
    translate(mouseX, mouseY);
    triangle(-10, -10, 10, -10, 0, 10);
    popMatrix();
  }
}

class Bullet {
  float x, y, dx, dy;
  Bullet(float ix, float iy) {
    x = ix;
    y = iy;
    dx = 0;
    dy = 2;
  }
  boolean draw() {
    fill(255, 255, 0);
    stroke(255, 0, 0);
    ellipseMode(CENTER);
    ellipse(x, y, 5, 5);
    for ( int i = 0; i < boxes.length; i++) {
      if ( boxes[i].is_visible ) {
        if ( boxes[i].x < x && x < boxes[i].x + boxes[i].w ) {
          if ( boxes[i].y < y && y < boxes[i].y + boxes[i].h ) {
            boxes[i].is_visible = false;
            return( false );
          }
        }
      }
    }
    x += dx;
    y += dy;
    return(y < height + 50);
  }
}

// We have a fixed number of boxes.
Box[] boxes = new Box[20];
// We have only one Player.
Player player = new Player();
// We have a dynamic number of Bullets.
ArrayList<Bullet> bullets = new ArrayList();

void setup() {
  size(600, 400);
  for ( int i=0; i<boxes.length; i++) boxes[i] = new Box();
}

void draw() {
  background(0);
  for ( int i=0; i<boxes.length; i++) boxes[i].draw();
  for ( int i=bullets.size()-1; i>=0; i--) if ( !bullets.get(i).draw() ) bullets.remove(i);
  player.draw();
}

void mousePressed() {
  bullets.add( new Bullet( mouseX, mouseY) );
}

This is a much better example for you to work from. You will, of course, need to rework how the blocks are placed, limit the player’s position, and change how the shots work…

1 Like
3

Hi, TfGuY44,

This helps a lot thank you very much

1 Like
4

I have been messing around with this code. and i am trying to keep things somewhat similar to what there are currently. I still don’t know how to make the block disappear. and if anyone can help try to keep to code similar to what it is.

// circX is for the smaller circle
let circX;
// circY is for the smaller circle
let circY;
//bulletX is for the shooting bullet
let bulletX;
//bulletX is for the shooting bullet
let bulletY;
// is for the first blue rect
let rect1x=0;
let rect1y=0;
// is for the second green rect
let rect2xx=40;
let rect2yy=0;
// is for the third red rect
let rect3xxx=80;
let rect3yyy=0;
// is for the fourth pink rect
let rect4xxxx=120;
let rect4yyyy=0;
// is for the fifth blue rect
let rect5xxxxx=160;
let rect5yyyyy=0;
// is for the sixth green rect
let rect6xxxxxx=200;
let rect6yyyyyy=0;
// is for the seventh red rect
let rect7xxxxxxx=240;
let rect7yyyyyyy=0;
// is for the eighth pink rect
let rect8xxxxxxxx=280;
let rect8yyyyyyyy=0;
// is for the ninth blue rect
let rect9xxxxxxxxx=320;
let rect9yyyyyyyyy=0;
// is for the tenth green rect
let rect10xxxxxxxxxx=360;
let rect10yyyyyyyyyy=0;

// is for the mouseX to lead the object
let myMouseX;
// is for the mouseY to lead the object
let myMouseY;
// to enable shooting
let shoot = false;

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

function draw() {
background(“turquoise”);
// for the bullet to follow the mouse
bulletx = mouseX;

// to activate the bullet
circle(bulletx, mouseY, 10);

if (bulletx >= rect1x){
rect1x = 5;
}

//middle line
rect (0,250,400,0);

// rect1
stroke (“Black”);
fill (“Blue”);
rect (rect1x,rect1y,40,40);
// rect2
stroke (“Black”);
fill (“green”);
rect (rect2xx,rect2yy,40,40);
// rect3
stroke (“Black”);
fill (“red”);
rect (rect3xxx,rect3yyy,40,40);
// rect4
stroke (“Black”);
fill (“pink”);
rect (rect4xxxx,rect4yyyy,40,40);
// rect5
stroke (“Black”);
fill (“Blue”);
rect (rect5xxxxx,rect5yyyyy,40,40);
// rect6
stroke (“Black”);
fill (“green”);
rect (rect6xxxxxx,rect6yyyyyy,40,40);
// rect7
stroke (“Black”);
fill (“red”);
rect (rect7xxxxxxx,rect7yyyyyyy,40,40);
// rect8
stroke (“black”);
fill (“pink”);
rect (rect8xxxxxxxx,rect8yyyyyyyy,40,40);
// rect9
stroke (“Black”);
fill (“Blue”);
rect (rect9xxxxxxxxx,rect9yyyyyyyyy,40,40);
// rect10
stroke (“Black”);
fill (“green”);
rect (rect10xxxxxxxxxx,rect10yyyyyyyyyy,40,40);

circX = mouseX;
circY = mouseY;

// all is for the boundries for the purple circle
if (circY <= 275){
circY = 275;
}
if (circX <= 25){
circX = 25;
}
if (circY >= 375){
circY = 375;
}
if (circX >= 375){
circX = 375;
}

// big circle
stroke(“Yellow”);
fill (“Purple”);
circle(circX, circY,50);

if (mouseIsPressed){
if (mouseButton === LEFT){
shoot = true;
myMouseX = mouseX;
myMouseY = mouseY;
}
}
// to enable shooting
if (shoot == true){
myMouseY = myMouseY - 5;

// smaller circle
stroke("yellow");
fill("red");
circle(myMouseX,myMouseY,10);

}

}