Presentation is loading. Please wait.

Presentation is loading. Please wait.

AppLab Studio.code.org.

Similar presentations


Presentation on theme: "AppLab Studio.code.org."— Presentation transcript:

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


Download ppt "AppLab Studio.code.org."

Similar presentations


Ads by Google