Funny Screen Cleaner

@issu on Funny Screen Cleaner · 12 days ago

30m 26s logged

added cozy, cyberpunk and cartoon themes. replaced the pointer with the mob. updated the overall css by chnaging the cleaning area, added borders, modified screen styles and shades. also updated the js with the character movemnet refinement, increment in delay time, move mevemnet smoothnes.

Ship #1

@issu on Funny Screen Cleaner · 12 days ago

I made a small fun web app that feels like a mini browser game. It is a foggy dirty screen where a tiny cleaner character tries to clean dust, water drops and fingerprints, and when you move your mouse you actually wipe the screen. It is built only with HTML, CSS and JavaScript, no frameworks.

The hardest part was the canvas and the wipe effect. I had to figure out how to draw fog, dust and drops on the canvas and then erase them smoothly with the mouse without breaking everything.
It was also challenging to move the cleaner character and switch its images for different moods (walking, cleaning, dancing, slipping, sleeping, angry, drinking coffee) while keeping the layout responsive and the themes (cozy, cyberpunk, cartoon) working.

I am proud that this is my first “bigger” front‑end project that actually looks like a small game and not just a basic page. It has animations, canvas, theme switching, buttons that really do something and a funny character with small speech bubbles, all written by me as a beginner.

I am also proud that I kept the code simple enough that other beginners can read it and learn about DOM, CSS gradients, canvas drawing and responsive design from a single project.

What should people know to test it?
Use a mouse or touch to move over the dirty screen and watch the fog, dust and drops get wiped.

Click the buttons to clean, add more dirt, and change themes (cozy, cyberpunk, cartoon).

Wait for or trigger random events to see the cleaner character do funny actions and show speech bubbles.

Try it on both desktop and mobile to see the responsive layout.

1 devlog
15h
9.02x multiplier
90 Stardust

Try project → See source code →

Open comments for this post

@issu on Funny Screen Cleaner · 12 days ago

15h 8m 1s logged

This is a small fun web app I made using only HTML, CSS and JavaScript. In this app there is a tiny cleaner character who tries to clean a dirty foggy screen with dust, drops and fingerprints, and when the user moves the mouse the screen gets wiped.

What is inside the app

foggy screen effect with gradients, blur and low‑contrast colours dust and dirt spots sitting on top of the fog water drops and fingerprints drawn on the canva swipe effect with mouse so the dirty layer gets erased as you move funny cleaner character who walks, cleans, dances, slips, sleeps and gets angryrandom funny events with small speech bubbles and jokes3 themes: cozy, cyberpunk and cartoon, changed by CSS variables and JS buttons to clean, add dirt, change theme and trigger events responsive layout that works on desktop and mobile screens.

What I learned from this project

From this project I learned how to connect HTML, CSS and JavaScript together for one web app, instead of writing them separately.
I learned how to use more advanced gradients, shadows and colours in CSS to create a foggy dirty screen feeling. I also learned how to add images with the img tag in HTML and then reuse those same image files in JavaScript for animations.

I practiced changing the background and theme using CSS variables and JS, so I can switch between cozy, cyberpunk and cartoon styles with simple code. Another big thing I learned was how to use the canvas: drawing fog, dust and water drops there and then erasing them with the mouse to make a wipe effect. I moved the cleaner character on the screen and changed its images for different moods like walking, cleaning, dancing, slipping, sleeping, drinking coffee and being angry.

I also showed small speech bubbles with funny text using JS and made the layout responsive so it works on both desktop and mobile. For me this project feels like a cute mini browser game, not just a normal website. It is simple to understand and fun to play, but inside it uses animation, canvas, DOM, buttons and theme changing, so beginners can study it and learn many front‑end ideas.

This is the first time in my life I tried to make such a big project in a more polished and structured way. I know it is not perfect, but I learned a lot and I tried my best to make it clean, fun and educational. I hope reviewers will enjoy playing with the foggy screen and watching the little cleaner work hard. Thank you for reading.