On a sunny weekend, the transparent curtains woke me up from my sleep. My brain said that it was Saturday and I could have a lazy morning. So I happily opened my Mac to watch two episodes of Rick and Morty and got up to wash.
I couldn’t wait to open the corresponding website, and found that the browser prompted no Internet. Only then did I find that my action was too flowing, and my computer hadn’t had time to connect to WiFi
So I decided to revisit this classic game.
Popular science: Chrome browser is the official browser of Google home, which can be used to experience nanbowan all over the world. When users visit a website without network, the browser will prompt “no network link” (that is, the picture above), and press the space bar to wake up a little dinosaur running brush points game.
If you want to play when you have a network connection, you can directly enter in the address bar:chrome://dino
Out of the sensitivity and curiosity of my profession, I suddenly have a question:This should be done with JS, right?
I’ll open the console. Why don’t I look at all the global variables first?
Too much, I don’t have the patience
I stopped and began to think about the feasibility of all this:
- What am I doing?Try to customize the game
- Why look at global variables?Because suppose that the object about the game is exposed to the whole situation
- What if it’s not exposed?OK, then I’ll give up (I don’t want to dig source code in sources on weekend mornings)
In other words, if I don’t find that object in the global variable, I can give it up selectively.
If you look at the picture above, it’s not difficult to find that many of these 251 global variables are old friends. Name, history, location, onclick, onerror… These variables obviously have nothing to do with this little dinosaur. Printing them out is just to fill the number, and it wastes my time to find the target, so I have the first problem:How to quickly find global variables defined by developers?
If I have a normal window… No, no, if I open a new empty window!
In the console of the newly opened window, I get this result:
In other words, in this little dinosaur run game,Google’s front-end engineers injected up to 55 global variables into windows（251-196）…
Why 55 at most? Because the version of chrome and the installed chrome plug-in will affect the number of global variables. For example, react developer tool will inject two global variables into window.
So the question comes: how to get these 55 injected global variables? After copy and paste, compare one by one? It’s so low. Let me see
Build a new window on the basis of the original window… Isn’t that rightiframeOh! Iframe doesn’t have windows, but it doescontentWindowIn principle, there should be little difference in attributes. So now you just need to create an iframe,Take the global variable of “content window” in it to filter the global variable of the current “window”, and you can filter out the redundant 55 “suspects”。
With ideas, it’s much easier to write code
After entering these codes on the console, I get the following result:
In this case, 45 global variables were selected.
45 is better than 200. When I open this array, I find a guy with a suspicious name
Isn’t runner the “running dinosaur”?
Let’s see what it is!
Emmm is actually a function, huh? Function, the first letter is also capitalized, this familiar flavor, this is not a constructor it! As the saying goes,The treasure of constructors is in prototypeAfter looking at the treasure, I found a treasure namedgameOverHow to do it,
This function name, is it thatThe way to let little dinosaurs die？ In that case, oh, I’ll take it with my backhandCovering with empty functionsIt’s too late. therefore…
Then I found another interesting way:
As the name suggests, it’s used toSet the running speed for the little dinosaurBut how to call it?The instance object created by the constructor can access the variables and methods on the constructor prototype through the prototype chainIn other words, if you can find the corresponding instance of the little dinosaur, you can directly call the “setspeed” method. Now that Google’s front-end engineers have made so many variables global, will this little dinosaur instance also be stored globally? I reexamined the 43 extra global variables, but I didn’t find them. I subconsciously entered this “runner” constructor. It’s really a village with mountains and rivers full of doubts
I don’t even need to look at all the code of the ＂ runner ＂ function to know that the original instance is stored in a ＂ instance ＂_ In the “runner” attribute of,On the importance of good variable names,OK, then I’m not welcome. Call it directly!
When I gaze at this flying invincible little dinosaur, I suddenly feel that everything has become
If you want to getOriginal reading experience，Welcome to clickThis portal (for a more complete reading experience).
- If you like my writing style and content, welcome to “like, collect and pay attention to” the third company~
- My official account is:Liu Kaili, get more fun and practical posture, by the way, prevent lost.