Download presentation
Presentation is loading. Please wait.
1
AppLab Studio.code.org
2
AppLab – basic rules Students must be 13 years old
Students must log in Many have already created an account from Hour of Code I prefer to have students use a Google Account 2 Sides to creating an App Design Mode Code Mode Blockly Javascript NAME EVERYTHING when designing your app
3
Naming Conventions Name your labels and variables with names that make sense scoreLabel, emojiLabel, backgroundImage, ouchSound Not label1, label2, label3, image1, image2 Don’t include spaces in the names scoreLabel not score label Use camelcase Start with a lower case letter and every beginning letter of a word capitalize myFirstEmojiGame
4
Design Mode Change screens or create a new screen Switch Modes
Set Properties of Selected elements Drag and drop elements into the screen
5
Code Mode Switch Switch to javascript Modes Menus of Code
Drag blocks of code
6
Let’s Create A Quick App
Search for AppLab and go to the link Create an account or Sign in Click on Create an App Button
7
Design Start Screen Make Sure you are in Design Mode
Drag a button here and name it startButton Name your screen startScreen
8
Start Button Properties
9
Create a New Screen for the Game Screen
Name it gameScreen (id) Pick a background color
10
Add a background image Make Sure you name it backgroundImage
Drag into the screen Click here to choose an image
11
Add a background image Click Upload File Button Select Image to Upload
Click on Choose Button
12
Drag an image for the Emoji
Drag into the screen
13
Add a label to show score
Drag into the screen
14
Add Current Score Label
Drag into the screen
15
Add a end game screen Click on the screen button to add a new screen
Name the screen endGameScreen Pick a background color Add a Label to show the score Name it endGameScoreLabel Name it endScoreValueLabel Add a button to play again Name it playAgainButton
16
Example Screen
17
Switch to Code Mode
18
Adding a Variable for the Score
Drag into the screen
19
Rename variable and set to 0
20
Add Function for Play Game
Rename to playGame Drag into the screen
21
Click on Show Text Button to add the next code by typing
22
Type this code into the playGame function
Then click on Show Blocks Button
23
Add event listener for start button clicked
24
Add three blocks (look at the colors for clues as where to find them)
Make sure you change the values in the blocks to match these
25
Add these blocks for “clicking on the emoji” underneath
26
Add these blocks for “missing” the emoji
27
Add these block to create a moveEmoji function
28
Add these block to create endgame function
29
Add this code to restart
30
Testing your App
31
Share it if you like
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.