Touch the Spin button to match emojis in this fun BINGO style game.
Get five "
"s in a row, column or diagonal to win!
This game uses the 'Any component' to simplify handling 25 buttons that make up the 'Bingo' card.
This was a fun game to put together. The 'emojis' came from an AI prompt for a bingo card using emojis. The AI created emojis on-the-fly resulting in the weird ones you see here. I would love to use real emojis in some of these games, but the support for emojis in MITAI2 is limited. I was able to find a few that work where you might use regular text characters and took advantage of that in another game in the MIT App Inventor Gallery called 'Emojiku' which is a 4x4 Sudoku game.
With any BINGO-type game, you will need to determine if the player has won. According to the rules, a win is 5 items having been 'called' in a row, column or diagonal. In this case, the item to be matched with the BINGO card is determined by a SPIN button that randomly chooses an emoji. Since the logic to test for a win was the most difficult part of developing this game, I will cover the blocks here.
Game play:
The game play consists of pressing the SPIN button to reveal an emoji that matches one on the game board. The player then touches the matching emoji and it is changed to a emoji, and play continues until there are 5 s in a row, column or diagonal. In a standard BINGO game numbers are called out only once, and they may not be on your BINGO card. Similarly, in this game, emojis may displayed several times that have already been played, which makes for a bit more challenging game play.
The emojis are images stored in a grid of 25 buttons. The button components are stored in a list containing 5 items, each of which contains 5 button component blocks:
This allows the button images to be populated with the initial emoji images and to have the emoji images replaced with s when the player touches the buttons that match the SPIN button's emoji.
Since the app cannot 'see' its game board to know if a BINGO has occurred, then it must blindly look at each button's image to check if there is a image stored there. It must determine if there are five of these in a row of buttons and it must check five rows on the board. So that is what this group of blocks does:
The first 'for each' looping block iterates through a list -- in this case the Board list looking at each row of 5 buttons. So the first time through, it has selected the first sublist in the Board list which contains the button components r1c1BTN..r1c5BTN.
A CheckmarkCounter is initialized to count how many images are in buttons on each row.
An inner 'for each' loop iterates through the first row of button components -- using them to compare the image stored in each button with the 'checkmark.png' image.
If there is a match, then the CheckmarkCounter is incremented.
The inner loop continues until all 5 buttons in that row have been checked, then the if block below the inner loop tests to see if 5 checkmarks were on that row. If not, the process continues with the next row in the Board list.
If there are 5 checkmarks in any row, the 'if' block sets a logical Bingo variable to 'true' and the player is congratulated.
The 'break' block stops the execution of the outer 'for each' loop since continuing that loop is not necessary.
The program continues to the next block that tests if 'Bingo' is 'true'. If so, all of the blocks that would test to see if any of the columns contain five s would be skipped. If there was no Bingo, then the next blocks to look at the columns would be executed:
Here we are examining one column at a time in the Bingo grid. But the button components are stored in sublist rows, so we start by looping thrrough each column, then check each row within that column. That requires the first for each loop to give us an index to the first component in each row, then an inner for each loop to select the row from the list. With these two things we can access the first component in each row which is what the 'if' block does in the inner loop. The CheckmarkCounter is incremented as before when the images in the buttons match the checkmark image. And the test for 5 checkmarks works the same way as before in the rows test.
If the Bingo test is still not true, then the next blocks to test the first diagonal buttons Top-Left to Bottom-Right is done:
Looking at the Board list of lists block you will see that the top left component block is r1c1BTN. Follow down the rows and columns diagonally to the right and you find r2c2, r3c3, r4c4, r5c5 button components. This is the pattern used by the for each loop which iterates through the columns and rows with a single loop. Easy-peasy 
.
The last test is to look for a Bingo from the bottom left corner to the top right corner of the game Board. This is a little trickier as the rows decrease from 5 to 1 but the columns increase from 1 to 5 (r5c1, r4c2, r3c3, r2c4, r1c5). So a 'for each' loop goes in reverse and counts down from 5 to 1 while a ColumnIndex counter is incremented from 1 to 5 to handle the columns increasing. Not too bad. And we are done!
Try out the game and make some improvements or variations to it. Share them with us!
EmojiBingo.aia (2.7 MB)