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!

  • glimse@lemmy.world
    link
    fedilink
    arrow-up
    7
    ·
    1 year ago

    (i haven’t done webdev in YEARS so I’m pulling this out of my ass) what about a bigass png with transparency that follows your cursor?

    • Spzi@lemm.ee
      link
      fedilink
      arrow-up
      5
      ·
      1 year ago

      Yes, or if you want to learn more about this approach, search for masks, layers.

      • glimse@lemmy.world
        link
        fedilink
        arrow-up
        3
        ·
        1 year ago

        Is that still the way? I haven’t touched web programming since like 2016 and I figured a ton has changed. Can’t even remember what JavaScript library I used for animation lol

    • menisadi@programming.devOP
      link
      fedilink
      arrow-up
      3
      ·
      1 year ago

      Interesting. But won’t it work only for the background? Waldo isn’t part of the background, he is a separate object as he changes position after each time you find him and click on it (I forgot to mention this important point).

  • navigatron@beehaw.org
    link
    fedilink
    arrow-up
    4
    ·
    1 year ago

    I would use z-indexes to setup the layering. Have a base layer, the “filter” layer, and then the ui on top.

    Basically 3 divs, with z-index 1/2/3 respectively. Put elements on the base layer or ui layer based on if you should see them always or not.

    For the filter, I would do an svg of a rectangle, big enough to cover the screen, and a hole in it. Then use js to set the svg’s position relative to the mouse.

    The svg could easily be made transparent, black, or even get that fade effect around the edges.

  • silas@programming.dev
    link
    fedilink
    English
    arrow-up
    2
    ·
    edit-2
    1 year ago

    I would look into a circular/radial CSS background gradient on a fixed-position fullscreen div with pointer-events set to none. You can make the center transparent and the rest whatever color/transparency you want. Then, use JS to set the circular gradient’s position relative to the cursor (use CSS variables if necessary)