Why is my javascript showing white?

Processing Coding Questions
1

I decided to start learning javascript & made a flappy bird, but after adding the pipes my screen was white. I’m using notepad ++ javascript

here the html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.js"></script>
    <script type="text/javascript" src="sketch.js"></script>
	<script type="text/javascript" src="bird.js"></script>
	<script type="text/javascript" src="pipe.js"></script>
  </head>
  <body>
  </body>
</html>

here bird.js

function Bird(){
	this.y = height/2;
	this.x = 50;
	this.grav = 0.6;
	this.vel = 0;
	this.lift = -15;
	
	this.show = function() {
		fill(255);
		ellipse(this.x,this.y,32,32);
	}
	
	this.up = function(){
		this.vel += this.lift;
	}
	this.move = function(){
		this.vel += this.grav;
		this.vel *= 0.9;
		this.y += this.vel;
		if (this.y > height) {
			this.y = height;
			this.vel = 0;
		}
		if (this.y < 0) {
			this.y = 0;
			this.vel = 0;
		}
	}
}

here sketch.js

var bird;
var pipes = [];
function setup(){
	createCanvas(400,600);
	bird = new Bird();
	pipes.push(new Pipe());
}
function draw(){
	background(0);
	bird.show();
	bird.move();
	for (var i = 0; i < pipes.length; i++){
		pipes[i].show();
		pipes[i].update();
	}
}
function keyPressed(){
	if (key == ' '){
		bird.up();
	}
}

here pipes.js

function Pipe() {
	this.top = random(height/2);
	this.bottom = random(height / 2);
	this.x = width;
	this.w = 20;
	this.speed = 1;
	
	this.show = function(){
		fill(255);
		rect(this.x, 0, this.w, this.top);
		rect(this.x, height-this.bottom, this.w, this.bottom);
	}
	
	this.update(){
		this.x -= this.speed;
	}
}

anyone know why I see a white screen instead of my game?

2

You have an error in your JS somewhere that’s crashing your sketch.

Maybe several errors.

Open the console (F12 in Chrome) to see what errors there are.

3

that is the height of the window

4

The error was a function make I declared it wrong. Thanks for the error view

1 Like