Hello there. I am making a game in processing and it works fine, but I am trying to upload it to openprocessing.org but I’m running into some issues.
I pasted my code on a new sketch and uploaded all of the files onto the site, but I am running into the following error: Cannot read property ‘bind’ of null.
I tried looking up the cause and how to fix this issue, but my attempts did not work.
Here is the sketch on openprocessing: https://www.openprocessing.org/sketch/559876#
We can’t use libraries written in Java (like your SoundFile there) in JS! 
Either hack your way to get sound using JS itself like this Mario sketch did: 
https://GoSubRoutine.GitHub.io/PjsGameEngine/codebase/
Or then rewrite it in JS (or some other language transpiled to JS, like TypeScript and CoffeeScript) targeting the library p5js:
Thanks for the reply! I didn’t what caused the error in the first place.
I will definitely look into this.
Alright so I tried to upload the game without the audio to at least play it online, and still got the same issue.
I looked into it and preloaded the images and the font to get rid of the error, and it worked, kind of.
So now it doesn’t play, its just a blank screen. link
Not sure why this is happening. I have uploaded the image files to openprocessing.org and it still doesn’t run the game.
Besides using 2 /*@pjs */ directive comment blocks, those image filenames don’t match the 1s you’ve uploaded there! 
They even lack the file extension “.png”! Capitalization fails to match either! 
For example, the 1st image you request in /*@pjs */ is “imgHeart1”.
However, the uploaded filename is just: “heart1.png”. 
Ok so I tried using only 1 @pjs comment block and matched the files I had:
/* @pjs preload="heart1.png, heart2.png, map1.png, Zombie-up.png, Zombie-down.png, Zombie-left.png, Zombie-right.png, background.png, Crate-img.png, Health-img.png, volumeWhite1.png, volumeWhite2.png, bullet1.png, bullet2.png, bullet3.png, DAY-ZERO.png, devlogo.png, Arial.tff"; */
But it’s still not playing and I’m not sure why.
Thanks for your continuous help 
Really appreciate it
font="" in order to preload font files: 
Fixed the map name and added the font file + the @pjs directive. When I hit F12 I am getting the following error now and I don’t know what it means:
Uncaught TypeError: Cannot read property 'bind' of null
at eval (eval at attach (processing-1.4.8.js:718), <anonymous>:1340:27)
at Processing.Sketch.attach (processing-1.4.8.js:719)
at executeSketch (processing-1.4.8.js:21448)
at new Processing.Processing (processing-1.4.8.js:21483)
at pjs_OPextension.js:7
at dispatch (jquery-1.11.1.min.js:3)
at r.handle (jquery-1.11.1.min.js:3)
(anonymous) @ VM556:1340
attach @ processing-1.4.8.js:719
executeSketch @ processing-1.4.8.js:21448
Processing.Processing @ processing-1.4.8.js:21483
(anonymous) @ pjs_OPextension.js:7
dispatch @ jquery-1.11.1.min.js:3
r.handle @ jquery-1.11.1.min.js:3
load (async)
add @ jquery-1.11.1.min.js:3
(anonymous) @ jquery-1.11.1.min.js:3
each @ jquery-1.11.1.min.js:2
each @ jquery-1.11.1.min.js:2
on @ jquery-1.11.1.min.js:3
(anonymous) @ iframe_giveFocus.js:2
sketch_console.js:78 Uncaught TypeError: Cannot read property 'message' of null
at sketchConsole.showError (sketch_console.js:78)```
Edit: Here is what I did to the @pjs:
/* @pjs preload="heart1.png, heart2.png, Map1.png, Zombie-up.png, Zombie-down.png, Zombie-left.png, Zombie-right.png, background.png, Crate-img.png, Health-img.png, volumeWhite1.png, volumeWhite2.png, bullet1.png, bullet2.png, bullet3.png, DAY-ZERO.png, devlogo.png" font="arial.ttf";*/In order to have a sketch automatically transpiled by the Pjs library to JS, we need to make sure it sticks to its API: http://ProcessingJS.org/reference/ 
For example, inside your class Leaderboard’s constructor, you attempt to createReader(), which isn’t available to Pjs!
Thanks for the replies once again!
The initial purpose of posting our game online was to have our friends have it a go. I guess we can’t do that since we have file reading/writing.
Oh well, it was worth a shot.