New coder- added background to flappy bird game now doesn't work

p5.js Coding Questions
1

Please help this is my original code and when the user claps the bird goes up and down:

Once we added a background image as the background the code stopped working:

PLEASE HELP

//Good Code:

var bird;
var pipes = [];
var mic;
var sliderTop;
var sliderBottom;
var clapping = false;
//var landscape;


function setup() {
  createCanvas(400, 600);
   // landscape = loadImage("big boy images.jpeg");
  mic = new p5.AudioIn();
  mic.start();
  bird = new Bird();
  pipes.push(new Pipe());
  sliderTop = createSlider(0, .1, 0.3, 0.01);
  sliderBottom = createSlider(0, 1, 0.1, 0.01);
}

function draw() {
   background(0);

  var vol = mic.getLevel();


  for (var i = pipes.length - 1; i >= 0; i--) {
    pipes[i].show();
    pipes[i].update();

    if (pipes[i].hits(bird)) {
      console.log("HIT");
    }


    if (pipes[i].offscreen()) {
      pipes.splice(i, 1);
    }


  }
  

  bird.update();
  bird.show();

  if (frameCount % 100 == 0) {
    pipes.push(new Pipe());
  }

  var thresholdTop = sliderTop.value();
  var thresholdBottom = sliderBottom.value();

  if (vol > thresholdTop && !clapping) {
    bird.up();
    clapping = true;
  }

  if (vol < thresholdBottom) {
    clapping = false;
  }

  //fill(0, 255, 0);
  //console.log(vol);
  //noStroke();
  //var y = map(vol, 0, 1, height, 0);
  //rect(width - 50, y, 50, height - y);

  //var ty = map(thresholdTop, 0, 1, height, 0);
  //stroke(255, 0, 0);
  //strokeWeight(4);
  //line(width - 50, ty, width, ty);

  //var by = map(thresholdBottom, 0, 1, height, 0);
  //stroke(0, 0, 255);
  //strokeWeight(4);
  //line(width - 50, by, width, by);


}

function keyPressed() {
  if (key == ' ') {
    bird.up();
    //console.log("SPACE");
  }
}

function Bird() {
  this.y = height / 2;
  this.x = 64;

  this.gravity = 0.6;
  this.lift = -15;
  this.velocity = 0;

  this.show = function() {
    fill(246,255,0);
    noStroke();
    ellipse(this.x, this.y, 32, 32);
  }

  this.up = function() {
    this.velocity += this.lift;
  }

  this.update = function() {
    this.velocity += this.gravity;
    this.velocity *= 0.9;
    this.y += this.velocity;

    if (this.y > height) {
      this.y = height;
      this.velocity = 0;
    }

    if (this.y < 0) {
      this.y = 0;
      this.velocity = 0;
    }

  }

}

function Pipe() {

  var spacing = random(150, height / 2);
  var centery = random(spacing, height - spacing);

  this.top = centery - spacing / 2;
  this.bottom = height - (centery + spacing / 2);
  this.x = width;
  this.w = 50;
  this.speed = 2;

  this.highlight = false;

  this.hits = function(bird) {
    if (bird.y < this.top || bird.y > height - this.bottom) {
      if (bird.x > this.x && bird.x < this.x + this.w) {
        this.highlight = true;
        return true;
      }
    }
    this.highlight = false;
    return false;
  }

  this.show = function() {
    noStroke();
    fill(0,255,0);
    if (this.highlight) {
      fill(255, 0, 0);
    }
    rect(this.x, 0, this.w, this.top);
    rect(this.x, height - this.bottom, this.w, this.bottom);
  }

  this.update = function() {
    this.x -= this.speed;
  }

  this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }


}

//Bad Code:

var bird;
var pipes = [];
var mic;
var sliderTop;
var sliderBottom;
var clapping = false;
var landscape;


function setup() {
  createCanvas(400, 600);
   landscape = loadImage("big boy images.jpeg");
  mic = new p5.AudioIn();
  mic.start();
  bird = new Bird();
  pipes.push(new Pipe());
  sliderTop = createSlider(0, .1, 0.3, 0.01);
  sliderBottom = createSlider(0, 1, 0.1, 0.01);
}

