independent project (using keyboard) - ms....

32
Independent project (using keyboard) What will be created? It is important to design and plan well before writing a program. Well designed and planned project bring a good result with less errors in minimum time. In this project, we will learn how to use keyboard inputs in a XNA game program. The following storyboard shows what will be created in this project. Figure 1. Storyboard for Earth science game As shown in the above figure, an Earth science game will be created. In this project an Earth character helps frustrated friends by giving answers to Earth science questions.

Upload: others

Post on 09-Jun-2020

6 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

Independent project (using keyboard)

What will be created?

It is important to design and plan well before writing a program. Well designed and planned project bring

a good result with less errors in minimum time.

In this project, we will learn how to use keyboard inputs in a XNA game program. The following

storyboard shows what will be created in this project.

Figure 1. Storyboard for Earth science game

As shown in the above figure, an Earth science game will be created. In this project an Earth character

helps frustrated friends by giving answers to Earth science questions.

Page 2: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

The game starts with the first screen. The first and the second screens are the same one. The player uses

keyboard’s arrow keys to move the Earth character in the screen. When the Earth character contacts with

one of the frustrated faces, the third screen will show up and asks “willingness of help”. If the user types

“yes” or ‘y’ then, the player moves on to the fourth screen. If the user type “no” or ‘n’ then back to the

previous screen which is the first screen. Three seconds after the fourth screen shows up, a proper

question, 5th, 6th, or 7th screen, should show up depending on which frustrated face has been contacted.

When answered correctly for the question, the 8th screen shows up and back to the first screen with the

frustrated face to a happy face. Otherwise shows the 9th screen and go back to the first screen.

Creating pictures for the project

Let’s create pictures for the project. The following pictures are needed for this project.

Figure 2. Pictures for Earth science game

The picture files are saved in png format with transparent background. The picture files will be moved

into the project content folder once the Earth science game project created.

Page 3: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

Project for Earth science game

Start VC# Express and click on “New Project”. Select project type as “Windows Game (4.0)”, name the

project as “EarthScience” without double quotes, and click “OK”.

When the project has been created, let’s change the project property to “Use Reach to access a limited

API set supported by Windows Phone, Xbox 360, and Windows” by right click on “EarthScience” in

Solution Explorer and select property.

After change the project property, change the “Game1.cs” in Solution Explorer to “EarthScience.cs”. If

the VC# Express asks about changing all related references of “Game1” to “EarthScience” then click on

“yes”. This is another way to change all “Game1” name to “EarthScience” but should manually check

that the change has been made throughout the entire project.

Change the preferred window size by typing the “graphics.PreferredBackBufferWidth = 600;

graphics.PreferredBackBufferHeight = 400;” in between “graphics = new GraphicsDeviceManager(this);”

and “Content.RootDirectory = "Content";” in “public EarthScience()” function.

Figure 3. Set preferred window width and height

Include pictures in the project

Let’s move the pictures in the project folder. Select pictures you created for this project, and press

control+x to cut the files. Select the folder “Documents\Visual Studio

2010\Projects\EarthScience\EarthScience\EarthScienceContent”, and press control+v to paste the files in

the folder.

Back to the VC# Express. Right click on the “EarthScienceContent (Content) in Solution Explorer, select

“Add”, “Existing item”, and “comets_tail”, “Earth”, “frustrated_face”, “happy_face”, “soil_profile”, and

“solar_panels”. Click on “Add” button to add them all in the project.

Under the line “SpriteBatch spriteBatch;” in EarthScience.cs file, type the following code:

Texture2D texCometsTailSprite { get; set; }

Texture2D texEarthSprite { get; set; }

Texture2D texFrustratedFaceSprite { get; set; }

Texture2D texHappyFaceSprite { get; set; }

Page 4: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

Texture2D texSoilProfileSprite { get; set; }

Texture2D texSolarPanelsSprite { get; set; }

Figure 4 Create texture functions for pictures

After create texture functions for the pictures, type the following code after “// TODO: use this.Content to

load your game content here” in “protected override void LoadContent()” in EarthScience.cs file.

texCometsTailSprite = this.Content.Load<Texture2D>("comets_tail");

texEarthSprite = this.Content.Load<Texture2D>("Earth");

texFrustratedFaceSprite = this.Content.Load<Texture2D>("frustrated_face");

texHappyFaceSprite = this.Content.Load<Texture2D>("happy_face");

texSoilProfileSprite = this.Content.Load<Texture2D>("soil_profile");

texSolarPanelsSprite = this.Content.Load<Texture2D>("solar_panels");

Page 5: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

Figure 5. Code for loading pictures

Create SpriteFont for the project

Two SpriteFont will be used in this project; one for large text and the other for small text.

As we created a SpriteFont before, right click on “EarthScienceContent(Content)” then select “Add” and

“New Item”.

