Topic GAME DESIGN
Class Integrate all coding concepts - Sequence, Variables, Events,
Description Animations, and Loops - to create an advanced game with
compelling user design and advanced back-end code.
Class ADV-C20
Class time 50 mins
Goal ● Create a floral art using For Loops
Resources ● Teacher Resources
Required ○ Code.org login
○ Earphones with Mic
○ Notepad and Pen
● Student Resources
○ Code.org login
■ Appears on panel.
■ Earphones with Mic (Optional)
○ Notepad and Pen
Class structure Warm Up 2 mins
Teacher-Led Activity 8 mins
Student-Led Activity 30 mins
Wrap Up 5 mins
Projects cues and pointers 5 mins
The class should be done in a 50:50 ratio.
50 percent of the code done by the student should be using code blocks.
And 50 percent of the code done by the student should be done in TEXT MODE.
To go in Text-Mode
Click on Show Text button on the top right
hand side of the screen.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
1
The only difference between Text-Mode and is Block-Based coding is -
Text-Based coding is done by writing the code and in Block-Based coding is done by
dragging and dropping the code blocks.
All the coders in the world do text based coding and it is universally text-based coding is
accepted, and after few modules we will also switch to complete text based coding,
hence students are asked to start text based coding from now.
Start the video call from H2H
WARM UP SESSION - 2 mins
Teacher starts slideshow from slides 1 to 16.
Refer to speaker notes and follow the instructions on each slide.
TEACHER ACTIVITY - 8 mins
Teacher Initiates Screen Share
Say Do
Teacher Activity 1-APP LAB
Sign-in to code.org
Step 2: Design the App
According to the purpose of the app, we need to create a
Slider.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
2
Design the playScreen where the user will create floral art
by playing with the slider
Drag a Label
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
3
Let's change the properties of the Label.
Label
Label will display the heading or app name on the on
screen.
id: label1
width: 200 px
text-color : rgb(247, 137, 137) , you can choose any color
or your choice from the color palette displayed when
clicked on text-color property of label
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
4
Then Drag a Slider
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
5
Let's change the properties of the Slider.
SLIDER
Slider will control the length of the line drawn on screen.
id: sliderLength
width: 200 px
Min: 20
Max:200
Step:5
Slider Default Value: 20
Okay so we are done with playScreen Design.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
6
For teachers reference, the
Step 3: Code the App Complete App is given
In this step we specify the code blocks we want to use to below.
write code.
click on
to see the complete code.
Drag the respective blocks
from Toolbox as shows with
arrows.
Teacher Activity
2-COMPLETE CODE
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
7
zoom-in to see the Complete Code
Text Base Code-
Code Base Code -
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
8
Explain each line of code to the student as follows:
1. On mainScreen users see the Slider. This slider controls the length of the line
drawn on screen. Slider has values from 20 to 200 as it is move in steps of 5.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
9
Everytime the slider is changed by the user, everything inside this event block is
executed.
2. The For Loop where we declare a variable called z. As we know the For Loop
takes three parameters
Start Value: 1
End Value: getNumber from SliderLength. That means as the user changes the slider
and slider value varies from 20 to 200 which we had set already when we designed the
slider. So the End value for this For loop is set by the user. Once the user sets the value
from the slider, the For Loop runs from Z=1 to Z=SliderValue.
Interval: Here Z++ means Z+1, or increment the value of z by 1. This means that all the
blocks within for loop will run from Z=1 to Z=Slider Value with incrementing the value of z
each time by 1.
So z=1 code runs then z takes value 2 then takes value 3 till the End Value set by the
user.
For loop is used to change the value of a variable z with interval 1 therefore Z++ or Z+1.
3. This is a drawing tool called Turtle. The turtle is used to draw things on the screen.
We want the turtle to move to the centre of the screen without drawing anything as
it moves, so use penup.
4. Move to x:155 horizontal and y:250 vertical. So that it gets at the center of the app
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
10
screen
5. Then we will use pendown to start drawing.
6. penRGB is used to select a color with a mix of RED, GREEN and BLUE and their
shades varies from 0 to 255.
In order for each line the turtle draws to be of different color I have used
randomNumber block and given the RED Range as 0 to 255 and Same Range for
GREEN and kept the Shade of BLUE constant to 200.
7. Set the PenWidth to 1, as I want to draw Floral art with Thin lines.
8. This is where I am going to use the Value of z which is changed by the For Loop.
● z=1 the turtle moves to the centre of the screen and draws a line by moving
1 pixel forward, turn right by 1 Degree and hides itself.
● z=2 the turtle moves to the centre of the screen and draws a line by moving
2 pixel forward turn right by 1 Degree and hides itself.
● This loop will go on till z is less than the value set by the slider and z values
increase by 1 each time so the turtle will draw lines longer than the last.
once z values reach the same as slider value then For Loop exits.
9. Turtle turns right by 1 degree.
10 Hide the turtle.
11.This bracket encloses all that should happen in for loop until z reaches the slider
value.
Step 4: Test the App
In this step we run the app to check if it works.
Ask the student to Copy the
project link and paste it in
the Project Link Field on
the student panel and click
Submit Button.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
11
BETA TEST YOUR APP
Great so now you are an app developer. Software developers, when they build any
software usually share it with their friends to get feedback or suggestion on software.
This is called BETA Testing which means Testing the app with very small group of
people like colleagues, friends and family by asking them to use your software
and report any errors or bugs or suggestions.
So Your task will be to do a BETA Testing of your game app by sharing your app
with at least 5 friends and get feedback on whether they liked the game app or not.
You can ask your parents to send game app link that you generated , to your
friend’s parents on whatsapp or via email to get their feedback.
I will ask you about your friends feedback in the next class and we will try to work
on it together.
Wow!
The app Works now lets see if you can build it.
Teacher Stops Screen Share
STUDENT ACTIVITY - 30 mins
Now it's your turn.
● Ask Student to press ESC key to come back to panel
● Guide Student to start Screen Share
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
12
● Teacher gets into Fullscreen
Say Do
You have to build the same app. It’s your turn now: Student Activity 1-APP LAB
Open Student-Activity-1 login in code.org and start
designing and complete the code.
Can you tell me the steps you are going to follow? Student sign-in into
code.org using the
username and password
Step 1: Define a Purpose on student panel
In this step we specify what we want the app to do.
Step 2: Design the App
In this step we specify the design components we want in
our app.
Step 3: Code the App
In this step we specify the code blocks we want to use in
our code.
Step 4: Test the App
In this step we run the app to check if it works.
Ask the student to Copy the
project link and paste it in
the Project Link Field on
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
13
the student panel and click
Submit Button.
Teacher Guides Student to Stop Screen Share
Teacher Initiates Screen Share
WRAP UP SESSION - 5 mins
Teacher starts slideshow from slides 17 to 19.
Refer to speaker notes and follow the instructions on each slide.
PROJECT POINTERS AND CUES - 5 mins
Teacher starts slideshow at slide 20.
Say Do
Note: You can assign the
FLORAL ART APP project to the student in
class itself by clicking on
Goal of the Project:
the Assign Project button
Today, you learned about the turtle and the FOR loop. We
also understood how it can be used to execute a set of which is available under
blocks repeatedly. the projects tab.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
14
In this project, you will apply what you have learned in the Open the Project Solution
class to create a Floral Art App. link and demo the project to
the student
Story:
Ryan has been preparing for exams. He is very stressed
as he studies throughout the day and night. He wants to
relieve his stress by doing some artwork.
Could you help him?
The project will take only 30 minutes to finish. You can
try and finish it immediately after this class.
I am very excited to see your project solution and I know
you will do really well.
Bye Bye!
Teacher Clicks
ADDITIONAL ACTIVITY
Teacher Initiates Screen Share
Teacher starts slideshow from slides 21 to 24.
STUDENT ADDITIONAL ACTIVITY
Student Initiates Screen Share
Draw a circle using a for loop. For this open a new App Lab project and start
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
15
Code:
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
16
By default the pen is set at the center of the screen so we have to move the pen(pointer)
to our desired location without drawing anything on the screen. For the we first lift up the
pen so that nothing is not drawn on the screen then move the pointer (pen) to our desired
position.
We have to draw a circle and we know that circle has a 360 degree angle. Therefore:
Start value - 0
end value - 360 , since circle has an angle of 360
interval - 1 as we will be drawing a small arc at each interval
Then we use the penDown() function so that whatever code(drawing code) is below this
function is draw on the screen
Then if you move forward by 1 pixel you will get a small circle if you move forward by 2
pixels we will get a bigger circle.
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
17
Turn right by 1 pixel as we at each loop we are turning right by 1 pixel by the end of the
loop we have travelled 360 pixel thus creating a circle
Activity No. Name of the Links
Activity
Teacher Activity 1 APP LAB https://studio.code.org/projects/applab/new
Teacher Activity 2 COMPLETE CODE https://studio.code.org/projects/applab/7_vFt
WJm20vslpg6y-ku0ZFzEPjPxI3uHag9h-Nss
LQ
Student Activity 1 APP LAB https://studio.code.org/projects/applab/new
Project Solution FLORAL ART APP https://studio.code.org/projects/applab/pULbI
oVeijt-uDJFU59Z-90EyTOPmKbrehDi5dexva
U
Teacher Reference Visual aid link https://curriculum.whitehatjr.com/Visual+Project+
Visual aid link Asset/ADV_VA/ADV_V2_C20_withcues.html
Teacher Reference In-class quiz https://curriculum.whitehatjr.com/Visual+Project+
In-class quiz Asset/ADV_VA/ADV+C-20+V2.docx.pdf
© 2021 - BYJU’S Future School.
Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
18
