Snake game App Inventor (PART 2) | How to make Snake Game in MIT App Inventor

Hello friends and welcome to Obsidian Soft,

We started the classic Nokia snake game in the last tutorial and we will finish its code today.

We are going to start with the snake’s movement logic.

First, remember the screen coordinate system: The x coordinate increases when we move right and decreases when we move left. The y coordinate increases when we move down and decreases when we move up. 


In each game loop i.e. clock’s timer event of 300 milliseconds, we will call a snake movement procedure.

Let’s see what will happen in this procedure:

Our snake head starts at position 50,50

State of the lists:

snakeXList = [50]

snakeYList =[50]

Let’s assume that the user presses the right arrow button.

So, in our moveSnake procedure, 

We will check the direction and if it is equal to RIGHT, we will insert a new head at index =1 with movement pixels=16 added to the previous head’s X i.e. 50. Our new head’s Y will stay the same

So, now this is the state of our lists:

snakeXList = [66, 50]

snakeYList =[50, 50]

But as you notice, our snake has grown without eating food, so we are going to check if it has eaten food. If it hasn’t, then we will remove the tail, i.e., the last segment in our snake, which in this scenario is the previous head at index =2.

So, now this is the state of our lists:

snakeXList = [66]

snakeYList =[50]

You can see that our snake will look as if it has moved right in this cool way of just inserting a new head and removing the extra tail.


After another 300 ms, we will come inside the snake move procedure again and check for directions. Assuming that it is still RIGHT, we will insert another head after adding 16 to the previous head’s X.

So, now this is the state of our lists:

snakeXList = [82, 66]

snakeYList =[50, 50]


We will also check if the snake’s head is touching food which is true so we will not remove the tail.

So, this is the basic way our snake moves. 

Now, let’s work on the moveSnake procedure:

First, we make two local variables for storing previousHeadX and previousHeadY values which are values at index 1 for snakeXlist and snakeYlist. We need to store these for later use. Then we insert a new head at index 1 after calculating its new position depending on the value of direction.


So, depending on the direction, we have inserted a new head. 

Now, we will check if we need to remove the tail. I will work on the collision detection code later so let’s just put an if/else block from control. The condition being true will mean that food was eaten. I will work on that later but the other condition means food was not eaten so remove the extra tail. Tail is the last segment in our snake so it will correspond to index = length of list. Remember that we must remove it from both the X and Y lists.

Now, we will check for screen edges and give a new position to the head of the snake if it has reached an edge. For example, if the x of the head is greater than the canvas's width then this means that it has reached the extreme right of the screen. In such a condition, we are going to change the x to 0 so that the head will now appear on the left side. We will do this kind of logic for all sides.

Now, we have to write some code to detect collisions between circles. Why? Because we have the snake’s head that is a circle and it should detect when it touches the food circle. Similarly, we need to know when the snake’s head touches any other circular part of its body.

We will use the concept of  Euclidean distance. Euclidean distance is the shortest distance between two points (the length of the line between two points)

The formula is 

So, we can find this distance between the centers of two circles. If this distance comes out to be less than or equal to the sum of the radii of the two circles, then this means that the two circles are either touching or overlapping.

So, let’s make a new procedure for calculating this distance. It takes in five inputs where four are the x  and y coordinates of the two circle centers and one is the radius

Once we have the detection code, let’s complete our moveSnake procedure where we had to detect food.

We plug the call for detectCollision in our if condition. We will keep radius = circle size as we want the food to be detected even on touch.

What should happen when the food is supposedly eaten:

  1. Our score should increase by 1

  2. The score label should be updated on the screen.

  3. Food should be given a new position.

So, moveSnake procedure is complete.

Let's finally work on our game loop which is the timer event. First call moveSnake procedure.

Next, we are going to check for collision between the head and each part of its body using a for loop that starts from index 2 i.e. the second segment of the snake and we compare for collision with the head at index =1. We will pass radius as 4 instead of circle size as I want to decrease the sensitivity of collision so that if the snake’s head overlaps with any part of the body, game over is triggered and not just on touching (remember that the snake head is always touching its second segment). If you change the circle size to some other size, you will have to update this radius of 4 here too (make it half of your circle size ) otherwise your GAME OVER condition will be triggered as soon as the game starts.

If the collision is detected, we will make gameOver true and disable the timer so that the snake stops moving. A break block from control will get us out of the for loop as we don’t need to check further.

In the end, we just draw everything by calling Canvas.draw so this is our final game loop:


The snake game is finally complete.

You can also watch a video for this here:


Thank you for being patient and waiting for the part 2 of the tutorial.

Go to Part 1 of the Written Tutorial

I hope you enjoy making this game as much as I enjoyed designing and creating it for you.

Please don’t forget to subscribe if you haven’t done it yet so that you don’t miss any of the great tutorials that i have planned for you.

Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don't miss any of the great projects I have planned for you.https://www.youtube.com/c/obsidiansofteducation


Please like my social media pages for more educational resources and tips.
Pinterest:
For links to free educational apps, have a look at the educational apps page



Comments

Post a Comment

Popular posts from this blog

Jolly Phonics Group 1

Image
Free Jolly Phonics Group 1 worksheets (s, a, t, i, p, n) According to Oxford Dictionary, phonics is a "method of teaching people to read by correlating sounds with symbols in an alphabetic writing system". In simple words, each letter of the alphabet has a sound. Instead of teaching young children the names of these alphabets, the sounds are taught. For example "a" makes the sound /a/...this is exactly the sound that comes from your mouth in the beginning when you say the word " apple " or " ant ". The letter "a" makes a different sound in words like " arm " and " ate " but these rules are taught later.  Jolly Phonics is a synthetic phonics system where all the letters of the alphabet have been split into seven groups. Each group contains 6 letters or their combinations so a total of 42 sounds are taught. What do I mean by a combination of letters? Remember that the combination of letters "s" and "h...
Read more

Jolly Phonics Group 2

Image
Free Jolly Phonics Group 2 worksheets (c/k, e, h, r, m, d) Hello Friends, I am back with another set of worksheets for helping children learn their phonics sounds. As you might already know, I am a strong proponent of the Jolly Phonics system of synthetic phonics sounds. Jolly Phonics system follows a particular order of teaching alphabet sounds in which there are seven groups. The following image shows the seven groups of Jolly Phonics along with an extra group taught by my Phonics app on Google Play Store. My app called  Phonics Fun  is 100% Free so you can download it and use it on all your Android devices.  It teaches all the letter sounds and different phonics rules and follows the pattern of Jolly Phonics but it is available for free. It is the perfect way to master phonics as you can hear phonics sounds and also test learning by playing many matching games. Coming back to printable Jolly phonics worksheets, I have already published worksheets for practicing...
Read more

Jolly Phonics Flash Cards

Image
Gone are the days of A for apple, B for Ball...this is the time of synthetic phonics where each alphabet has a sound. Now, you don't teach children the name of the letter but the sound made by the letter. A has the sound that comes when we say the word apple, b has the sound that comes when we say bed, and so on and so forth. There are different systems of synthetic phonics but I have felt that Jolly Phonics is the best system. In fact, I made my first mobile app for my son based on the Jolly Phonics style of teaching. However, I know that many people want to limit screen exposure for their children so I decided to make these flashcards.  You can use these flashcards independently or you can use them along with my app called Phonics Fun , available on the Google Play Store. You can hear the sounds from my app. Practice using these flashcards and then, test learning using my app too...a win-win situation :) The Jolly Phonics flash cards are double-sided. I have told you in my previ...
Read more