In the “Add New Item” dialog window, select “Sprite Font”, change name to “SpriteFontLarge.spritefont”,

then click “Add” button. Change its font name to “Times New Roman” without double space and change

the font size to 16 as shown below.

Figure 6. Change font name and font size for SpriteFontLarge

Create another SpriteFont and name it as “SpriteFontSmall.spritefont” with “Times New Roman” and size

12.

Page 6: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

Back to the EarthScience.cs file, type "SpriteFont sfSpriteFontLarge { get; set; }" and “SpriteFont

sfSpriteFontSmall {get; set;}” without double quotes below the "Texture2D texSolarPanelsSprite { get;

set; }" line in EarthScience class as shown below.

Figure 7. Create functions for SpriteFontLarge and SpriteFontSmall

Type ‘sfSpriteFontLarge = this.Content.Load<SpriteFont>("SpriteFontLarge");’ and ‘sfSpriteFontSmall =

this.Content.Load<SpriteFont>("SpriteFontSmall");’ without single quote after the line

‘texSolarPanelsSprite = this.Content.Load<Texture2D>("solar_panels");’ in LoadContent() function as

shown below.

Figure 8. Code for loading two SpriteFonts in Earth Science program

Page 7: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

Variable, variable, and variables

Now it is the time to think about how to keep and use information to make a game. A variable is a place

with name that can contain a value. The type of the variable indicates what type of value it can store and

name that is used to store and retrieve value in a program.

The following shows important names in this program:

Variable name Used for Type

screen_no Indicates what is the current screen int

selected_question Indicates which question is selected int

timer Used for time checking int

question1_solved Indicates question1 solved bool

question2_solved Indicates question2 solved bool

question3_solved Indicates question3 solved bool

earth_x X-axis location of Earth float

earth_y Y-axis location of Earth float

face1_x X-axis location of face1 float

face1_y Y-axis location of face1 float

face2_x X-axis location of face2 float

face2_y Y-axis location of face2 float

face3_x X-axis location of face3 float

face3_y Y-axis location of face3 float

Type the following code below the line “SpriteFont sfSpriteFontSmall { get; set; }” in EarthScience class.

int screen_no = 1;

int selected_question = 0;

int timer = 0;

bool question1_solved = false;

bool question2_solved = false;

bool question3_solved = false;

float earth_x = 100f;

float earth_y = 200f;

float face1_x = 200f;

float face1_y = 30f;

float face2_x = 300f;

float face2_y = 250f;

float face3_x = 400f;

float face3_y = 120f;

The program looks like the following figure after type the above code.

Page 8: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

Figure 9. Code for variables

Create the first screen

We have needed pictures, SpriteFonts, and variables. It’s time to create the first screen.

To make the program organized by the screen, we will use a separate function to draw and update per

each screen.

Type “if (screen_no == 1) Draw_Screen_1();” after the line “// TODO: Add your drawing code here” in

the Draw() function in EarthScience.cs file. Change the background color of the program by changing

“Color.CornflowerBlue” to “Color.White” in the line “GraphicsDevice.Clear(Color.CornflowerBlue);” in

Draw() function.

Then type the following code below the Draw() function to put Earth, three frusted faces, and “Help on

science questions”.

void Draw_Screen_1()

{

spriteBatch.Begin();

spriteBatch.Draw(texEarthSprite, new Vector2(earth_x, earth_y), Color.White);

if (question1_solved)

spriteBatch.Draw(texHappyFaceSprite, new Vector2(face1_x, face1_y), Color.White);

else

spriteBatch.Draw(texFrustratedFaceSprite, new Vector2(face1_x, face1_y), Color.White);

if (question2_solved)

spriteBatch.Draw(texHappyFaceSprite, new Vector2(face2_x, face2_y), Color.White);

else

Page 9: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

spriteBatch.Draw(texFrustratedFaceSprite, new Vector2(face2_x, face2_y), Color.White);

if (question3_solved)

spriteBatch.Draw(texHappyFaceSprite, new Vector2(face3_x, face3_y), Color.White);

else

spriteBatch.Draw(texFrustratedFaceSprite, new Vector2(face3_x, face3_y), Color.White);

spriteBatch.DrawString(sfSpriteFontLarge, "Help on science questions", new Vector2(50f, 350f), Color.Blue);

spriteBatch.End();

}

The program should read like the following:

Figure 10. Code for drawing the first screen

The second scene (still first screen)

The second scene actually is the first screen too. Only code for the Update() function will make the

program reacts based on a user’s keyboard input. Same as draw, for better organize the program by screen,

type “if (screen_no == 1)” and “Update_Screen_1();” after the line “// TODO: Add your update logic

here” in Update() function.

Type the following code for Update_Screen_1() function.

Page 10: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

void Update_Screen_1()

