Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
preface
Gamification is an important direction THAT I want to explore in the future. I have done some research and found that there are many excellent games in the middle school. I have finished every one of them. This article is for you to share.
The following games are free
This article is accompanied by video: Go to video play
Flexbox Defense
Tower defense is a 12 level tower defense game that allows players to use align-items, context-content, flex-direction, and align-self syntax to position defense towers to defeat attacking enemies.
Game address: www.flexboxdefense.com/
How the game feels: logically it does look like a real game, and the wrong syntax will cause the game to fail. Unlike several other games, only correct syntax is allowed.
Flexbox Froggy
It’s like a puzzle game with 24 levels. The player needs to set the frog in the correct position by using the syntax align-items, context-content, align-content, flex-direction, align-self, flex-wrap, flex-flow, etc.
Play at flexboxfroggy.com
Game experience: the game is not very good, but through the puzzle can learn flexbox common grammar, using the wrong grammar will have effect, but can not pass. For example, in the screenshot puzzle, you need to find a way to match the colors of three frogs with the colors of lotus leaves using Flex syntax.
Grid Garden
Placed class decryption game, and Flexbox Froggy is the same author. There are 28 levels in the game, Grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, Grid-template-columns, grid-template-rows, etc.
Game: cssgridgarden.com
Game experience: not very playable, but you can learn the common syntax of grid well through puzzles, using the wrong syntax will be effective, but can not pass the test.
CSS Diner
Is a puzzle game, the main test of your CSS selector master, a total of 32, can all beat through you must be CSS selector expert.
Flukeout.github. IO
Feel of the game: the gameplay is ok, and the mastery of CSS selectors will really improve during the puzzle solving process. There are no hints, and if you can decrypt it all without searching for the answer, you’re definitely an expert.
Flexbox Zombies
Puzzle game, in which you use flexbox syntax to point arrows at zombies. There are 12 chapters, each with several levels.
Address: game mastery. Games/flexboxzomb…
How it feels: The graphics are great, really designed as a serious game, but the gameplay is just so-so. The level can only be passed with correct grammar.
conclusion
Through the gamification of the way to learn, very intuitive, impressive. But not only to have a game, but also to skillfully combine knowledge points into the game, the challenge is very big, I hope I can soon understand the mystery…
I'm big Handsome, an old programmer
Let everyone happy learning programming is my ideal
Dev. To /devmount/8-…