Tetris
Create a Tetris Game with JavaScript in WebViewer
In this tutorial, we’ll create the classic game Tetris. There’s an article about making it using only App Inventor, but it looked quite challenging. So, we consulted Google Gemini 2.5 Pro and built the main game logic in JavaScript inside a WebViewer. App Inventor now controls this JavaScript.
Since the complex game logic is handled by AI-generated JavaScript, the App Inventor setup remains very simple.
What You Will Learn in This Tutorial
- Running JavaScript in a WebViewer
- Passing data between the app and the WebViewer
Components Used
Button, Label, WebViewer, HorizontalArrangement, VerticalArrangement, Sound
Blocks Used
Nothing Special
Designer
Set the title of Screen1 to “Tetris".
Download the files tetris.html and over.mp3 from the download section at the bottom of this page, and then upload both files to the Media section using the Upload File button.
From the Layout palette, add three VerticalArrangement components to the Viewer. Set the AlignHorizontal property to "Center" and the Height and the Width to "Fill parent". The component will be named VerticalArrangement1.
From the User Interface palette, add WebViewer to the VerticalArrangement1. Set the Height and the Width to "Fill parent". The component will be named WebViewer1.
From the Layout palette, add a HorizontalArrangement(HorizontalArrangement1) to the VerticalArrangement1. Set the AlignHorizontal property to "Center" and the Width to "Fill parent".
From the User Interface palette, add four Button components to the HorizontalArrangement1. The components will be named Button1, Button2, Button3, and Button4.
From the User Interface palette, add Button and Label below HorizontalArrangement1. The components will be named Button5, and Label1.
Set the properties as follows:
- Button1: Text=Left
- Button2: Text=Right
- Button3: Text=Rotate
- Button4: Text=Hard Drop
- Button5: Text=Start
- Label1: Text=(leave blank), TextColor=Red
Finally, From the Media palette, add Sound component to the Viewer. Set Source property to the over.mp3.
At this point, the Designer screen should appear as shown below.
