Play games to improve your developer skills.
Tags: learning, resources
Published: 2021-11-05 19:55:14


Can you learn to code by playing games? Can games make you a better developer? Yes. I am listing some games that teach you coding concepts or improve skills that will help you code.

### Shortcut Foo
[Shortcut Foo](https://www.shortcutfoo.com/)
Keyboard shortcuts speedup your coding. This site teaches you shortcuts and muscle memory by playing a ninja fighting game.

>shortcutFoo was created by programmers for programmers in an attempt to make learning your editor fun, easy, and effective. Akin to the days of first learning how to type on a keyboard, shortcutFoo aims to help programmers accomplish more in less time and with fewer keystrokes.  --from their site.

First you practice a shortcut. Select the dojo for what subject you can to learn. An action appears on screen and you press the keys that command that action. You get several actions in a section. They repeat until you get them right fast enough. 
  In the fight section you can battle a ninja using those keystrokes as attacks. In the game two ninjas are lined up. An action like "Commit changes" appears on screen. You hit the keys or type the command and move your ninja along the line. First one to the end wins. You can even fight a friend by their username.
  Finally test out to unlock the next level. This section plays the same way as the learning section.


```
Know what the key combo of ⇧⌥DOWN (Shift + Alt + down keys) does on slack?

Jumps to the next channel or direct message with unread messages. 
```

You can learn shortcuts for languages, editors, or apps. There are dojos for JavaScript, python, ruby, VScode, terminal, and git and more. 

You can set reminders for days, a week, or even a month.

The basic levels are free but you must subscribe, $8 a month or $80 for an annual subscription, to unlock higher levels. There are personal and organizational options. Subscription unlocks all the dojos.
 

### Ztype
[ZType](https://zty.pe/) 
Need practice typing, play ZType. It's typing meets space invaders. Words fly out of a ship and you type the word to shoot it. Misspelling count as a miss. You can't shoot another word till you finish the first.
The words can be random or you can load some content. They have 'Cat in the Hat' and 'Alice in Wonderland' as options. You can add you own text or a website.
You can even load a post. Tired of that blog you've been writing? Shoot it.
Hate someone's take on a subject? Shoot it!

![space-ship shoot at words.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ml99yur9ztwtwmquhlm4.jpg)

Ztype has great music. With controls to change the sound level of music and effects.
I played this while in bootcamp to get that muscle memory going. I still play sometimes just for a quick game. If you are a student and are having trouble keeping up with the lecturer, try this. 
Ztype is sponsored by [Typsey](https://www.typesy.com/), a typing program. ZType itself is free but if you need more training, Typsey has a free 7-day trail and a $9 a month fee. 

### Flexbox Froggy
[Flexbox Froggy](https://flexboxfroggy.com/) teaches Flexbox by moving frogs around the screen. They list a property like `align-items` and you try different attributes to move the frogs to the lily pads. This is one of several code games from [Codepip](https://codepip.com/) by [Dave Geddis](https://twitter.com/geddski) They have 2 free games and a Pro account with more, that is $6 a month. The free games are Flexbox Froggy and Grid Gardens. The games mostly cover CSS but the are a couple HTML and JavaScript games.


### Grid Gardens
[Grid Gardens](https://codepip.com/games/grid-garden/) teaches you CSS grid while you tend a virtual garden. Similar to Flexbox Froggy you use grid attributes to place water on plants and poison on weeds. [video demo](https://www.youtube.com/watch?v=DGh44GzD-8Y).


### CSS Diner
[CSS Diner](https://flukeout.github.io/) beautiful minimalistic game that teaches CSS selectors. Not as much documentation on here, so it requires a little more experience than the other CSS games.  
At the top of the screen is a small table. Below that is CSS and HTML. Each level asks you to select something on the table. You read the HTML side and enter the correct CSS selector on the CSS side to advance.


### Thoughts

Do you play other code games? What would you recommend?

```
-$JarvisScript git push
```