Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 30, 2021 04:33 am GMT

Writing a command system in JavaScript

If you search Google for "text adventure" and open the Developer tools, you get a neat little text adventure game to play, which involves the blue G finding his friends red o, yellow o, blue g, green l, and the always quirky red e.

text-adventure

Pretty hard

I started wondering how they did this: They implemented a whole command system without using any external stuff, with only plain JavaScript. And so at once I started digging through the code, immediately stopped because it was obfuscated, and started thinking. The result was this simple trivia quiz (hosted here).

Quiz!

I'm really bad at trivia.Wondering how I'm styling those logs? Check out this explainer I wrote

How does this even work?

yes, no, north, moon, they all don't seem to be anything. If you open the DevTools and run them, you'll just get a Uncaught ReferenceError: yes is not defined. But that gives us a hint why don't we define it?

const yes = "yes";// Later...yes// => "yes"

That works perfectly, but we have no way of saying whether it was called. But then, we can use getters.

Quick demo of getters

const obj = {  foo: 'bar',  get foo() {    return 'something entirely different'  }}obj.foo //=> 'something entirely different'

We obviously can't use getters on global variables, but we can just set the variables on window and add getters to them:

Object.defineProperty(window, "yes", {get: () => {    // Do something    console.log("Got yes");    return "yes";}});yes// => "yes"// => "Got yes" (logged to console)

And that's basically it, you can just keep setting variables statically or dynamically, and you basically get a command system!

What are the uses of this? I dunno, all this can be done by using regular functions instead of this. Maybe easter eggs? Maybe for some debugging?

I can't wait to see people writing code like this:

Object.defineProperty(window, "main", {get: () =>  {...}})main;// Wait, is main supposed to be a function or something?// Linters are gonna be angry...

Original Link: https://dev.to/siddharthshyniben/writing-a-command-system-in-javascript-ifd

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To