the initgrid() function prepares the grid. The play area in virtually divided into a 200?200-pixel grid having 10?10-pixel cells. these diagrams are not only helpful for yourself but also helps if you are working in a team making team communication easy and unambiguous. there are other uml diagrams which may help you describe your game project. You may also want to add more state diagrams for prominent objects to clarify. there is also a 'dead' state if snake hits itself while moving. snake eats food when encountered while moving. while moving in any direction when a key is pressed, the snake goes to 'deciding' state to determine which key was pressed and then again goes to the respective direction. you can move snake in all four directions using arrow keys. In the diagram, edges represent the actions and the ovals represent the states a snake is in after the specific action. many forms of state diagrams exist, which differ slightly and have different semantics.' state diagrams require that the system described is composed of a finite number of states sometimes, this is indeed the case, while at other times this is a reasonable abstraction. Here, uml statechart diagram may also help to understand different 'states' of the snake during a game.ДЄccording to wikipedia: 'a state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. Screen 3: snake can re-enter the playing area from the opposite edge after leaving it from an edge. Screen 2: after eating (hitting) food item the snakeвЂ™s length increases and food item appears at another random location.

Screen 1: snake (square) waiting for a key-press to start moving. We can use storyboard technique to graphically represent our idea.ДЄccording to wikipedia: 'storyboards are graphic organizers in the form of illustrations or images displayed in sequence for the purpose of pre-visualizing a motion picture, animation, motion graphic or interactive media sequence.'ДЇor your convenience i am adding the description of each storyboard screen: increasing length and speed of the snake adds difficulty to the game over time. length of the snake also increases after eating randomly appearing food. Initially a small sized snake appears on the screen which keeps running for the rest of the game like endless runner. this game was popular long ago, even on consoles and old cell phones with text user interfaces. let me illustrate this method with an example. in the first phase, we find the answer 'what' we want to create, and we reserve the answers to 'how to do' for the upcoming stages.

you need to develop a high level of understanding, without going into the fine details. It receives an old state, movement in the form of string and time from the previous update.In the beginning, before you start making a new game, you need to prepare the concept (logic) of the game.

To see if the head intersects some segment we project head to the segment line, and if the projected point is inside of the segment and distance between it and the head is less than half of the cell it means that the game is over. Self-intersection can happen only when the number of points is more or equal to five. To see if snake crosses boundaries, we take coordinates of the head and see if they are in the range between zero and width, height appropriately. #region constants const STOP_KEY = 32 const MOVEMENT_KEYS =

Javascript screen snake