How To Create A Game In Mit App Inventor

Welcome to the Create & Learn MIT app inventor tutorial! MIT app inventor is an internet-based platform where beginners can get an excellent introduction to Android app development. It allows you to customize your app with many features you may be familiar with such as buttons, toggles and images. We'll provide an overview of MIT App Inventor and the resources available. Keep reading for instructions on how to build your own game!

Screen-Shot-2021-09-07-at-7.28.16-PM

App Inventor MIT

MIT App Inventor is a great tool to introduce beginners to Android app programming. The screen is separated by Design, for layout, and by Blocks, which implements the functionality. In each tab the different components are broken down by type to make them easy to find. MIT App Inventor offers lots of support with many tutorials and a Q&A forum.

Is MIT App Inventor good for beginners?

MIT App Inventor is great for beginners! They provide comprehensive step-by-step tutorials. The layout is visual, and relies on drag and drop which helps users understand the components needed for an app. It also clearly has features of Android programming in Java which makes the transition to written code for Android easier.

What programming language does MIT App Inventor use?

MIT App Inventor combines a "Designer" screen to arrange the layout of your app and a "Code" screen to incorporate functionality. Both use drag and drop features. The code is block based, similar to Scratch.

You can use this link to login. It provides the option to login with Google.

How do you make a simple game on MIT App Inventor?

We're going to show you how to make a Mole Mash game. A small mole will randomly jump around the screen and the score increases whenever you tap it.

Open a blank project. Drag a Canvas element from the Drawing and Animation section. Rename it to "MyCanvas" and set its dimensions to 300x300. Drag a Label element from User Interface. Call it "ScoreLabel" and set its text to "Score: ---". Also from User Interface drag a Button and call it "ResetButton". Make its text "Reset". From Sensors drag a Clock element so you can control the interval that the mole jumps around the screen. Call it "MoleTimer", select "Timer Enabled" and set the TimerInterval to 500.

The next thing we need to do is add an ImageSprite from Drawing and Animation to our Canvas. Make sure the image is on the canvas: it will appear nested under MyCanvas in the Components tab. Download the mole image here. The "Enabled" and "Visible" options should be checked, "Width" and "Height" should be "automatic", and "Speed" should be 0.0.

Now let's switch to the "Blocks" screen so we can add some functionality. We're going to start with a snippet of code to move the mole. In Procedure, select the block with where you can fill the name and has a "do" action. Change the name to "MoveMole". The "do" section is where we want to put the blocks for this procedure.

Click on Mole and get the "set mole x" block. This locks to a multiplication block from Math. The first factor is the random fraction block, also from Math. This gives a random number between 0 and 1. The first thing we want on the right factor is a subtraction block from Math. The left hand of the subtraction is the "width" block from MyCanvas. The right side is the "width" block from Mole. We'll repeat this procedure for the y-element of the Mole. In this case, the width should be changed to height.

We're going to make another Procedure called "UpdateScore". Before we create the procedure, we need to make a variable for the score. In the Variables tab, we want an "initialize global" block. We want to attach this to a Math number block with the value 0. In this procedure, we want to set the text of ScoreLabel. From Text, we want a "join" block. The top block is a blank Text block where we can fill in "Score". Underneath, we want "get" from Variables and change the dropdown to "global score".

To make the MoveMole procedure happen with the timer, we need the "when MoleTimer Timer do" block from MoleTimer. Then inside that we use the "call MoveMole" block from Procedures.

Now we need the score to update when we tap on the mole. We start with the "when Mole touched x y do" block from Mole. Then we increment the score. First we need the "set" block from Variables and select "global Score" from the dropdown. We attach this to an addition block in Math. We want to add a "get global Score" block from Variables and a number block from Math with the value set at 1. Then we call the UpdateScore and MoveMole procedures.

Finally we need to implement the functionality of the button. In ResetButton, get the "when ResetButton click do" block. From Variables, get the "set global Score" and connect it to a Math block with value 0. After that we "call UpdateScore" from Procedure.

Enjoy our fun MIT App Inventor tutorial for beginners

In this post, we introduced the MIT App Inventor platform that is great for beginners. We showed you how to build a quick MoleMash game and listed other tutorials to explore. For even more fun, be sure to check out our mobile coding for apps and games class or enjoy a creative Thunkable mobile games tutorial.

Screen-Shot-2021-09-07-at-7.29.29-PM

Written by Sophie Andrews, a Create & Learn instructor. Sophie Andrews is a student at Stanford University studying Math andComputational Sciences. She loves teaching and is a teaching assistant for Stanford's introductory computer science classes. Her work focuses on data science. Last year she built the online National Vote Trackers for The Cook Political Report, and she currently leads the Data Team at The Stanford Daily. She's also interned with the FCC and the National Renewable Energy Lab.