It’s not often that I get around to playing games. Knowing myself, I can easily get sucked in to them and the time I would then use for tinkering with something else, improving my skills elsewhere gets poured in to a good ol’ game of Counter-Strike or the like.
However my friend Brian asked about a typing game that we were shown back at the Open Cloud Academy. It didn’t take me long to find it again: ZTYPE – the game is simple but fun, and more importantly a bit of a learning experience too.
The aim of the game is simple: you are a spaceship and you must shoot down the enemy spaceships by typing the corresponding words to them.
The number of words per level increases, their difficulty increases and your skill of typing faster and more accurate becomes a greater necessity. This is all great and fun, however the real learning part for me was stripping away various elements on the web site. I found the flashing side panel, the ads and links distracting.
I set about looking to see how I could remove them using Chrome’s dev tools. Using the Elements tab within Inspect, I am able to see the various styles and source code breakdown. Hovering over the different elements can often highlight the related class, table or element on the page as shown below:
By selecting the specific class or
<div> section within the code, I am then able to toggle various features of it. In this case I decided to hide it completely.
However this can be extremely useful when troubleshooting WordPress theme elements and issues, trying to identify what part of the code or theme is interacting with a specific section of the page. By right clicking on the element, I was able to hide it from the browser.
Going through all the different elements, and identifying everything apart from the game itself, I was able to clear up the screen so I was left with just the game.
As mentioned, these tricks do not only relate to improving your experience with this game, but can also transfer to removing unwanted content while viewing a site, troubleshooting design issues and adjusting and testing CSS code when designing your page.
I would definitely recommend playing around with the Elements tab within the Chrome browser just that much more. It’s a great feature to have and an amazing ability to utilize in order to adjust the look and feel of a site which would otherwise have ads and content that is unnecessary for our needs.