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 4: Snake dies after biting itself :( 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.

In the beginning, before start making a new game, you need to prepare the concept (logic) of the game. Snake game using HTML5 Canvas and KineticJS

Java script screen snake