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.

Minor improvements.

• I updated the design a bit
• Added java script for automatic date/time updating
• Improved the API from PHP a bit

The java script

I just take the h1 and h2 tags and set their inner text every 1000 ms (1s) to a date.
Time was easy because we just use new Date().toLocaleTimeStrin() for the date i hade to get a bit more creative ${("0" + dt.getDay()).slice(-2)}.${("0" + (dt.getMonth() + 1)).slice()}.${dt.getFullYear()} ${weekdays[dt.getDay()]} / ${months[dt.getMonth()]} All this is there to have leading zeros that only appear when the second digit isn’t used (0-9). Also i convert months and days with help of arrays to short strings that are getting placed at the end. I personally need number & name because i really can’t memorize the names for the months.

The PHP

The PHP code is now also caching the image from the Nasa API so that clients don’t have to call any other servers. I also made the php script read from the API key file, trim spaces and other characters that are there for some reason and than use it. Of course i also added the .htaccess file to block access to the API_KEY.txt

Furthermore i added headers to stop clients from caching so that when a new image from Nasa replaces the old one the clients get the new image displayed. May be not the best solution but it works!

Another thing I would like to add is that I made it so that when a image from the API is requested with special copyright it gets displayed in the footer. If the API doesn’t give an copyright notice the PHP script just default to Nasa.

So we got this new mission for making a new tab page with some API stuff.

Well… I did started it. I have made a simple website that can be used as a new tab. With a HTML form automatically going to duckduckgo. Therefore I actually still don’t have any Java script to work with currently. But you may ask how did I then requested thing from the free Nasa API. I do it through PHP. I have already made several applications with PHP so instead of following the tutorial I build everything without it (again…) was it a mistake? maybe? But now my PHP script asks every 24 hours the API endpoint for the updated info and than caches it until next time. This way clients only request from my website files + the API key is stored on the server and only used by the server + rate limit will not be a problem (i do 1 request per day, Nasa blocks at 1000 or something like that)

What i want to add with Java script is actually updating the time and date (currently server sends its time and it never gets changed) and i want to add shortcuts a bit like duckduckgo’s vim keybindings.

Maybe i also just make a quote of the day thing. Because, in my terminal, I have a Fox ASCII art that tells me every day a new quote.

fortune | cowsay -f fox

👀 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.

I used my modular system now to create a bunch of different applications required for a desktop.

• Window manager
• Finished the app start dock with icons for each application
• Added an application for the top with a date and time
• A start app that quickly tells you what is up
• A browser that is just an iframe

The last app (the Web browser) can’t be used to, well browse the internet. It sets a default URL automatically. I actually managed to implement a search box and a button to search. However many many websites don’t like being iframed. That is why i just hid the controls for now because why will you want to search the www when most websites don’t allow it like this.

The rest of the other applications were pretty problem free and i got everything up and working in a short period of time.

Next i will have to look at the Mission guide again on what i still have to make. Because i still don’t follow it :] .

I managed to make everything module based. I also started working on the application dock for the app icons. I have a working modular system, now i only need to create/finish each module. Originally i wanted to be able to minimize windows. However i didn’t get it quite working like i wanted to… now i removed it :| and only full screen and quit are implemented.

Working on the WebOs mission. Started making a module based design for easy development like the Sway Desktop environment and already did very basic design work. I still have to figure out how to use z-indexing for windows layering. I am trying to make everything from scratch myself. At the end my goal is to be able to switch every module out with ease. A bit like: want an animated background? just ‘install that application’