Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all...
-
Upload
katherine-bradley -
Category
Documents
-
view
247 -
download
0
Transcript of Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all...
![Page 1: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/1.jpg)
Lesson 3: Arrays and Loops
![Page 2: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/2.jpg)
Arrays
• Arrays are like collections of variables• Picture mailboxes all lined up in a row, or
storage holes in a shelf– You could number the whole and store things in
each slot• You access each variable by it position in the
array (slot number)
![Page 3: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/3.jpg)
Arrays
• Example of an array of numbers, called “arry”
• In java you can access the first element (position) call using the following syntax
arry[0]
• You can treat this like any other variablearry[0] = 6; int value = arry[0]; arry[3] = arry[0];
Position 0 1 2 3 4
Value 10 0 25 -40 3
![Page 4: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/4.jpg)
Arrays
• Each array must have a predetermined length– This has 5 values so the length is 5! But the last element (slot) is 4!
• We create arrays in java using new just like objectsint[] myArray = new int[5];This creates and array with 5 elements, but currently the elements are empty
Position 0 1 2 3 4
Value 10 0 25 -40 3
![Page 5: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/5.jpg)
Loops
• Loops are a way of repeating an instruction/action a certain number of times.
• They are often used with arrays and lists– Repeat the same action for each element in the array
• Some common uses/patterns– Addition up values– Transforming arrays of values
• multiple each element• Add something to each element
![Page 6: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/6.jpg)
Loops
• Loops are made of fours parts– Initialization – setup the loop– Condition – check if the loop should continue or end– Body – the action to repeat– Update – update a value or something so the action
is applied to something different
• There are three common loop types:– For, for each, and while
![Page 7: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/7.jpg)
For-loopsint[] array = new int[5];for( int i = 0; i < array.length; i++ ){
array[i] = i + 1;}
![Page 8: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/8.jpg)
int[] array = new int[5];for( int i = 0; i < array.length; i++ ){
array[i] = i + 1;}
For-loops
Initialization– create a variable called i- It it’s value to zero (0)
![Page 9: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/9.jpg)
For-loopsint[] array = new int[5];for( int i = 0; i < array.length; i++ ){
array[i] = i + 1;}
Condition– continue while i is less than the length of the array- Basically I will equal 0, 1, 2, 3, 4 (or for each position of the array)
![Page 10: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/10.jpg)
For-loopsint[] array = new int[5];for( int i = 0; i < array.length; i++ ){
array[i] = i + 1;}
Body– set the value of array[i] to i + 1
![Page 11: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/11.jpg)
For-loopsint[] array = new int[5];for( int i = 0; i < array.length; i++ ){
array[i] = i + 1;}
Update– increase i by 1
![Page 12: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/12.jpg)
For-loopsint[] array = new int[5];for( int i = 0; i < array.length; i++ ){
array[i] = i + 1;}
i 0 1 2 3 4
Position 0 1 2 3 4
Value 1 2 3 4 5
![Page 13: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/13.jpg)
Tiled Backgrounds
• With the last game we had to create the background using large images or many Actors.– Actors require extra processing and can slow
down the game– Let’s make a world built from tiles that we can
repeat and reuse
![Page 14: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/14.jpg)
Tiled Backgrounds
• We will use an array (or more specifically a 2D array) to represent background information
![Page 15: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/15.jpg)
Tiled Backgrounds
• We can put background information into each element – think of a Mario type game
![Page 16: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/16.jpg)
Let’s start
• Open Lesson 3
• There are already some simple classes
• We will start by changing scroll world
• Open ScrollWorld
![Page 17: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/17.jpg)
Setting up the backgroundFirst we need to create an array to store the
backgroundThe background is made of many tiles at different
(x, y) positionsWe need to create an array with X and Y elementsWe will use this notation:
array[x][y]
![Page 18: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/18.jpg)
Setting up the backgroundCreate a variable to hold the array inside the
Scroll world
Now in the constructor of Scroll world create the array of size full width (x), full height (y)
![Page 19: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/19.jpg)
We can now storebackground information
But we can’t draw the background or add anything to it.Let’s start by adding stuff to the backgroundThen we will draw it
![Page 20: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/20.jpg)
Adding to the backgroundLet create a methods called
“addBackgroundActor” It will take an Actor and an X and Y coordinate It will put the actor in the position specified by X, Y
Eg. myBackground[x][y] = actor
![Page 21: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/21.jpg)
Adding to the backgroundNow in DemoWorld add some bricks somewhere
on screen.
But we can’t see them yet. We need to add code to draw the background!
![Page 22: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/22.jpg)
Drawing the background
• To draw the background we are going to implement the updateBackground method in ScrollWorld
![Page 23: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/23.jpg)
Drawing the background
• We want to create of image of only the viewable– We will need the camera position– We will loop over the visible tiles and draw them
into the image
![Page 24: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/24.jpg)
Drawing the background
• We want to create of image of only the viewable– We will need the camera position– We will loop over the visible tiles and draw them
into the image
![Page 25: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/25.jpg)
Drawing the background
myVisibleXCells
myVisibleYCells
(myCameraX, myCameraY)
![Page 26: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/26.jpg)
for( int i = 0; i < myVisibleXCells; i++ ){
int x = myCameraX + i;int y = myCameraY;
}
Drawing the background
myCameraX+myVisibleXCellsmyCameraX
i =0 i = 1 i = 2 i = 3
![Page 27: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/27.jpg)
for( int i = 0; i < myVisibleXCells; i++ ){
for( int j = 0; j < myVisibleYCells; j++ )
{int x = myCameraX + i;int y = myCameraY + j;// get Cell and Draw Cell
}}
Drawing the background
myCameraX+myVisibleXCellsmyCameraX
i =0 i = 1 i = 2 i = 3j = 0
j = 1
j = 2
myCameraY
myCameraY+myVisibleYCells
![Page 28: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/28.jpg)
for( in i = 0; i < myVisibleXCells; i++ ){
for( int j = 0; j < myVisibleYCells; j++ )
{int x = myCameraX + i;int y = myCameraY + j;// get Cell and Draw Cell
}}
Drawing the background• Open ScrollWorld• Find the void updateBackground() method• Create a loop like the one below• Try getting the Actor from the myBackground array
myBackground[x][y]• Put the actor in a variable, called actor?
![Page 29: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/29.jpg)
Drawing the background
myVisibleXCells
myVisibleYCells
(myCameraX, myCameraY)
• Technically the camera does not need to line up with cells, so we are going• To have to draw the image potentially miss aligned• Now we have to draw as many as
myVisibleXCells + 1 and myVisibleXCells + 1
![Page 30: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/30.jpg)
Drawing the background
![Page 31: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/31.jpg)
Drawing the background
Remove the old background!!!
Draw one cell into the new background
![Page 32: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/32.jpg)
Adding more to the background
It can be difficult to add one thing to the background at a timeCould we add long platforms together?Could we define where the ground is?
Let’s make methods to do this work for us
Then let’s call them to make a bigger interesting world
![Page 33: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/33.jpg)
• We want to make a method that given an position (x,y) can make a platform of length l
We will use a for loop againTry it yourselfThen try calling it in DemoWorld to add a platform
x,ylength
Adding Platforms
![Page 34: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/34.jpg)
Adding Platforms
x,ylength
![Page 35: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/35.jpg)
Adding ground• We want to make a method that given an position (x,y) can
make Ground of length l• Ground will start the position y and fill blocks all the way
downWe will use the add platform methodWe will use a for each different height
Remember y = 0 is the top, y = myFullHeight -1 is the bottom
Try it
x,y
length
![Page 36: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/36.jpg)
Adding ground
x,y
length
![Page 37: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/37.jpg)
One last thing: Animation
• Let’s animate the baby• The key to animation is change the picture
slightly– At the right time– Enough of the little changes look the like the
character is moving– Change the pictures too fast or too slow and it will
look strange
![Page 38: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/38.jpg)
Animation
• Open player– In the constructor we are going to load the
pictures needed for animation into an array– We are going to make a counter, we will use it to
choose a picture• It either indicates the time (or the current frame for
animation)
– We are going to make an array, which indicate which sequence of images to use
![Page 39: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/39.jpg)
Animation
GreenfootImage[] myImages
int[] myFrameSequence
int[] myClip
0 0 0 0 0 0 1 1 1 1 1 1
0
![Page 40: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/40.jpg)
Animation
GreenfootImage[] myImages
int[] myFrameSequence
int[] myClip
0 0 0 0 0 0 1 1 1 1 1 1
1
![Page 41: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/41.jpg)
Animation
GreenfootImage[] myImages
int[] myFrameSequence
int[] myClip
0 0 0 0 0 0 1 1 1 1 1 1
2
![Page 42: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/42.jpg)
Animation
GreenfootImage[] myImages
int[] myFrameSequence
int[] myClip
0 0 0 0 0 0 1 1 1 1 1 1
3
![Page 43: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/43.jpg)
Animation
GreenfootImage[] myImages
int[] myFrameSequence
int[] myClip
0 0 0 0 0 0 1 1 1 1 1 1
4
![Page 44: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/44.jpg)
Animation
GreenfootImage[] myImages
int[] myFrameSequence
int[] myClip
0 0 0 0 0 0 1 1 1 1 1 1
5
![Page 45: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/45.jpg)
Animation
GreenfootImage[] myImages
int[] myFrameSequence
int[] myClip
0 0 0 0 0 0 1 1 1 1 1 1
6
![Page 46: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/46.jpg)
Animation
• Open player• Create myClip, myImages, myFrameSequence– Set myClip = 0– Create the myFrameSequence[] like this
myFrameSequence[] = { 0, 0, 0, 0, 0, 1, 1, 1, 1, 1 };
– Create the image array– Load images into with
new GreenfootImage( "baby1.png" );new GreenfootImage( "baby1b.png" );
![Page 47: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/47.jpg)
AnimationIn the act() method
Set the next image at the endsetImage( myImages[ myFrameSequence[myClip] ] );
When the player moves left or right update myClip myClip = (myClip + 1 ) % myFrameSequence.length;
The “% myFrames.length” will make sure that myClip is always between 0 and length of the frame sequence array
If you try to access a position outside the array the program crashes
![Page 48: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/48.jpg)
Animation In the act() method
Set the next image at the endsetImage( myImages[ myFrameSequence[myClip] ] );
When the player moves left or right update myClip myClip = (myClip + 1 ) % myFrameSequence.length;
The “% myFrames.length” will make sure that myClip is always between 0 and length of the frame sequence array
If you try to access a position outside the array the program crashes
0 0 0 0 0 0 1 1 1 1 1 1
12CRASH !!! Ouch!!!
![Page 49: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/49.jpg)
AnimationInitializing things
![Page 50: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/50.jpg)
Animation
Animating in the act() method
![Page 51: Lesson 3: Arrays and Loops. Arrays Arrays are like collections of variables Picture mailboxes all lined up in a row, or storage holes in a shelf – You.](https://reader034.fdocuments.net/reader034/viewer/2022051316/5697bfc61a28abf838ca71d9/html5/thumbnails/51.jpg)
Make the game yoursBuild the level
Make the player shoot things
Make the player break things
Have things fall from the sky
Make the camera scroll forward
Add more objects into the game