Hi I’m making a flappy bird & even though I defined the pipe in index it keeps saying can’t read property of undefined.
index html
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.1.4/lib/p5.min.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<script language="javascript" type="text/javascript" src="bird.js"></script>
<script language="javascript" type="text/javascript" src="pipe.js"></script>
</head>
<body>
</body>
</html>
sketch js
var bird;
var pipes = [];
function setup() {
createCanvas(400, 500);
//bird = new Bird();
pipes.push(new Pipe());
}
function draw() {
background(0);
bird.show();
bird.update();
for (var i = pipes.length - 1; i >= 0; i--){
pipes[i].show();
}
}
function keyPressed() {
if (key == ' '){
bird.up();
}
}
bird js
function Bird() {
this.y = height/2;
this.x = 64;
this.w = 16;
this.grav = 0.7;
this.jump = -12;
this.vel = 0;
this.up = function() {
this.vel += this.jump;
}
this.update = function() {
this.vel += this.grav;
this.vel *= 0.9;
this.y += this.vel;
if (this.y + this.w > height){
this.y = height - this.w;
}
if (this.y - this.w < 0){
this.y = this.w;
}
}
this.show = function() {
fill(255);
ellipse(this.x,this.y,this.w * 2,this.w * 2);
}
}
pipe.js
function Pipe() {
this.x = width/2;
this.space = 100;
this.top = random(this.space,height - this.space);
this.bottom = height - (this.space + this.top);
this.w = 50;
this.speed = 5;
this.show = function() {
fill(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;
}
}
as you can see pipes.js is in index & I create a pipe in setup, but it still gives me undefined for pipes.