Embedded Files
To the left is a link to Code.org
To the left is a link to Code.org
Below are a set of mini skills which will give you the skills needed to complete the programming project.
Below are a set of mini skills which will give you the skills needed to complete the programming project.
Google Classroom has a Game Lab assignment for you to place your mini skills links in.
Google Classroom has a Game Lab assignment for you to place your mini skills links in.
TASKS
TASKS
These tasks target the skills you need in to learn in Year 10.
These tasks target the skills you need in to learn in Year 10.
Code.org has many other lessons which cover skills you do not need to complete the project.
Code.org has many other lessons which cover skills you do not need to complete the project.
Task 01 - Drawing with Shape & Colour
Task 01 - Drawing with Shape & Colour
Part of Game Lab CSD Unit 3, 4 & 6
Watch the tutorials above and complete the tasks below.
Watch the tutorials above and complete the tasks below.
Task 02 - Intro to Variables
Task 02 - Intro to Variables
Part of Game Lab CSD Unit 5
Displaying text
Displaying text
text("???", x, y);
text("???", x, y);
Draws text positioned at X & Y. EG:
Draws text positioned at X & Y. EG:
text("Hello", 100, 200);
text("Hello", 100, 200);
var studentNumber = 26;
var studentNumber = 26;
text("students = " + studentNumber, 100, 260);
text("students = " + studentNumber, 100, 260);
You can use the following to alter the look of your text:
You can use the following to alter the look of your text:
- textFont() to change the default font (Arial)
- textSize() to change the default size (12 pixels)
- textAlign() to change text alignment
Naming standard
Naming standard
For JavaScript we use the camelCase naming standard.
For JavaScript we use the camelCase naming standard.
You will notice that Game Lab use camelCase as well - it is a common industry standard for JavaScript.
You will notice that Game Lab use camelCase as well - it is a common industry standard for JavaScript.
CamelCase is a naming convention in which a name is formed of multiple words that are joined together as a single word with the first letter of each of the multiple words capitalized so that each word that makes up the name can easily be read. EG:
CamelCase is a naming convention in which a name is formed of multiple words that are joined together as a single word with the first letter of each of the multiple words capitalized so that each word that makes up the name can easily be read. EG:
- totalScore
- xPos
- distanceToMoon
Watch the tutorials / read about displaying text and complete the Class Activity below.
Watch the tutorials / read about displaying text and complete the Class Activity below.
Class Activity: create variables & do math.
Class Activity: create variables & do math.
Create a new project, rename and save it as:
Create a new project, rename and save it as:
Task 02 score
Task 02 score
NOTE: When you open a new project , it comes with two lines of code :
NOTE: When you open a new project , it comes with two lines of code :
Until we learn what this code means, place your code BEFORE the function draw()
Until we learn what this code means, place your code BEFORE the function draw()
- Add code BEFORE function draw() to:
- Create a variable named score & assign 0 to it
- Create a variable named lives & assign 3 to it
- Display the score on the screen
- Display the lives on the screen
- Add 1 to the variable score
2. What happens if you display two pieces of text at the same position?
2. What happens if you display two pieces of text at the same position?
3. Is there any point adding 1 to the variable score in this code?
3. Is there any point adding 1 to the variable score in this code?
Task 03 - Sprites & Scenes
Task 03 - Sprites & Scenes
In order to create more interesting and detailed images, we can use a sprite object.
In order to create more interesting and detailed images, we can use a sprite object.
Every sprite can be assigned an image to display.
Every sprite can be assigned an image to display.
Sprites also keep track of multiple values about themselves which will prove useful down the road when making animations for your game.
Sprites also keep track of multiple values about themselves which will prove useful down the road when making animations for your game.
Part of Game Lab CSD Unit 7
Intro to Sprites
Intro to Sprites
Animation Tab
Animation Tab
Ignore the function draw() code, you will learn about it in Task 4
Watch the tutorials to the right and complete the tasks below.
Watch the tutorials to the right and complete the tasks below.
Class Activity: create a sprite
Class Activity: create a sprite
Remix your Task 02 score project, rename and save it as :
Remix your Task 02 score project, rename and save it as :
Task 03 sprites
Task 03 sprites
- Add further code BEFORE the function draw() to:
- Create a sprite named mrBob near the top of the canvas
- Create an animation for the sprite mrBob via the animation TAB
- Set the animation for mrBob to the animation you just made
- Display the sprite's X & Y position (hint: use the DOT NOTATION) on the screen
- Draw the sprites drawSprites();
EXAMPLE OUTPUT:
EXAMPLE OUTPUT:
Task 04 - Sprite Movement & Draw Loop (function draw)
Task 04 - Sprite Movement & Draw Loop (function draw)
Draw loops enable you to animate sprites (and other things).
Draw loops enable you to animate sprites (and other things).
Part of Game Lab CSD Unit 11 and the 2018 Game Lab CSD Unit 9
Intro to Draw Loop
Intro to Draw Loop
Watch the tutorials above and complete the tasks below.
Watch the tutorials above and complete the tasks below.
click on the task below
click on the task below
Class Activity: make sprite move left
Class Activity: make sprite move left
Remix your Task 03 sprites project, rename and save it as :
Remix your Task 03 sprites project, rename and save it as :
Task 04 draw loop
Task 04 draw loop
- Add code INSIDE the function draw() to:
- Add 2 to the variable holding the Y position of the sprite mrBob
- MOVE the code to draw the sprites drawSprites(); to INSIDE the function draw()
2. Is this what you expected?
2. Is this what you expected?
If there is a problem, discuss what is happening with your friends and try to fix it.
If there is a problem, discuss what is happening with your friends and try to fix it.
Hint: if you were painting in Art & you wanted to start again but were using the same canvas, what would you do BEFORE you began drawing again?
Hint: if you were painting in Art & you wanted to start again but were using the same canvas, what would you do BEFORE you began drawing again?
What happens now to the displaying of the text?
What happens now to the displaying of the text?
3. Can you make the sprite rotate?
3. Can you make the sprite rotate?
EXAMPLE OUTPUT:
EXAMPLE OUTPUT:
before fix
before fix
10DTEC mini skill_ Task 04 sprite movement part I - Game Lab.mp4after fix
after fix
10DTEC mini skill_ Task 04 sprite movement part II - Game Lab.mp4Task 05a - Conditionals - Booleans (True/False)
Task 05a - Conditionals - Booleans (True/False)
Part of Game Lab CSD Unit 14
Watch the tutorials above and complete the tasks below.
Watch the tutorials above and complete the tasks below.
Task 05b - If / Else Conditionals
Task 05b - If / Else Conditionals
Watch the tutorials above and complete the tasks below.
Watch the tutorials above and complete the tasks below.
Class Activity: using if
Class Activity: using if
Remix your Task 04 move sprite project, rename & save it as :
Remix your Task 04 move sprite project, rename & save it as :
Task 05 if
Task 05 if
- Add further code INSIDE the function draw() to:
- Stop the sprite moving once it reaches 350 on the Y axis
EXAMPLE OUTPUT:
EXAMPLE OUTPUT:
10DTEC mini skill_ Task 05b if_else - Game Lab.mp4Task 06 - Keyboard Input
Task 06 - Keyboard Input
Detecting keyboard input makes your program interactive.
Detecting keyboard input makes your program interactive.
Part of Game Lab CSD Unit 15 and the 2018 Game Lab CSD Unit 13
Before Monitors there was keyboard input
Before Monitors there was keyboard input
Complete the Game Lab tasks
Complete the Game Lab tasks
Class Activity: using keys to control sprites
Class Activity: using keys to control sprites
Remix your Task 05 if project, rename and save it as :
Remix your Task 05 if project, rename and save it as :
Task 06 keyboard input
Task 06 keyboard input
- Add further code INSIDE the function draw() to:
- press LEFT or RIGHT arrow key to move LEFT or RIGHT
And Before Keyboards there was plug board input...
And Before Keyboards there was plug board input...
EXAMPLE OUTPUT:
EXAMPLE OUTPUT:
10DTEC mini skill_ Task 06 keyboard input - Game Lab.mp4Task 07 - Functions
Task 07 - Functions
Functions help organise and stop repetition of code.
Functions help organise and stop repetition of code.
Part of Game Lab CSD Unit 24
NOT maths functions; These belong a Mr A Einstein.
NOT maths functions; These belong a Mr A Einstein.
Watch the tutorials above and complete the tasks below.
Watch the tutorials above and complete the tasks below.
Class Activity: using functions
Class Activity: using functions
Remix your Task 06 keyboard input project, rename and save it as :
Remix your Task 06 keyboard input project, rename and save it as :
Task 07 functions
Task 07 functions
- Add further code AFTER the function draw() to:
- Define a function called gameScreen
- MOVE all the code from within the function draw to the new function gameScreen
- Add further code to the function draw() to:
- Call the function gameScreen from within the function draw()
TUTORIAL & EXAMPLE OUTPUT:
TUTORIAL & EXAMPLE OUTPUT:
10DTEC mini skill_Task 07 functions - Game Lab.mp4NOTE: This video was made some time ago and makes references to 2018 Game Lab task 19.2.
NOTE: This video was made some time ago and makes references to 2018 Game Lab task 19.2.
We have moved onto Game Lab 2020, but have yet to update the video...
We have moved onto Game Lab 2020, but have yet to update the video...
Task 08 - Creating start, game & end screens
Task 08 - Creating start, game & end screens
A game should have a start screen, a game screen or screens and an end screen.
A game should have a start screen, a game screen or screens and an end screen.
Part of Game Lab CSD Unit 24
S
T
A
R
T
G
A
M
E
E
N
D
You should have enough knowledge to code this...
You should have enough knowledge to code this...
Class Activity: start, game & end screens
Class Activity: start, game & end screens
Remix your Task 07 functions project, rename and save it as :
Remix your Task 07 functions project, rename and save it as :
Task 08 screens
Task 08 screens
- Add further code BEFORE the function draw() to:
- Create a variable called whichScreen & set it to 'start'
- Create a sprite named startSprite
- Create an animation for the sprite startSprite via the animation TAB
- set the animation for startSprite to the animation you just made
- Add further code AFTER the function draw() to:
- Define a function called startScreen
- Add further code to the function draw() to:
- if the variable whichScreen is equal to 'start'
- Call the function startScreen
- else if the variable whichScreen is equal to 'game'
- Call the function gameScreen
4. What happens when you run the code?
4. What happens when you run the code?
5. You need some way to get the program to move onto the game screen. See the pseudo code below.
5. You need some way to get the program to move onto the game screen. See the pseudo code below.
some pseudo code (not real programming language) for this task:
some pseudo code (not real programming language) for this task:
function draw
function draw
if whichScreen equals start
if whichScreen equals start
then call function startScreen
then call function startScreen
else if whichScreen equals game
else if whichScreen equals game
then call function gameScreen
then call function gameScreen
function startScreen
function startScreen
if user hits enter key
if user hits enter key
then set whichScreen to 'game'
then set whichScreen to 'game'
else
else
display startScreen sprite
display startScreen sprite
TUTORIAL & EXAMPLE OUTPUT:
TUTORIAL & EXAMPLE OUTPUT:
10DTEC mini skill_Task08 start screen - Game Lab.mp4Task 09 - Velocity
Task 09 - Velocity
A sprite's velocity property can replace adding to the sprite's X or Y position.
A sprite's velocity property can replace adding to the sprite's X or Y position.
Part of Game Lab CSD Unit 18
Watch the tutorials above and complete the tasks below.
Watch the tutorials above and complete the tasks below.
Task 10 - Gravity
Task 10 - Gravity
Acceleration and gravity
Acceleration and gravity
Part of Game Lab CSD Unit 21
In Task 09 Velocity the velocity did not change.
In Task 09 Velocity the velocity did not change.
When an object falls due to gravity, the velocity starts small and increases (until the object reaches "terminal velocity").
When an object falls due to gravity, the velocity starts small and increases (until the object reaches "terminal velocity").
To replicate gravity, we will:
To replicate gravity, we will:
- Set the sprite's velocityY to 0.
- Add a small amount to the sprite's velocityY every time through the function draw()
Class Activity: gravity
Class Activity: gravity
Remix your Task 08 screens project, rename and save it as :
Remix your Task 08 screens project, rename and save it as :
Task 10 gravity
Task 10 gravity
- Add further code to function game to:
- Replace the sprite moving down with falling due to gravity by:
- Setting mrBob.velocityY to 0.
- Adding a positive vertical velocity to mrBob.velocityY
EXTENSION:
EXTENSION:
- Add further code to function game to:
- Make the sprite fall due to gravity once the space bar is pushed by adding a positive vertical velocity mrBob.velocityY
TUTORIAL & EXAMPLE OUTPUT:
TUTORIAL & EXAMPLE OUTPUT:
10DTEC mini skill_Task10 gravity - Game Lab.mp4So everyone knows about terminal velocity - its that gravity vs air resistance thing.
So everyone knows about terminal velocity - its that gravity vs air resistance thing.
If a feather and a bowling ball are both released at the same time from the same height - in a large vacuum tube, which will land first? Professor Brian Cox knows.
If a feather and a bowling ball are both released at the same time from the same height - in a large vacuum tube, which will land first? Professor Brian Cox knows.
Task 11 - Collision Detection
Task 11 - Collision Detection
Detecting sprites crashing into other objects
Detecting sprites crashing into other objects
Part of Game Lab CSD Unit 19 & 22
Complete the Game Lab tasks
Complete the Game Lab tasks
There are many ways for Game Lab to detect crashing between objects:
There are many ways for Game Lab to detect crashing between objects:
- isTouching
- bounce
- bounceOff
- collide
- displace
Click for an explanation of the various ways
Click for an explanation of the various ways
Class Activity: edge sprites
Class Activity: edge sprites
Remix your Task 10 gravity project, rename and save it as :
Remix your Task 10 gravity project, rename and save it as :
Task 11 edge sprites
Task 11 edge sprites
- Add further code to function game() to:
- Make the sprite bounce of the canvas' edges
TUTORIAL & EXAMPLE OUTPUT:
TUTORIAL & EXAMPLE OUTPUT:
Task 12 - Jumping
Task 12 - Jumping
sprite jumping can be annoying....
sprite jumping can be annoying....
Jumping involves key input, velocity and gravity
Remix your Task 11 edge sprites project, rename and save it as :
Remix your Task 11 edge sprites project, rename and save it as :
Task 12 jumping
Task 12 jumping
- Add further code to function game() to:
- Make mrBob jump and fall back due to gravity when you click the upper arrow key.
TUTORIAL
TUTORIAL
The app below shows you some options for making a sprite jump.
The app below shows you some options for making a sprite jump.
If you do not understand what is going on, discuss it with some of your peers and then if you need further help, ask the teacher
If you do not understand what is going on, discuss it with some of your peers and then if you need further help, ask the teacher
If it does not load, right click on the app and select : reload frame
If it does not load, right click on the app and select : reload frame
EXTENSIONS
EXTENSIONS
Ext 01 - Debugging with Watchers
Ext 01 - Debugging with Watchers
Watching variables can be very useful when finding bugs in your code.
Watching variables can be very useful when finding bugs in your code.
Part of Game Lab CSD Unit 12
Page updated
Report abuse