{"id":1394,"date":"2024-12-12T10:52:13","date_gmt":"2024-12-12T05:52:13","guid":{"rendered":"https:\/\/obsidianeducation.wordpress.com\/?page_id=1394"},"modified":"2025-02-10T08:44:59","modified_gmt":"2025-02-10T08:44:59","slug":"snake-game-app-inventor-part-2-how-to-make-snake-game-in-mit-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/snake-game-app-inventor-part-2-how-to-make-snake-game-in-mit-app-inventor\/","title":{"rendered":"Snake game App Inventor (PART 2) | How to make Snake Game in MIT App Inventor"},"content":{"rendered":"\n

We started the classic Nokia snake game in the last tutorial<\/strong><\/a> and we will finish its code today.<\/p>\n\n\n\n

We are going to start with the snake\u2019s movement logic.<\/p>\n\n\n\n

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. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

In each game loop i.e. clock\u2019s timer event of 300 milliseconds, we will call a snake movement procedure.<\/p>\n\n\n\n

Let\u2019s see what will happen in this procedure:<\/p>\n\n\n\n

Our snake head starts at position 50,50<\/p>\n\n\n\n

State of the lists:<\/p>\n\n\n\n

snakeXList = [50]<\/p>\n\n\n\n

snakeYList =[50]<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Let\u2019s assume that the user presses the right arrow button.<\/p>\n\n\n\n

So, in our moveSnake procedure, <\/p>\n\n\n\n

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\u2019s X i.e. 50. Our new head\u2019s Y will stay the same<\/p>\n\n\n\n

So, now this is the state of our lists:<\/p>\n\n\n\n

snakeXList = [66, 50]<\/p>\n\n\n\n

snakeYList =[50, 50]<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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\u2019t, 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.<\/p>\n\n\n\n

So, now this is the state of our lists:<\/p>\n\n\n\n

snakeXList = [66]<\/p>\n\n\n\n

snakeYList =[50]<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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\u2019s X.<\/p>\n\n\n\n

So, now this is the state of our lists:<\/p>\n\n\n\n

snakeXList = [82, 66]<\/p>\n\n\n\n

snakeYList =[50, 50]<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

We will also check if the snake\u2019s head is touching food which is true so we will not remove the tail.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

So, this is the basic way our snake moves. <\/p>\n\n\n\n

Now, let\u2019s work on the moveSnake procedure:<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

So, depending on the direction, we have inserted a new head. <\/p>\n\n\n\n

Now, we will check if we need to remove the tail. I will work on the collision detection code later so let\u2019s 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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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

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)<\/p>\n\n\n\n

The formula is <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

So, let\u2019s make a new procedure for calculating this distance. It takes in five inputs where four are the x\u00a0 and y coordinates of the two circle centers and one is the radius<\/p>\n\n\n\n

<\/p>\n\n\n\n

Once we have the detection code, let\u2019s complete our moveSnake procedure where we had to detect food.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

What should happen when the food is supposedly eaten:<\/p>\n\n\n\n

    \n
  1. Our score should increase by 1<\/li>\n\n\n\n
  2. The score label should be updated on the screen.<\/li>\n\n\n\n
  3. Food should be given a new position.<\/li>\n<\/ol>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n

    So, moveSnake procedure is complete.<\/p>\n\n\n\n

    Let’s finally work on our game loop which is the timer event. First call moveSnake procedure.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    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<\/strong> instead of circle size as I want to decrease the sensitivity of collision so that if the snake\u2019s 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.<\/strong><\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    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\u2019t need to check further.<\/p>\n\n\n\n

    In the end, we just draw everything by calling Canvas.draw so this is our final game loop:<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    The snake game is finally complete.<\/p>\n\n\n\n

    You can also get the full AIA project file for MIT App Inventor OR Kodular with a bonus feature: the Snake has eyes<\/strong><\/p>\n\n\n\n

    AIA File<\/a><\/strong><\/p>\n\n\n\n

    If you like my tutorials, please consider supporting me so that I continue making such content for you:<\/p>\n\n\n

    \n
    \"\"<\/a><\/figure>\n<\/div>\n\n\n

    You can also watch a video for this here:<\/p>\n\n\n\n

    \n