this post was submitted on 04 Oct 2023
11 points (86.7% liked)

Web Development

3454 readers
1 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Related Communities

Wormhole

Some webdev blogsNot sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

CreditsIcon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 2 years ago
MODERATORS
 

I quite new to web development. I created a simple game which suppose to raise awareness to the RP syndrome (which I suffer from). The simple goal is to find Waldo but the twist is that there is nothing but him on the screen.

I want to add a "flashlight courser effect" meaning that the only visible part of the screen should be the one around the courser (for some fixed or maybe chosen radius). But, I don't want the rest of the screen (the non-visible) to be black but white / blank (as this is in a way the way that I see the world). The other elements (buttons, score and counter) should stay visible always.

Can someone advice me on how can it be done? Ideally there should be two switches (on the corner) one controlling the mode (full visibility vs limited field of vision) and the second one controlling the type of "darkness" (black vs white).

Here is the link to the repo with the current code: https://github.com/menisadi/RPWaldo

Thanks in advance

Update: Thanks everyone!!! I used the SVG idea and added the flashlight effect" (even added a switch to toggle the "flashlight mode" on and off). Working great. Thanks!

you are viewing a single comment's thread
view the rest of the comments
[–] [email protected] 5 points 1 year ago

I looked up a guide, I wasn't too far off but this shows a better way to do it:

https://www.geeksforgeeks.org/how-to-create-a-spotlight-effect-using-html-and-css/

Just make your own image and get rid of this part:

/* Reduce the brightness of the image */ .img { filter: brightness(10%); }