Added some basic components today. I wasnāt sure exactly how to structure my app, and what I have right now is a World component and a Stats component. I intend the World component to be the parent of All The Things⢠and the Stats component is text that displays the state for easy reference.
Currently, I intend on tracking in the state: the length of the snake, the number of mice friends, and the (x, y) coordinates of the snake head.
(x, y) position: Tracking the coordinates involves simple arithmetic with the arrow keys. I ended up going with a vanilla JS keyup event listener on document instead of on a component. I know the performance isnāt as good, but until I figure out how to get the equivalent of a global key listener via a component, this will do. The eventual goal is to have the user be able to hold down the arrow keys and debounce per second the keys that are pressed.
Length of snake: Every time the snake lands on the same coordinates as a fruit, the length of the snake increases by one and its sprite should grow by one segment. The reach goal is to have an animation that shows a bulge in the snakeās body where the fruit was, until it reaches the last segment and it becomes the new tail of the snake.
Number of mice friends: Every time the snake hits the same coordinates as a mouse, the mouse will join the line following the snake. Ooh, should the mice be moving around the screen? Should they compete for the fruit, too? This will make things complicated, hahaha. Exciting!
Will work on some simple sprites and rendering the noodle and their friends tomorrow on the screen. (Iām thinking itāll be 2D to keep it simple for now - transition to canvas later, probably?) Overall, feeling a bit more comfortable with React. I probably will not go into Redux unless Iām feeling ahead of schedule. It seems simple enough at the moment that I wonāt need to maintain/pass that many things in the state. (I hope these arenāt famous last words.)