SNAKE GRID

As I continue to work on building out the snake game. I also get my first taste of using CSS Grid.

Why CSS grid?

What makes grid work for this game is that. We can set the game board up with equal columns and rows.
I set my board up to h…


This content originally appeared on DEV Community and was authored by Doug Jones

css grid logo
As I continue to work on building out the snake game. I also get my first taste of using CSS Grid.

Why CSS grid?

snake game logo
What makes grid work for this game is that. We can set the game board up with equal columns and rows.
I set my board up to have 21 equal columns and 21 rows.

Mapping out the grid?

x y coordinates
Using X, Y coordinates to help track the movement of my snake but also set up random location for the food to pop up on the grid.
X being the horizontal and Y being the vertical.

While learning to play around with grid it also helps with building function to test user input for direction and other things.

While I'm not master or expert the experience of using grid has opened up a door to try some new things.

Hope you keep pushing into some new areas. If you haven’t played around with CSS grid I encourage you to try it and share you experience with others.

Happy Coding 👨🏿‍💻👨🏻‍💻🧑🏾‍💻👩‍💻


This content originally appeared on DEV Community and was authored by Doug Jones


Print Share Comment Cite Upload Translate Updates
APA

Doug Jones | Sciencx (2022-04-18T03:11:20+00:00) SNAKE GRID. Retrieved from https://www.scien.cx/2022/04/18/snake-grid/

MLA
" » SNAKE GRID." Doug Jones | Sciencx - Monday April 18, 2022, https://www.scien.cx/2022/04/18/snake-grid/
HARVARD
Doug Jones | Sciencx Monday April 18, 2022 » SNAKE GRID., viewed ,<https://www.scien.cx/2022/04/18/snake-grid/>
VANCOUVER
Doug Jones | Sciencx - » SNAKE GRID. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/18/snake-grid/
CHICAGO
" » SNAKE GRID." Doug Jones | Sciencx - Accessed . https://www.scien.cx/2022/04/18/snake-grid/
IEEE
" » SNAKE GRID." Doug Jones | Sciencx [Online]. Available: https://www.scien.cx/2022/04/18/snake-grid/. [Accessed: ]
rf:citation
» SNAKE GRID | Doug Jones | Sciencx | https://www.scien.cx/2022/04/18/snake-grid/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.