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.
You will also cover some Computer Science Topics. Your teacher will quiz you on these at the end of the unit.
You will also cover some Computer Science Topics. Your teacher will quiz you on these at the end of the unit.
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.
Comp Sci Topic: Input, Process, Output
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.
Comp Sci Topic: - Operating systems and Application software
You will be designing application software in GameLab!
Task 02 - Intro to Variables
Task 02 - Intro to Variables
Part of Game Lab CSD Unit 5
Displaying text
Displaying text
part of Game Lab CSD Unit 9
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:
- textSize() to change the default size (12 pixels)
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?
Comp Sci Topic: Algorithms
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
after fix
after fix
Task 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:
Comp Sci Topic: Searching and sorting algorithms
Task 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 WASD keys to move UP LEFT DOWN RIGHT
And Before Keyboards there was plug board input...
And Before Keyboards there was plug board input...
EXAMPLE OUTPUT:
EXAMPLE OUTPUT:
Task 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:
NOTE: 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 gameMode & set it to 'start'
- Create a sprite named backgroundSprite
- Create an animation for the sprite backgroundSpritevia the animation TAB
- set the animation for backgroundSprite 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 gameMode is equal to 'start'
- Call the function startScreen()
- else if the variable gameMode is equal to 'playGame'
- Call the function game()
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 gameMode equals start
if gameMode equals start
then call function startScreen()
then call function startScreen()
else if gameMode equals playGame
else if gameMode equals playGame
then call function game()
then call function game()
function startScreen
function startScreen
if user hits space key
if user hits space key
then set gameMode to 'playGame'
then set gameMode to 'playGame'
TUTORIAL & EXAMPLE OUTPUT:
TUTORIAL & EXAMPLE OUTPUT:
Task 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:
So 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
Class Activity: edge sprites
Class Activity: edge sprites
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
Ext 02 - Pong Game
Ext 02 - Pong Game
The very first video game ever made was a simple tennis game. This later developed into what we now know as Pong.
The very first video game ever made was a simple tennis game. This later developed into what we now know as Pong.
Create your own Pong game.
Create your own Pong game.
You will need to create the following:
A start screen with a start button.
2 user controlled paddles on either side.
A ball that will bounce off the paddles and the top and bottom walls.
A score count for each side.
If you are stuck, review some of the practice tasks.
If you are up for a challenge:
An AI opponent for single player games.
An option for mouse or keyboard control (single player only).
A difficulty setting that changes the speed of the ball.
If you aren't familiar with Pong, check it out here!
Page updated
Report abuse