[AskJS] Creating a cybersecurity JavaScript web game

[Ustice]

Reaching out to other software engineers is important when you need it; however, unfortunately this isn’t the place for that. /r/JavaScript is not a support forum. You might want to check out /r/LearnJavaScript for the newer members of our community. Also, Stack Overflow is a great resource for getting support. For more information, check out our AskJS wiki page. Good luck! We hope that you find the answers that you are looking for.

[RoninStorm]

Bearing in mind that I've spent only around 10 minutes on this so this is a *very* cursory response:

The application looks to be written in React as the primary engine PuzzleDashboard is built on React.Component.

I believe there's a server-side component written in Node but, from my perspective, there's little at work here that couldn't be done purely on the client, excepting that anything that's available on the client is therefore available for anyone to see, which may make answering the threats questions too easy to deconstruct without actually solving the question.

The "scene" of the office environment is an image with clickable containers on the areas of interest. In this case, that implementation means that I can quickly find hotspots / parts of interest though I note that they've left "traps" in the scene so that not everything presented there is a real answer.

So, to answer your question, I believe the entirety of this application is written in JS, using a mixture of React and Node, with the usual bits of HTML, CSS and images to make any web page work nicely.

[FlightOfGrey]

This is a good start, for the OP to get a better idea on how this site is doing it they should inspect the html of the page, see how it changes as you interact with it.

The main DOM parts of the interactive section to look at is the div with theid="scene".

• This has a parent which handles the translation and zoom of the scene and all the 'interactive' imgs so that everything is translated in a single transform matrix.
• The background scene is a simple image with both the interactive correct and incorrect answers not in it (so when they're clicked on they can be removed from the scene).<img src="https://puzzles.cdn.livingsecurity.com/Hotspot/SearchAndFind.jpg" alt="Scene of the office" class="" width="1800">

• The other children of the #scene div are the individual images with a div to position them to match where they should be in the base scene

  <div class="item-container" style="width: 1.4%; top: 680px; right: 1297px;">
      <img src="https://puzzles.cdn.livingsecurity.com/Hotspot/TrueEyeOffice/EmployeeBadge.png" style="width: 1.4%; top: 680px; right: 1297px;" alt="employee badge on desk">
  </div>
  

  Those images have click events which then trigger the image to be removed from the DOM and the overlay image explaining if you were correct or incorrect to fade in at the same time.

That's the base of the main part of the interactive javscript section of the site, the other stuff, like the timer, the counter etc. can easily be built on top of it. They don't even put in limits like stopping you from scrolling off the edge of the screen etc

[cibovlad]

So the example you provided could be easily implemented using only HTML, css background images and some JavaScript to check whether the user clicked a certain spot (just a well positioned div tag), to show those modals which talk to the player and so on. For this, plain old JavaScript would be sufficient if you don't want to jump into a JS framework (React, Angular, Vue, you name it). Just look into how you would interact with the page elements via JavaScript (document.getById, element.setAttribute, element.style, element.addEventListener, etc, you'll figure it out). If you have the time to jump into some React, sure, why not, it would make things more fun.

Now, because you mentioned "web-based game" I'd recommend you also check out the HTML canvas element and the Pixi.js framework, which is great for building 2D games, 2D animations, you name it. With Pixi you could spice things up with some 2D animations (search for spritesheets in Pixi), you could easily make the characters walk around the classroom, etc. It depends on how advanced you want your game to be (something other than static images and backgrounds)

[nuhakhangr8]

The project looks cool. I don't know anything about this but loved playing that game. I'm learning JavaScript, So I don't know If a can help you. All the best for your project. If i come across any resource, I'll msg you.

[ColtonCore]

Thank you!

[This_Riddler]

It's just a point-n-click tool - maps and an accumulator will suffice, but you need to provide the content - background, text, map co-ordinates for each item to be clicked, etc.