{

KeyboardState keys = Keyboard.GetState();

if (keys.IsKeyDown(Keys.Up) && (earth_y > 1.0))

earth_y -= 1.0f;

if (keys.IsKeyDown(Keys.Down) && (earth_y < 299.0))

earth_y += 1.0f;

if (keys.IsKeyDown(Keys.Left) && (earth_x > 1.0))

earth_x -= 1.0f;

if (keys.IsKeyDown(Keys.Right) && (earth_y < 599.0))

earth_x += 1.0f;

Rectangle earth_rect, face1_rect, face2_rect, face3_rect;

earth_rect.X = (int)earth_x;

earth_rect.Y = (int)earth_y;

earth_rect.Width = 100;

earth_rect.Height = 100;

face1_rect.X = (int)face1_x;

face1_rect.Y = (int)face1_y;

face1_rect.Width = 100;

face1_rect.Height = 100;

face2_rect.X = (int)face2_x;

face2_rect.Y = (int)face2_y;

face2_rect.Width = 100;

face2_rect.Height = 100;

face3_rect.X = (int)face3_x;

face3_rect.Y = (int)face3_y;

face3_rect.Width = 100;

face3_rect.Height = 100;

if (earth_rect.Intersects(face1_rect))

{

screen_no = 3;

selected_question = 1;

}

if (earth_rect.Intersects(face2_rect))

{

screen_no = 3;

selected_question = 2;

}

if (earth_rect.Intersects(face3_rect))

{

screen_no = 3;

selected_question = 3;

}

}

Page 11: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

After typed, a part of the program looks like the following

Figure 11. Update_Screen_1 function

Update_Screen_1() function has two parts, the first part is detecting keyboard keys and move the Earth

accordingly. The second part is detecting whether the Earth detects collisions between the Earth and one

of the face sprite and change the screen accordingly.

The third scene

The third scene is simple. Display texts and get keyboard input “y” or “n”.

Under the line “if (screen_no == 1) Draw_Screen_1();” in Draw() function, type “if (screen_no == 3)

Draw_Screen_3();” without double quotes as shown below.

Page 12: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

Figure 12. Code for drawing the third screen in Draw() function

Type the following code after the Draw_Screen_1() function.

void Draw_Screen_3()

