I am not finished yet

First of all thanks to the feedback from some. It gave me a bit more motivation to work more on this project.

Somebody bothered the loading timer after each round and guess what i also didn’t like that. So I fixed it. The cause was that each time a ghost was placed onto the canvas a new HTML image tag would have to be created, source set to the ghost image URL and than the script had to wait for the browser to load the image and only afterward it could place it onto the canvas. I fixed that by loading each image at the start of website loading. This way I already have all images loaded and only need to print them to the canvas no waiting needed.

There was also this major randomness error. If you remember from an older post I did some random generator thing which makes it impossible to spawn too few ghosts while still allowing random positions on a mask without too much hugging each other.

What i did not notice back then because of the mask, that if the mask isn’t applied the ghosts form a straight line from top left to bottom right. And guess what the error was:

if (delta(g.x, x) < ghostSize / 2 || delta(g.y, y) < ghostSize / 2) vs if (delta(g.x, x) < ghostSize / 2 && delta(g.y, y) < ghostSize / 2).

I used and OR instead of and AND logic operator. It took me 30 mins to figure out :(

Another person mentioned they had a optimization warning in their console. I did not had such a warning because I use Firefox personally. I also test on chromium but i don’t look into logs there, how ever now i did. The Dev tools of chromium really improved a lot, but i am still going to use Firefox as main browser.

Well, I fixed all warnings chromium gave me.

The context of a HTML canvas has an optimization flag in case you request data from it frequent what i do. I just had do set this option to true.

Also the drawing part of the ghosts is now not blocking the main thread entirely with timeout calling the same function which acts like a for loop to distribute work over time. Otherwise the website would freeze for a second because printing images to a canvas is very sloww for some reason I don’t want to get into now.

For the loading part i threw a bit CSS and HTML together making up a progress bar and added some random phrases so users don’t get bored.

Furthermore instead of creating new HTML tags each scene change the code now already has them in the HTML code loaded but changes their visibility. In theory this should improve performance because the browser doesn’t have to create new elements each time.

Last small improvements on my ghost game 👻

Code

I reorganized parts of the code to make it, hopefully, more readable.

Permission problems

I have a browser with a bit more strict rules that broke my game. For that i made a check if the browser lies about color values of pixel and if that happens, we tell the user to please give us the permission.

Canvas sizing

Now after every try, of the game, the canvas resizes instead of only when reloading the page completely.

What could be added?

I had some ideas for what could be next. But i want to have a shipped project + move on with other projects. So i only list them here because i thought they are interesting.

• A seed calculated randomness generator to play against friends with same picture.
• More options of backgrounds and ghosts.
• Different ghost sizes.
• Different art styles.
• Dark mode.

👀 Now you can actually play Ghostly party on the web

I only did minor improvements today.

In earlier versions of the game ghosts started plopping up on the canvas after one another and the worst part was that the ghost you should search for was always the first one because the browsers would use the cached version of the ghost, which obviously was way faster. To fix that i added a small loading screen which hides the canvas and makes a circle spin, in an CSS animation, until the canvas was finished drawing all the ghosts.

There was also a dumb bug where i miscalculated the time the player took for a round I calculated Math.round(deltaTime / 60 * 100) / 100) when it should be Math.round(deltaTime / 60 * 10) / 100). There was only one 0 too much.
:[

Sometimes there are just those dumb bugs…

I also finally deployed the game onto a web server, where it can now be played. https://ghost.foxors.de

However before shipping i will try to find some bugs and add some icons and others stuff and generally try to polish up and tie loose ends together.

Have a great day! or night or noon or whatever timezone you are in… :)

Hello, everybody!

Today i fixed the width and height of the canvas. So that when you have a large screen you get a large canvas and if you have a smoll screen you get a smoll canvas. (Dynamic canvas size)

I also fixed an issue where you couldn’t click the ghosts after scrolling, by taking scroll distance into account of the win condition check.

I also made, just for fun, that when you find the right ghost and click on it. You get a zoomed in (cropped) image of them in the picture.

Next thing would be to release it on my website…

I managed to implement the background. But wait! There are actually 2 backgrounds. One is a mask that masks specific areas, where ghosts are allowed to appear and the other one is the actual background with coloring. This should prevent ghosts from appearing at completely random nonsensical spots.

I also programmed in that ghosts respect each other and spawn in some distance from one another, to not make it too crowded.

But this created a new problem. The pseudo randomness is… well random. So there is a slight chance the ghost you need to find doesn’t even appear because you had bad luck. Furthermore many ghosts don’t appear. The script tries to spawn 50 total ghosts, in case one fails it will retry finding a position for that ghost 100 times before giving up and not spawning it. And out of the 50 only 10 manage to actually spawn.

I will have to look into another solution to finding the random positions.

I got many many drawings of a variety of ghosts from a relative and they remembered me of picture books where you would have to search a person or object among many in it.

So i started programming a small website where you have to do exactly that.

After showing it to the person who made the ghosts, they made more ghosts and a background. Now i will have to implement that :)

For this to work i rewrote the entire thing with a canvas instead of plain images moved with transformation style sheet which makes it possible to implement the background.

While I tried to I noticed that it was a bit scuffed working with images in canvas because you have to:

1. Make a HTML image
2. Let the browser load it
3. And only afterwards you can put it on the canvas.

But i still managed to pull it off.