function draw() {
   background(landscape);

  var vol = mic.getLevel();


  for (var i = pipes.length - 1; i >= 0; i--) {
    pipes[i].show();
    pipes[i].update();

    if (pipes[i].hits(bird)) {
      console.log("HIT");
    }


    if (pipes[i].offscreen()) {
      pipes.splice(i, 1);
    }


  }
  

  bird.update();
  bird.show();

  if (frameCount % 100 == 0) {
    pipes.push(new Pipe());
  }

  var thresholdTop = sliderTop.value();
  var thresholdBottom = sliderBottom.value();

  if (vol > thresholdTop && !clapping) {
    bird.up();
    clapping = true;
  }

  if (vol < thresholdBottom) {
    clapping = false;
  }

  //fill(0, 255, 0);
  //console.log(vol);
  //noStroke();
  //var y = map(vol, 0, 1, height, 0);
  //rect(width - 50, y, 50, height - y);

  //var ty = map(thresholdTop, 0, 1, height, 0);
  //stroke(255, 0, 0);
  //strokeWeight(4);
  //line(width - 50, ty, width, ty);

  //var by = map(thresholdBottom, 0, 1, height, 0);
  //stroke(0, 0, 255);
  //strokeWeight(4);
  //line(width - 50, by, width, by);


}

function keyPressed() {
  if (key == ' ') {
    bird.up();
    //console.log("SPACE");
  }
}

function Bird() {
  this.y = height / 2;
  this.x = 64;

  this.gravity = 0.6;
  this.lift = -15;
  this.velocity = 0;

  this.show = function() {
    fill(246,255,0);
    noStroke();
    ellipse(this.x, this.y, 32, 32);
  }

  this.up = function() {
    this.velocity += this.lift;
  }

  this.update = function() {
    this.velocity += this.gravity;
    this.velocity *= 0.9;
    this.y += this.velocity;

    if (this.y > height) {
      this.y = height;
      this.velocity = 0;
    }

    if (this.y < 0) {
      this.y = 0;
      this.velocity = 0;
    }

  }

}

function Pipe() {

  var spacing = random(150, height / 2);
  var centery = random(spacing, height - spacing);

  this.top = centery - spacing / 2;
  this.bottom = height - (centery + spacing / 2);
  this.x = width;
  this.w = 50;
  this.speed = 2;

  this.highlight = false;

  this.hits = function(bird) {
    if (bird.y < this.top || bird.y > height - this.bottom) {
      if (bird.x > this.x && bird.x < this.x + this.w) {
        this.highlight = true;
        return true;
      }
    }
    this.highlight = false;
    return false;
  }

  this.show = function() {
    noStroke();
    fill(0,255,0);
    if (this.highlight) {
      fill(255, 0, 0);
    }
    rect(this.x, 0, this.w, this.top);
    rect(this.x, height - this.bottom, this.w, this.bottom);
  }

  this.update = function() {
    this.x -= this.speed;
  }

  this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }


}
1 Like
2

i did not get into your code, just for the picture:

-a- i play online p5.js Web Editor
-b- i see no info in reference, but found a example
examples | p5.js
and you see there, that there is a rule about the canvas size === image size

    createCanvas(502, 333); // for data/172_redgiantsun.jpg
    landscape = loadImage('data/172_redgiantsun.jpg');

-c- i recommend in all cases to use the path to the external files
(esp in the case where you do a read write / the processing default to look in /data/ for reading
(only), is more confusing as helping )

-d- add looks like i needed a

   background(landscape, [0]);

-e- worry that it can not understand all picture types …
i tested a

.jpg
.jpeg

successfully

so without your original picture not more to say.

1 Like
3

here is the link to our photo:

https://www.google.com/imgres?imgurl=https%3A%2F%2Fpngimage.net%2Fwp-content%2Fuploads%2F2018%2F06%2Fflappy-bird-background-png-7-300x200.png&imgrefurl=https%3A%2F%2Fpngimage.net%2Fflappy-bird-background-png-5%2F&docid=-X3qzfoRcWqZyM&tbnid=Q-7iRvOJi2nYSM%3A&vet=12ahUKEwi2_LT30J3fAhWD0VQKHcMFAZs4ZBAzKBQwFHoECAEQFQ..i&w=300&h=200&client=safari&bih=758&biw=1440&q=flappy%20bird%20background&ved=2ahUKEwi2_LT30J3fAhWD0VQKHcMFAZs4ZBAzKBQwFHoECAEQFQ&iact=mrc&uact=8

4

yes, it works
you see?

  createCanvas(300, 200);
  landscape = loadImage('data/flappy-bird-background-png-7-300x200.png');