{

spriteBatch.Begin();

spriteBatch.Draw(texFrustratedFaceSprite, new Vector2(30f, 250f), Color.White);

spriteBatch.DrawString(sfSpriteFontLarge, "Would you help me on a Earth science question?",

new Vector2(100f, 100f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontLarge, "I'm frustrated and need a help.", new Vector2(100f, 150f),

Color.Blue);

spriteBatch.DrawString(sfSpriteFontLarge, "Yes/No", new Vector2(200f, 280f), Color.Blue);

spriteBatch.End();

}

Figure 13. Code for Draw_Screen_3()

Page 13: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

At the end of the EarthScience.cs, the program will looks like the figure above.

Type “if (screen_no == 3) Update_Screen_3();” after the line “if (screen_no == 1) Update_Screen_1();”

in Update() function as shown below.

Figure 14. Code for Update() function for the third scene

Code for Update_Screen_3() is relatively simple. Get keyboard input, if a user press “y” then change

screen_no to 4. If a user press “n” then change screen_no to 1 and change Earth sprite location. Type the

following code after the Update_Screen_1() function.

void Update_Screen_3()

{

KeyboardState keys = Keyboard.GetState();

if (keys.IsKeyDown(Keys.Y))

{

screen_no = 4;

}

else if (keys.IsKeyDown(Keys.N))

{

earth_x = 100f;

earth_y = 200f;

screen_no = 1;

}

}

Page 14: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

The fourth scene

The fourth scene is similar to the previous animation project. Display a frustrated face and text and three

seconds later move to the question screen. The time will be checked by a timer variable. The selected

question number is kept in the variable “selected_question”.

In Draw() function, type “if (screen_no == 4) Draw_Screen_4();” after the line “if (screen_no == 3)

Draw_Screen_3();”.

Figure 15. Draw() function after including code for the fourth scene

Type the following code after the Draw_Screen_3() function.

void Draw_Screen_4()

{

spriteBatch.Begin();

spriteBatch.Draw(texFrustratedFaceSprite, new Vector2(30f, 250f), Color.White);

spriteBatch.DrawString(sfSpriteFontLarge, "Thank you!", new Vector2(100f, 100f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontLarge, "Here is the question", new Vector2(100f, 150f),

Color.Blue);

spriteBatch.End();

}

Update() function also need to be changed accordingly. Type “if (screen_no == 4) Update_Screen_4();”

after the line “if (screen_no == 3) Update_Screen_3();” in Update() function as shown below.

Page 15: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

Figure 16. Update() function including code for the fourth scene

Type the following code for the Update_Screen_4() after the Update_Screen_3() function.

void Update_Screen_4()

{

timer++;

if (timer >= 180)

{

timer = 0;

if (selected_question == 1)

screen_no = 5;

if (selected_question == 2)

screen_no = 6;

if (selected_question == 3)

screen_no = 7;

}

}

Each time, timer is increased by one. When timer value exceeds 180 (which means 3 seconds, remember

Update function is called 60 times per second), reset the timer to zero and based on the selected question,

change screen_no accordingly.

The fifth scene

The fifth scene is very similar to the third scene except use ‘a’, ‘b’, ‘c’, or ‘d’ instead of ‘y’ or ‘n’.

Page 16: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

Type “if (screen_no == 5) Draw_Screen_5();” after the line “if (screen_no == 4) Draw_Screen_4();” in

Draw() function. Then type the following code after Draw_Screen_4() function.

void Draw_Screen_5()

{

spriteBatch.Begin();

spriteBatch.Draw(texFrustratedFaceSprite, new Vector2(30f, 250f), Color.White);

spriteBatch.Draw(texCometsTailSprite, new Vector2(350f, 50f), Color.White);

spriteBatch.DrawString(sfSpriteFontLarge, "Why does a comet's tail point away from the Sun?",

new Vector2(80f, 20f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "a. The solar wind blows the tail away from the Sun.",

new Vector2(30f, 80f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "b. It is being pulled by a nearby black hole.",

new Vector2(30f, 110f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "c. The Moon's light only shines on part of the comet.",

new Vector2(30f, 140f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "d. The comet's tail is following the path of Jupiter.",

new Vector2(30f, 170f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontLarge, "Answer?", new Vector2(200f, 280f), Color.Blue);

spriteBatch.End();

}

Update() function also need to include code for the fifth scene. Type “if (screen_no == 5)

Update_Screen_5();” after the line “if (screen_no == 4) Update_Screen_4();” in Update() function. Then

type the following code after Update_Screen_4() function.

void Update_Screen_5()

{

KeyboardState keys = Keyboard.GetState();

if (keys.IsKeyDown(Keys.A))

{

question1_solved = true;

screen_no = 8;

}

else if (keys.IsKeyDown(Keys.B) || keys.IsKeyDown(Keys.C) || keys.IsKeyDown(Keys.D))

{

screen_no = 9;

}

}

Page 17: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

In the Update_Screen_5(), set question1_solved to true when the user provides correct answer. In this

question ‘A’ is correct answer. Also, set the screen_no to 8 which is correct answer scene. When the user

provides a wrong answer, ‘B’, ‘C’, or ‘D’, then set the screen_no to 9 which is incorrect answer scene.

The sixth scene

The sixth scene is nothing different from the fifth scene except solar panels picture and different question

text.

Type “if (screen_no == 6) Draw_Screen_6();” after the line “if (screen_no == 5) Draw_Screen_5();” in

Draw() function. Then type the following code after Draw_Screen_5() function.

void Draw_Screen_5()

{

spriteBatch.Begin();

spriteBatch.Draw(texFrustratedFaceSprite, new Vector2(30f, 250f), Color.White);

spriteBatch.Draw(texCometsTailSprite, new Vector2(350f, 50f), Color.White);

spriteBatch.DrawString(sfSpriteFontLarge, "Why does a comet's tail point away from the Sun?",

new Vector2(80f, 20f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "a. The solar wind blows the tail away from the Sun.",

new Vector2(30f, 80f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "b. It is being pulled by a nearby black hole.",

new Vector2(30f, 110f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "c. The Moon's light only shines on part of the comet.",

new Vector2(30f, 140f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "d. The comet's tail is following the path of Jupiter.",

new Vector2(30f, 170f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontLarge, "Answer?", new Vector2(200f, 280f), Color.Blue);

spriteBatch.End();

}

Update() function also need to include code for the sixth scene. Type “if (screen_no == 6)

Update_Screen_6();” after the line “if (screen_no == 5) Update_Screen_5();” in Update() function. Then

type the following code after Update_Screen_5() function.

void Update_Screen_5()

{

KeyboardState keys = Keyboard.GetState();

if (keys.IsKeyDown(Keys.A))

{

Page 18: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

question1_solved = true;

screen_no = 8;

}

else if (keys.IsKeyDown(Keys.B) || keys.IsKeyDown(Keys.C) || keys.IsKeyDown(Keys.D))

{

screen_no = 9;

}

}

The seventh scene

It is same as fifth and sixth scenes. Type “if (screen_no == 7) Draw_Screen_7();” after the line “if

(screen_no == 6) Draw_Screen_6();” in Draw() function. Then type the following code after

Draw_Screen_6() function.

void Draw_Screen_7()

{

spriteBatch.Begin();

spriteBatch.Draw(texFrustratedFaceSprite, new Vector2(30f, 250f), Color.White);

spriteBatch.Draw(texSoilProfileSprite, new Vector2(350f, 80f), Color.White);

spriteBatch.DrawString(sfSpriteFontLarge, "Which layer of the soil profile would be affected",

new Vector2(80f, 20f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontLarge, "the most by weathering and erosion?",

new Vector2(80f, 50f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "a. 1", new Vector2(150f, 110f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "b. 2", new Vector2(150f, 140f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "c. 3", new Vector2(150f, 170f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontSmall, "d. 4", new Vector2(150f, 200f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontLarge, "Answer?", new Vector2(200f, 280f), Color.Blue);

spriteBatch.End();

}

Then type “if (screen_no == 7) Update_Screen_7();” after the line “if (screen_no == 6)

Update_Screen_6();” in Update() function. Then type the following code after Update_Screen_6()

function.

void Update_Screen_7()

{

KeyboardState keys = Keyboard.GetState();

Page 19: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

if (keys.IsKeyDown(Keys.A))

{

question3_solved = true;

screen_no = 8;

}

else if (keys.IsKeyDown(Keys.B) || keys.IsKeyDown(Keys.C) || keys.IsKeyDown(Keys.D))

{

screen_no = 9;

}

}

The eighth scene

The eighth scene is very similar to the fourth scene. The differences are using happy face and different

text and its update function.

Type “if (screen_no == 8) Draw_Screen_8();” after the line “if (screen_no == 7) Draw_Screen_7();” in

Draw() function. Then type the following code after Draw_Screen_7() function.

void Draw_Screen_8()

{

spriteBatch.Begin();

spriteBatch.Draw(texHappyFaceSprite, new Vector2(30f, 250f), Color.White);

spriteBatch.DrawString(sfSpriteFontLarge, "You are smart!", new Vector2(200f, 120f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontLarge, "Thank you for your help.", new Vector2(200f, 170f),

Color.Blue);

spriteBatch.End();

}

Then type “if (screen_no == 8) Update_Screen_8();” after the line “if (screen_no == 7)

Update_Screen_7();” in Update() function. Then type the following code after Update_Screen_7()

function.

void Update_Screen_8()

{

timer++;

if (timer >= 180)

{

timer = 0;

Page 20: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

earth_x = 100f;

earth_y = 200f;

screen_no = 1;

}

}

Remember, the timer should be reset for the future use.

The ninth screen

The project is almost done. Keep it up. The ninth scene is similar to the eighth scene.

Type “if (screen_no == 9) Draw_Screen_9();” after the line “if (screen_no == 8) Draw_Screen_8();” in

Draw() function. Then type the following code after Draw_Screen_8() function.

void Draw_Screen_9()

{

spriteBatch.Begin();

spriteBatch.Draw(texFrustratedFaceSprite, new Vector2(30f, 250f), Color.White);

spriteBatch.DrawString(sfSpriteFontLarge, "My teacher said", new Vector2(200f, 100f), Color.Blue);

spriteBatch.DrawString(sfSpriteFontLarge, "It is not the answer", new Vector2(200f, 150f),

Color.Blue);

spriteBatch.DrawString(sfSpriteFontLarge, "Thank you anyway", new Vector2(200f, 200f),

Color.Blue);

spriteBatch.End();

}

Then type “if (screen_no == 9) Update_Screen_9();” after the line “if (screen_no == 8)

Update_Screen_8();” in Update() function. Then type the following code after Update_Screen_8()

function.

void Update_Screen_9()

{

timer++;

if (timer >= 180)

{

timer = 0;

earth_x = 100f;

earth_y = 200f;

screen_no = 1;

Page 21: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

}

}

What it looks like?

After finishing up, compile the project (build the project) and run the program.

You will see the following screens.

Figure 17. Earth Science game screens

It is time to relax and enjoy the game.

Page 22: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

Final code for EarthScience program

EarthScience.cs file ���������������������� ��������� ����������������� �������������������� ��� ������������������������ ��� �������� ��������������������� ��� �������� �������������������� ��� �������� �������������������������� ��� �������� ��� !������������������� ��� �������� "� ����������������� ��� �������� ����������� ���#��!������$�����%%%�&�������'�����%%%�(!������!������� ������������������%%%�&%�������'����� �)����������#��!������*��������� ��� �������� ��������$������������ !���+������������� !�������������� ��,��!�� ��,��!�����������(-��.+�-����(���� ���$�������/���������(-��.+�-#��!� ���$�������/���������(-��.+�-����������� ���$�������/���������(-��.+�-0� ����� ���$�������/���������(-��.+�-����1������ ���$�������/���������(-��.+�-�����1����� ���$�������/����������� ��������� ����������$�������/���������� ��������� �����������$�������/�����������������2���3�4�����������������2�������3�5�����������������3�5����������)����������42������3���������������)����������.2������3���������������)����������62������3����������������������!2-�3�455������������������!2��3�.55���

Page 23: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

����������������42-�3�.55�������������������42��3�65�������������������.2-�3�655�������������������.2��3�.75�������������������62-�3�855�������������������62��3�4.5������������������� �)����#��!�����9:���������$���������������� !����3������� !���+���������9!��:����������������� !��� 1�����,���,����;��!�3�<55����������������� !��� 1�����,���,����0��!�3�855������������������ =��+�������3�>����>����������/����������%%%�&�������'���������%%%��������!������� �����������������?�������������)���������������� ���������%%%�(!�������!���������������������������������������������������@��� !�����������%%%���������� ����������)�� "������?������������!����!�������� �������������%%%������������?�!�������� ���������%%%�&%�������'��������� �����������������"������?9:���������$�������������%%�(A+A*�����������������?�����������!���������������)�� "������?9:����������/����������%%%�&�������'���������%%%���������������)����������� �������������!� �������������������%%%����������������� ���������%%%�&%�������'��������� �������������������������9:���������$�������������%%����������� ��,��!B��!��!�����)������������-��� �������������� ��,��!�3����� ��,��!9��� !���+���:���������������%%�(A+A*����!�� ��������������������������!��������������-����(���� ���3�!�� ���� ����&(-��.+'9>����2���>:��������������-#��!� ���3�!�� ���� ����&(-��.+'9>#��!>:��������������-����������� ���3�!�� ���� ����&(-��.+'9>�������2���>:��������������-0� ����� ���3�!�� ���� ����&(-��.+'9>!� �2���>:��

Page 24: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

������������-����1������ ���3�!�� ���� ����&(-��.+'9>����2 �����>:��������������-�����1����� ���3�!�� ���� ����&(-��.+'9>�����2 ����>:������������������ ����������3�!�� ���� ����&� �����'9>� ���������>:����������������� �����������3�!�� ���� ����&� �����'9>� ����������>:����������/����������%%%�&�������'���������%%%�C���������������)����������� �������������!� ���������������������%%%��������� ���������%%%�&%�������'��������� �����������������C���������9:���������$�������������%%�(A+A*�C������������������������������!����������/����������%%%�&�������'���������%%%��������!��������������������!����� ������!������B���������%%%��!��������������������B���!������� �B����� ������������ ���������%%%�&%�������'���������%%%�& ��������3>���(��>'1������������ �!���������������� &% ����'��������� �����������������C ��9���(������(��:���������$�������������%%��������!�������-�����������������9���1�� ���91����"��- A�: ,���� ,����33�,����� 1����:�����������������!�� #-�9:���������������%%�(A+A*����������� ���������!�����������������9����2���33�4:�����������������C ��2����249:�����������������9����2���33�6:�����������������C ��2����269:�����������������9����2���33�8:�����������������C ��2����289:�����������������9����2���33�7:�����������������C ��2����279:�����������������9����2���33�<:�����������������C ��2����2<9:�����������������9����2���33�D:�����������������C ��2����2D9:�����������������9����2���33�E:�����������������C ��2����2E9:��

Page 25: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

���������������9����2���33�F:�����������������C ��2����2F9:���������������)�� C ��9���(��:����������/���������������C ��2����249:���������$�������������G�)�����������3�G�)���� ���9:������������������9��� "�G�+���9G�� C :�HH�9��!2��'�4 5::�������������������!2��@3�4 5������������������9��� "�G�+���9G�� +���:�HH�9��!2��&�.FF 5::�������������������!2��I3�4 5������������������9��� "�G�+���9G�� ��:�HH�9��!2-�'�4 5::�������������������!2-�@3�4 5������������������9��� "�G�+���9G�� =��!:�HH�9��!2��&�7FF 5::�������������������!2-�I3�4 5����������������=��������!2��B����42��B����.2��B����62������������������!2�� ��3�9��:��!2-����������������!2�� J�3�9��:��!2�����������������!2�� ;��!�3�455����������������!2�� 0��!�3�455�����������������42�� ��3�9��:���42-�����������������42�� J�3�9��:���42������������������42�� ;��!�3�455�����������������42�� 0��!�3�455�����������������.2�� ��3�9��:���.2-�����������������.2�� J�3�9��:���.2������������������.2�� ;��!�3�455�����������������.2�� 0��!�3�455�����������������62�� ��3�9��:���62-�����������������62�� J�3�9��:���62������������������62�� ;��!�3�455�����������������62�� 0��!�3�455������������������9��!2�� "�����9���42��::�������������$���������������������2���3�6����������������������2�������3�4��������������/�

Page 26: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

���������������9��!2�� "�����9���.2��::�������������$���������������������2���3�6����������������������2�������3�.��������������/����������������9��!2�� "�����9���62��::�������������$���������������������2���3�6����������������������2�������3�6��������������/���������/���������������C ��2����269:���������$�������������G�)�����������3�G�)���� ���9:������������������9��� "�G�+���9G�� J::�������������$���������������������2���3�8��������������/�������������������9��� "�G�+���9G�� K::�������������$�������������������!2-�3�455���������������������!2��3�.55�����������������������2���3�4��������������/���������/���������������C ��2����289:���������$����������������II�����������������9����'3�4E5:�������������$���������������������3�5���������������������9����2�������33�4:�������������������������2���3�7���������������������9����2�������33�.:�������������������������2���3�<���������������������9����2�������33�6:�������������������������2���3�D��������������/���������/�

Page 27: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

��������������C ��2����279:���������$�������������G�)�����������3�G�)���� ���9:������������������9��� "�G�+���9G�� �::�������������$�����������������������42������3�������������������������2���3�E��������������/�������������������9��� "�G�+���9G�� ,:�LL���� "�G�+���9G�� �:�LL���� "�G�+���9G�� +::�������������$���������������������2���3�F��������������/���������/���������������C ��2����2<9:���������$�������������G�)�����������3�G�)���� ���9:������������������9��� "�G�+���9G�� �::�������������$�����������������������.2������3�������������������������2���3�E��������������/�������������������9��� "�G�+���9G�� �:�LL���� "�G�+���9G�� ,:�LL���� "�G�+���9G�� +::�������������$���������������������2���3�F��������������/���������/���������������C ��2����2D9:���������$�������������G�)�����������3�G�)���� ���9:������������������9��� "�G�+���9G�� �::�������������$�����������������������62������3�������������������������2���3�E��������������/�������������������9��� "�G�+���9G�� ,:�LL���� "�G�+���9G�� �:�LL���� "�G�+���9G�� +::�������������$�

Page 28: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

��������������������2���3�F��������������/���������/���������������C ��2����2E9:���������$����������������II�����������������9����'3�4E5:�������������$���������������������3�5��������������������!2-�3�455���������������������!2��3�.55�����������������������2���3�4��������������/���������/���������������C ��2����2F9:���������$����������������II�����������������9����'3�4E5:�������������$���������������������3�5��������������������!2-�3�455���������������������!2��3�.55�����������������������2���3�4��������������/���������/����������%%%�&�������'���������%%%�(!�������������!��!������!�������������� ���������%%%�&%�������'���������%%%�& ��������3>���(��>'1������������ �!���������������� &% ����'��������� �����������������+���9���(������(��:���������$���������������� !���+��� ����9����� ;!�:���������������%%�(A+A*����������������������!�����������������9����2���33�4:�����������������+���2����249:�����������������9����2���33�6:�����������������+���2����269:�����������������9����2���33�8:�

Page 29: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

����������������+���2����289:�����������������9����2���33�7:�����������������+���2����279:�����������������9����2���33�<:�����������������+���2����2<9:�����������������9����2���33�D:�����������������+���2����2D9:�����������������9����2���33�E:�����������������+���2����2E9:�����������������9����2���33�F:�����������������+���2����2F9:���������������)�� +���9���(��:����������/���������������+���2����249:���������$�������������� ��,��! ,���9:��������������� ��,��! +���9-#��!� ��B����M���.9��!2-B���!2�:B������ ;!�:�����������������9������42�����:������������������ ��,��! +���9-0� ����� ��B����M���.9���42-B����42�:B������ ;!�:���������������������������������� ��,��! +���9-����������� ��B����M���.9���42-B����42�:B������ ;!�:�����������������9������.2�����:������������������ ��,��! +���9-0� ����� ��B����M���.9���.2-B����.2�:B������ ;!�:���������������������������������� ��,��! +���9-����������� ��B����M���.9���.2-B����.2�:B������ ;!�:�����������������9������62�����:������������������ ��,��! +���9-0� ����� ��B����M���.9���62-B����62�:B������ ;!�:���������������������������������� ��,��! +���9-����������� ��B����M���.9���62-B����62�:B������ ;!�:��������������� ��,��! +��������9��� ���������B�>0� �����������������>B����M���.975�B�675�:B������ ,��:��������������� ��,��! #��9:����������/���������������+���2����269:���������$�������������� ��,��! ,���9:��������������� ��,��! +���9-����������� ��B����M���.965�B�.75�:B������ ;!�:��������������� ��,��! +��������9��� ���������B�>;���������!� ��������#��!�������������N>B����M���.9455�B�455�:B������ ,��:��

Page 30: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

������������� ��,��! +��������9��� ���������B�>"O�������������������!� >B����M���.9455�B�475�:B������ ,��:��������������� ��,��! +��������9��� ���������B�>J�%K�>B����M���.9.55�B�.E5�:B������ ,��:��������������� ��,��! #��9:����������/���������������+���2����289:���������$�������������� ��,��! ,���9:��������������� ��,��! +���9-����������� ��B����M���.965�B�.75�:B������ ;!�:��������������� ��,��! +��������9��� ���������B�>(!�������P>B����M���.9455�B�455�:B������ ,��:��������������� ��,��! +��������9��� ���������B�>0�����!�������>B����M���.9455�B�475�:B������ ,��:��������������� ��,��! #��9:����������/���������������+���2����279:���������$�������������� ��,��! ,���9:��������������� ��,��! +���9-����������� ��B����M���.965�B�.75�:B������ ;!�:��������������� ��,��! +���9-����(���� ��B����M���.9675�B�75�:B������ ;!�:��������������� ��,��! +��������9��� ���������B�>;!�����������O������ ��������������!����N>B����M���.9E5�B�.5�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>� �(!������������)�����!���������������!���� >B����M���.965�B�E5�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>) �"����)���� �����)�������)��)�����!�� >B����M���.965�B�445�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>� �(!�����O�����!�������!������� ������!���� >B����M���.965�B�485�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>� �(!����O�������������������!� �!����Q� �� >B����M���.965�B�4D5�:B������ ,��:��������������� ��,��! +��������9��� ���������B�>�����N>B����M���.9.55�B�.E5�:B������ ,��:��������������� ��,��! #��9:����������/���������������+���2����2<9:���������$�������������� ��,��! ,���9:��������������� ��,��! +���9-����������� ��B����M���.965�B�.75�:B������ ;!�:��������������� ��,��! +���9-�����1����� ��B����M���.9675�B�455�:B������ ;!�:��������������� ��,��! +��������9��� ���������B�>(!���R����������������������������� ����>B����M���.9E5�B�.5�:B������ ,��:��������������� ��,��! +��������9��� ���������B�>������������������!�������� �����@>B����

Page 31: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

M���.9E5�B�75�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>� �������-������������!����>B����M���.965�B�445�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>) ��������������������������>B����M���.965�B�485�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>� ����������)��������������������������!>B����M���.965�B�4D5�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>� � �����������!��������)�����>B����M���.965�B�.55�:B������ ,��:��������������� ��,��! +��������9��� ���������B�>�����N>B����M���.9.55�B�.E5�:B������ ,��:��������������� ��,��! #��9:����������/���������������+���2����2D9:���������$�������������� ��,��! ,���9:��������������� ��,��! +���9-����������� ��B����M���.965�B�.75�:B������ ;!�:��������������� ��,��! +���9-����1������ ��B����M���.9675�B�E5�:B������ ;!�:��������������� ��,��! +��������9��� ���������B�>;!��!���������!������ ������������)������>B����M���.9E5�B�.5�:B������ ,��:��������������� ��,��! +��������9��� ���������B�>!�����)����!���������������N>B����M���.9E5�B�75�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>� �4>B����M���.9475�B�445�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>) �.>B����M���.9475�B�485�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>� �6>B����M���.9475�B�4D5�:B������ ,��:��������������� ��,��! +��������9��� ����������B�>� �8>B����M���.9475�B�.55�:B������ ,��:��������������� ��,��! +��������9��� ���������B�>�����N>B����M���.9.55�B�.E5�:B������ ,��:��������������� ��,��! #��9:����������/���������������+���2����2E9:���������$�������������� ��,��! ,���9:��������������� ��,��! +���9-0� ����� ��B����M���.965�B�.75�:B������ ;!�:��������������� ��,��! +��������9��� ���������B�>J����������P>B����M���.9.55�B�4.5�:B������ ,��:��������������� ��,��! +��������9��� ���������B�>(!�����������������!� >B����M���.9.55�B�4D5�:B������ ,��:��������������� ��,��! #��9:����������/���������������+���2����2F9:���������$�

Page 32: Independent project (using keyboard) - Ms. Ciokanciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day3.pdf · storyboard shows what will be created in this project. Figure 1

������������� ��,��! ,���9:��������������� ��,��! +���9-����������� ��B����M���.965�B�.75�:B������ ;!�:��������������� ��,��! +��������9��� ���������B�>�����!������>B����M���.9.55�B�455�:B������ ,��:��������������� ��,��! +��������9��� ���������B�>"�������!������>B����M���.9.55�B�475�:B������ ,��:��������������� ��,��! +��������9��� ���������B�>(!��������������>B����M���.9.55�B�.55�:B������ ,��:��������������� ��,��! #��9:����������/�����/�/�

Program.cs file ����������������� ���#��!������$�S���;"K+A;��LL��,A�����������������1�����������$���������%%%�&�������'���������%%%�(!���������� ��������!�� ������� ���������%%%�&%�������'�����������������������9�����TU�����:���������$�������������������9#��!����������3����#��!�����9::�������������$�������������������� =��9:��������������/���������/�����/�S�����/