{"id":6658,"date":"2025-09-30T14:38:44","date_gmt":"2025-09-30T14:38:44","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=6658"},"modified":"2025-12-11T19:21:29","modified_gmt":"2025-12-11T19:21:29","slug":"app-inventor-fruit-ninja-game","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/app-inventor-fruit-ninja-game\/","title":{"rendered":"App Inventor Fruit Ninja Game"},"content":{"rendered":"\n

Hello friends, and welcome to Obsidian Soft,<\/p>\n\n\n\n

Today, I will teach you how to make the Fruit Ninja game in MIT App Inventor. I have tried to cover the best concepts of the game in this tutorial so that we end up with a fully functional, entertaining game. <\/p>\n\n\n

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

So, let\u2019s begin. Open up MIT App Inventor.<\/p>\n\n\n\n

Start a new project and call it Fruit Ninja Game<\/p>\n\n\n\n

Upload media: 3 fruit images and one slice sound effect.  Resource links are given below:<\/p>\n\n\n\n

https:\/\/www.freepik.com\/free-vector\/set-collection-vector-flat-various-fruit-illustration_44691433.htm<\/a><\/p>\n\n\n\n

Steel blade slice 3 from https:\/\/pixabay.com\/sound-effects\/search\/slice<\/a><\/p>\n\n\n\n

After uploading media, make the screen orientation portrait in screen1’s properties.<\/p>\n\n\n\n

Add a horizontal arrangement with align horizontal and align vertical properties both centered. Make the background color black. Change background color to  Make height 15% and width fill parent. Add a label to show the score. Rename to scoreLbl. Change the color to yellow. Make the font bold and font size 20.  Select the score label and duplicate it by pressing Ctrl + C & Ctrl + V<\/strong> on the keyboard for Windows OR Command + C & Command + V<\/strong> on the keyboard for MacOS. Rename to timeLbl. Change the color to red. Also, add a button in the same layout. Rename to restartBtn. Make the font bold and font size 20. And change the color to green.<\/p>\n\n\n\n

 And change the text to Restart. Add a canvas from Drawing and animation. Make background color black, font size 40, height 80% and width fill parent. Set the Line width to  5 and the paint color to red. You can increase this line width to make the slice thicker and change the color to another color if you prefer something other than red for the slice.<\/p>\n\n\n\n

Add an image sprite from the drawing and animation palette. Make height and width both 70 px. Choose one of the fruit images as the picture. And set the interval to 50.  Turn off rotates checkbox. Select the image sprite and duplicate it by pressing Ctrl + C & Ctrl + V<\/strong> on the keyboard for Windows OR Command + C & Command + V<\/strong> on the keyboard for MacOS. Just change the picture to another fruit. You can add as many fruits as you want with different fruit pictures.<\/p>\n\n\n\n

Now, add a clock from sensors. Rename to gameTimer. Uncheck the timer-enabled property. The timer interval should stay 1000 ms, which means 1 second.<\/p>\n\n\n\n

Duplicate this gameTimer. Rename to clearSlashTimer. Just change the timer interval to 150. It should stay disabled.<\/p>\n\n\n\n

Lastly, add a sound from media and choose your uploaded slice sound effect as the source. UX design is done, so let\u2019s go to the blocks section.<\/p>\n\n\n\n

Go to the blocks section. Make global variables for score and time left. And a status variable indicating whether the game is active or not.<\/p>\n\n\n\n

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

First, let\u2019s make a procedure for resetting a fruit sprite\u2019s properties. The procedure takes an input fruit. First we check that the game is active. Every time a fruit sprite is reset, it should be given a new random position on the canvas. It can be anywhere on the screen width-wise, but it should always start from the bottom of the canvas. So, X should be randomized between canvas width and imagesprite.width, and Y is a little over the canvas. height, so we are not touching the bottom edge. We don\u2019t want that; otherwise, our edge-touched event will be triggered. We are using any component blocks, so this way we can have as many fruits in the game, and we don\u2019t have to write code for each fruit separately. I have already covered any component blocks in my picture-matching game and snow globe tutorials. We give a random speed between 9-12, and we give a random heading\/direction. The fruit can go from left top slant to right top slant\u2026.a heading between 60 degrees and 120 degrees, where a degree of 90 means straight up. And we make the sprite visible. <\/p>\n\n\n\n

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

Then, we make a procedure for resetting the entire game. First, we make the game active. Set score and time left back to original values of 0 and 30, respectively. Update the labels for these variables accordingly. And then using any component -> any image sprite -> every image sprite block that automatically contains all the fruit image sprites in our project, we use a for each item loop from Control to reset each fruit. Lastly, we enable the game timer so that the game starts.
<\/p>\n\n\n\n

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

Next, we call this reset game procedure in the initialize event for the screen. And we also call it when resetbtn is clicked.<\/p>\n\n\n\n

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

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


Now, we get the any image sprite edge reached event that will be automatically triggered when any image sprite, i.e., a fruit, touches the edge. This is the reason why we didn\u2019t reset the fruit\u2019s Y  to the canvas. height, but a little over it, so this event isn\u2019t triggered. We call the resetFruit procedure for the component i.e., fruit that has reached the edge.<\/p>\n\n\n\n

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

Next comes the main event of when we drag our finger on our screen. Get the canvas. dragged event. We have to do two main things. We have to draw a line wherever our finger drags, and we also have to check if our drag has come somewhere inside the fruit.<\/p>\n\n\n\n

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

First, use canvas.drawLine to draw a line from the previous position (prevX, prevY) to the current position (currentX, currentY). <\/p>\n\n\n\n

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

Then, check if the current position is inside any of the fruits. We are going to again use a for each item loop on every image sprite list.<\/p>\n\n\n\n

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

We are going to check if the currentX, currentY are both within the bounding box of our image sprite. For example, in the following picture, point 1 is outside but point 2 is inside, so in that case, if condition will be true and we will slice the fruit. If you don\u2019t understand this logic, no worries, I have explained it in more detail at the end of this tutorial.<\/p>\n\n\n\n

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

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

For actual fruit slicing, we will just reset the sliced fruit to a new position. Increase the score and reflect it on the screen using the score label. We will also break, as there is no need to check other fruits (not simulating double slicing in this tutorial). Outside the for loop, we also enable our clear slash timer.
<\/p>\n\n\n\n

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

We play the slice sound in canvas. touchdown event.<\/p>\n\n\n\n

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

 And in clearSlashTimer, which is triggered after 150 ms of being enabled, we will first disable it so that it is not triggered again and again and then we clear the canvas so that the slash disappears.<\/p>\n\n\n\n

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

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

At the end, we have a game timer event that runs after 1000 ms, equal to 1 second. It decreases or decrements the time left variable and updates the time left label on the screen. It checks if the time left is equal to 0 for game game-over condition. In case it is, it disables all timers, makes all the image sprites invisible, and updates timeLbl with Game Over text.<\/p>\n\n\n\n

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

And this is done. I hope you like this fun Fruit Ninja game made completely in MIT App Inventor, perfect for school and college projects or just to impress your friends. <\/p>\n\n\n\n

Download AIA file for the Fruit Ninja Game in MIT App Inventor<\/strong><\/a><\/p>\n\n\n\n

You can also check out the video tutorial for this project on my channel.<\/p>\n\n\n\n

https:\/\/youtu.be\/EZn6uYreT9w<\/a><\/p>\n\n\n\n

Please like my tutorials and share it with your friends and family. Also, subscribe to my channel and press the bell icon so you don\u2019t miss any of the great projects I have planned for you.<\/p>\n\n\n\n

https:\/\/www.youtube.com\/c\/obsidiansofteducation<\/a><\/p>\n\n\n\n

Please like my Facebook page and Instagram page for more educational resources and tips.<\/p>\n\n\n\n

Facebook:<\/strong> https:\/\/www.facebook.com\/ObsidianSoft\/<\/a><\/p>\n\n\n\n

Instagram:<\/strong> https:\/\/www.instagram.com\/obsidiansoftapps\/<\/a><\/p>\n\n\n\n

Pinterest:<\/strong> https:\/\/www.pinterest.com\/obsidiansoft\/<\/a><\/p>\n\n\n\n

For links to free educational  apps<\/a>, have a look at the educational apps page<\/a><\/p>\n\n\n\n

\n\n\n\n

More details for successful slicing:<\/em><\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n\n\n\n

Step-by-step logic<\/strong><\/h2>\n\n\n\n
    \n
  1. currentX<\/strong> and <\/strong>currentY<\/strong>
    <\/strong>\n
      \n
    • These are the coordinates of the player\u2019s finger during the swipe.
      <\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Fruit.X<\/strong> and <\/strong>Fruit.Y<\/strong>
      <\/strong>\n
        \n
      • These are the top-left corner of the fruit sprite.
        <\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Fruit.X + Fruit.Width<\/strong> and <\/strong>Fruit.Y + Fruit.Height<\/strong>
        <\/strong>\n
          \n
        • These give the bottom-right corner of the fruit sprite.
          <\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • The whole condition is basically asking:

          \u201cIs the player\u2019s finger inside the rectangle of this fruit?\u201d
          \n
            \n
          • (currentX > Fruit.X) \u2192 finger is to the right of the left edge.
            <\/li>\n\n\n\n
          • (currentX < Fruit.X + Fruit.Width) \u2192 finger is to the left of the right edge.
            <\/li>\n\n\n\n
          • (currentY > Fruit.Y) \u2192 finger is below the top edge.
            <\/li>\n\n\n\n
          • (currentY < Fruit.Y + Fruit.Height) \u2192 finger is above the bottom edge.
            <\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • If all of these are true \u2192 the finger is inside the box.
            <\/li>\n\n\n\n
          • If the finger is inside \u2192 we slice the fruit<\/li>\n<\/ol>\n\n\n\n
            \n\n\n\n

            Even simpler explanation:<\/strong><\/p>\n\n\n\n

            Every fruit is just a rectangle with a top-left corner, a width, and a height.
            When we swipe, our finger gives us a point (X, Y).
            If that point is inside the rectangle, we say the fruit is sliced.<\/p>\n\n\n\n

            <\/p>\n","protected":false},"excerpt":{"rendered":"

            Hello friends, and welcome to Obsidian Soft, Today, I will teach you how to make the Fruit Ninja game in MIT App Inventor. I have tried to cover the best concepts of the game in this tutorial so that we end up with a fully functional, entertaining game. So, let\u2019s begin. Open up MIT App […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6658","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/6658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/comments?post=6658"}],"version-history":[{"count":3,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/6658\/revisions"}],"predecessor-version":[{"id":6821,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/6658\/revisions\/6821"}],"wp:attachment":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/media?parent=6658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}