Works in normal processing java, but not online with processing js

thegmanyk

I have created a game and I am trying to but it on a website, it works just fine on the processing that is on my computer, but not if I open it with processing js in html, all of the images(forest, beach, crab, and sand) are in the folder, here is my code: int playerX; int playerY; int timeJump; int cameraY; int cameraX; boolean jump; boolean onSomething; PImage beach; PImage crab; PImage sand; PImage forest; int level; int pStartY; int pStartX; boolean begin; int endX; int endY;

float crabX;

public void setup() {

size(400, 400); //size of screen onSomething = false; //says that the player starts out while they aren't on the ground playerX = 200; //a starting position of the player's location if it is not defined in the level playerY = 200; //a starting position of the player's location if it is not defined in the levelcameraX=0; //the camera follows around the player, when the camera changes, everything on the screen follows it, except the background, which moves at half speed cameraY=0; //the Y position of the camera level=1; //for testing different levels, tells the came what level to start at

//says that the crab will stay at the starting position until crabStart is false timeJump=0; //how long the player has been jumping for, so the player can start falling when this reaches a certain point jump=false; //says that the player is not jumping until the up key is pressed begin=true; //tells the player to stay at the starting position the level defined until this is changed to false beach = loadImage("Beach.jpg"); //picture of a beach for the background sand = loadImage("sand.jpg"); //picture of the sand for sand blocks crab = loadImage("crab.png"); //picture of a crab for the crab forest = loadImage("forest.jpg"); }

public void draw() {

image(beach,-500+cameraX/2, -500+cameraY/2,1000,1000); //puts the beach background at half the camera value away from 500; noStroke(); //the shapes and letters in this game will have no outline fill(255,0,0); //the colour of the player ellipse(playerX+cameraX, playerY+cameraY, 20, 20); //draws an ellipse at playerX and playerY according to the camera

if(level == 0){ image(forest,0,0,400,400); fill(255,0,0); textSize(15); text("Welcome to a game made by Griffin Brown,there are two levels. This first level is the beach level, it is the tutorial. Just because it is the tutorial doesn't been it will be easy, it's just not as hard as the second one. Enjoy!!",20,20);

} if(level == 1){ //starts level one if that is the value of level pStartX=10; //defines the starting position of the player pStartY=10; //defines the starting position of the player endX =280; //defines where the level will end endY =20; //defines where the level will end if(begin==true){playerX=pStartX; playerY=pStartY; begin=false;} //sets the player at it's starting position if the level has just begun if(playerY>410){playerX=pStartX; playerY=pStartY;} //teleports the player back to the start if the player drops below 410 if(playerY+10>endY&&playerY-30<endY&&playerX+10>endX&&playerX-30<endX){level+=1; begin=true;} //begins the next level if the player touches the end square fill(0,0,0); //sets the end colour to black rect(endX+cameraX,endY+cameraY,20,20); //draws the end at endX and endY according to the camera block(0,40); block(20,40); block(40,40); block(60,40); block(80,40); block(100,40); block(120,40); block(140,40); block(160,40); block(180,40); block(200,40); block(220,40); block(240,40); block(260,40); block(280,40); block(300,40); block(320,40); block(340,40); block(360,40); block(380,40); //puts down blocks at the locations in the brackets textSize(25); //makes the text larger fill(0,0,0); //makes the text black text("The goal is to get to the black",0,300); text("square without falling off, use",0,325); text("the right arrow key to go right....",0,350); //shows the instructions/comments for the level

}

if(level == 2){

pStartX=380; pStartY=10; endX =0; endY =20; if(begin==true){playerX=pStartX; playerY=pStartY; begin=false;} if(playerY>450){playerX=pStartX; playerY=pStartY;} if(playerY+10>endY&&playerY-30<endY&&playerX+10>endX&&playerX-30<endX){level+=1; begin=true;} fill(0,0,0); rect(endX+cameraX,endY+cameraY,20,20); block(0,40); block(20,40); block(40,40); block(60,40); block(80,40); block(100,40); block(120,40); block(140,40); block(160,40); block(180,40); block(200,40); block(220,40); block(240,40); block(260,40); block(280,40); block(300,40); block(320,40); block(340,40); block(360,40); block(380,40); textSize(25); fill(0,0,0); text(".....and the left arrow key to",0,300); text("go left....",0,325);

}

if(level == 3){

pStartX=10; pStartY=300; endX =380; endY =0; if(begin==true){playerX=pStartX; playerY=pStartY; begin=false;} if(playerY>450){playerX=pStartX; playerY=pStartY;} if(playerY+10>endY&&playerY-30<endY&&playerX+10>endX&&playerX-30<endX){level+=1; begin=true;} fill(0,0,0); rect(endX+cameraX,endY+cameraY,20,20); block(0,380); block(20,360); block(40,340); block(60,320); block(80,300); block(100,280); block(120,260); block(140,240); block(160,220); block(180,200); block(200,180); block(220,160); block(240,140); block(260,120); block(280,100); block(300,80); block(320,60); block(340,40); block(360,20); block(380,20); textSize(25); fill(0,0,0); text("....and finally, press the",0,30); text("up key to jump.",0,50);

} if(level == 4){ pStartX=10; pStartY=10; endX =280; endY =20; if(begin==true){playerX=pStartX; playerY=pStartY; begin=false;} if(playerY>450){playerX=pStartX; playerY=pStartY;} if(playerY+10>endY&&playerY-30<endY&&playerX+10>endX&&playerX-30<endX){level+=1; begin=true;} fill(0,0,0); rect(endX+cameraX,endY+cameraY,20,20); block(0,40); block(20,40); block(40,40); block(60,40); block(80,40); block(100,40); block(120,40); block(140,40); block(160,40);

block(260,40); block(280,40); block(300,40); block(320,40); block(340,40); block(360,40); block(380,40); textSize(25); fill(0,0,0); text("Jump over the hole!!",5,300);

} if(level == 5){ pStartX=10; pStartY=10; endX =280; endY =20; if(begin==true){playerX=pStartX; playerY=pStartY; begin=false;} if(playerY>450){playerX=pStartX; playerY=pStartY;} if(playerY+10>endY&&playerY-30<endY&&playerX+10>endX&&playerX-30<endX){level+=1; begin=true;} fill(0,0,0); rect(endX+cameraX,endY+cameraY,20,20); block(0,40); block(20,40); block(40,40); block(60,40); block(80,40); block(100,40); block(120,40); block(140,40); block(160,40); block(180,40); spike(180,40); //spike at these coordinates block(200,40); block(220,40); block(240,40); block(260,40); block(280,40); block(300,40); block(320,40); block(340,40); block(360,40); block(380,40); textSize(25); fill(0,0,0); text("Now jump over the spike!",5,300);

} if(level == 6){ pStartX=10; pStartY=10; endX =280; endY =20; if(begin==true){playerX=pStartX; playerY=pStartY; begin=false;} if(playerY>450){playerX=pStartX; playerY=pStartY;} if(playerY+10>endY&&playerY-30<endY&&playerX+10>endX&&playerX-30<endX){level+=1; begin=true;} fill(0,0,0); rect(endX+cameraX,endY+cameraY,20,20); block(0,40); block(20,40);

spike(20,40);

block(40,40); block(60,40); block(80,40);

spike(80,40);

block(100,40); block(120,40); block(140,40);

spike(140,40);

block(160,40); block(180,40); block(200,40);

spike(200,40); block(220,40); block(240,40); block(260,40); block(280,40); block(300,40); block(320,40); block(340,40); block(360,40); block(380,40); textSize(25); fill(0,0,0); text("Stab Nation!!!!!!",5,300);

} if(level == 7){ pStartX=10; pStartY=10; endX =280; endY =20; if(begin==true){playerX=pStartX; playerY=pStartY; begin=false;} if(playerY>410){playerX=pStartX; playerY=pStartY;} if(playerY+10>endY&&playerY-30<endY&&playerX+10>endX&&playerX-30<endX){level+=1; begin=true;} fill(0,0,0); rect(endX+cameraX,endY+cameraY,20,20); block(0,40); block(20,40); block(40,40); block(60,40); block(80,40); block(100,40); block(120,40); block(140,40); block(160,40); crab(100,40); //crab that starts at these coordinates block(180,40); block(200,40); block(220,40); block(240,40); block(260,40); block(280,40); block(300,40); block(320,40); block(340,40); block(360,40); block(380,40); textSize(20); fill(0,0,0);

text("Watch out for the crab!!!",0,275); text("Warning, the crab can't fall or",0,300); text("go up and down, so it will float.",0,325); text("You only have to jump over the right",0,350); text("claw, the rest of the crab can't hurt you.",0,375); //makes the crab free to move from the starting location

}

if(onSomething==false){playerY+=2;}

if (keyPressed) { if (keyCode == LEFT) { playerX-=2; } else if (keyCode == RIGHT) { playerX+=2; } else if (keyCode == UP&&onSomething==true&&timeJump<20) { jump=true; } }

if (jump == true){playerY-=4; timeJump++;}

if(timeJump>20){jump=false; timeJump=0;} onSomething=false; cameraX=200-playerX; cameraY=200-playerY;

}

void block(int blockX,int blockY){ fill(255,255,0); image(sand, blockX+cameraX, blockY+cameraY,20,20); if(playerX > blockX-10 && playerX < blockX + 30 && playerY + 10 == blockY){playerY = blockY -10; onSomething=true;}

} void spike(int spikeX,int spikeY){ fill(100,100,100);

if(playerX > spikeX-10 && playerX < spikeX + 30 && playerY + 30 > spikeY && playerY - 10 < spikeY){begin=true;} triangle(spikeX+cameraX, spikeY+cameraY,spikeX+20+cameraX, spikeY+cameraY, spikeX+10+cameraX, spikeY-20+cameraY); } void crab(int crabStartX,int crabY){ fill(100,100,100);

if(playerX > crabX-10 && playerX < crabX + 25 && playerY + 30 > crabY && playerY - 10 < crabY){begin=true; crabX=crabStartX;}

if(playerX<crabX){crabX-=0.5;}; if(playerX>crabX){crabX+=0.5;}; image(crab,crabX+cameraX,crabY-20+cameraY,40,40); }

An error I see in developer tools in chrome is "crab.bind" and how it is null or something. Thanks for your help in advance.

BleuBox

You may want to consider formatting your code so other forum users can better understand it.

thegmanyk

Thanks BleuBox, I will try this next time, it's control o, right?

kfrajer

Edit post, select code and hit ctrl+o. Ensure there is an empty line above and below your code block.

Kf