complex project (math world) -...

Complex project (Math World)

Start of the Math WorldMath world will use ballistic trajectory to calculate the movement of spear. The following story board shows what will be created in Math World.

Figure 1. Storyboard for Math World

Create variables for Math World

The following is code for variables that are used in Math World. Put the code after the variables for world.

// for math world int spear_angle = 45; int speed = 0; int angle = 45; int distance = 500;

int no_of_hits = 0; bool fired = false; Vector2 spear_loc = new Vector2(120f, 420f); Vector2 speed_loc = new Vector2(600f, 100f); Vector2 angle_loc = new Vector2(600f, 130f); Vector2 fire_loc = new Vector2(690f, 160f); Vector2 trojan_loc = new Vector2(100f, 400f); Vector2 trajectory_loc = new Vector2(0f, 0f);

Then add the following code after the sprites for the welcome screen.

// sprites for math world Texture2D texTrojanHelmetSprite { get; set; } Texture2D texTrojanStandLeftSprite { get; set; } Texture2D texTrojanStandRightSprite { get; set; } Texture2D texTrojanStandSmallSprite { get; set; } Texture2D texTrojanArmSprite { get; set; } Texture2D texMissleSprite { get; set; } Texture2D texTargetSprite { get; set; } Texture2D texSpearSprite { get; set; } Texture2D texTriangleSprite { get; set; } Texture2D texTriangleLineSprite { get; set; } Texture2D texPlusSprite { get; set; } Texture2D texMinusSprite { get; set; } Texture2D texFireSprite { get; set; }

The following code is for loading sprite texture for the Math World. Add “Load_Scene_11();” right below the line “Load_Scene_1();” in LoadContent() function. Then put the code after the Load_Scene_1() function. void Load_Scene_11() { texTrojanHelmetSprite = this.Content.Load<Texture2D>("trojan_helmet"); texTrojanStandLeftSprite = this.Content.Load<Texture2D>("trojan_stand_left"); texTrojanStandRightSprite = this.Content.Load<Texture2D>("trojan_stand_right"); texTrojanStandSmallSprite = this.Content.Load<Texture2D>("trojan_stand_small"); texMissleSprite = this.Content.Load<Texture2D>("missile"); texTargetSprite = this.Content.Load<Texture2D>("target"); texSpearSprite = this.Content.Load<Texture2D>("spear"); texPlusSprite = this.Content.Load<Texture2D>("plus"); texMinusSprite = this.Content.Load<Texture2D>("minus"); texFireSprite = this.Content.Load<Texture2D>("fire"); }

Before start the Math World, some variables should have initial values. Change the Init_Scene_11() function to read as follows.

void Init_Scene_11() { spear_loc.X = 120f; spear_loc.Y = 420f; fired = false; trajectory_loc.X = 0; trajectory_loc.Y = 0; spear_angle = 45;

distance = 500; speed = 0; no_of_hits = 0; }

Drawing introduction screensThe Math World game has four introduction screens. Those four introduction screens do not have special effects but narratives.

Add the following code in Draw() function right above the “default: Draw_Scene_1();” line. case 11: Draw_Scene_11(); break; case 12: Draw_Scene_12(); break; case 13: Draw_Scene_13(); break; case 14: Draw_Scene_14(); break;

Type the following code after the Draw_Scene_5() function.

void Draw_Scene_11() { spriteBatch.Begin(); spriteBatch.DrawString(sfArial24SpriteFont, "During the Roman era,", new Vector2(240f, 150f), Color.DarkBlue); spriteBatch.DrawString(sfArial24SpriteFont, "A good army is critical to", new Vector2(240f, 200f), Color.DarkBlue); spriteBatch.DrawString(sfArial24SpriteFont, "maintain their empire.", new Vector2(240f, 250f), Color.DarkBlue); spriteBatch.Draw(texTrojanHelmetSprite, new Vector2(550f, 350f), Color.White); spriteBatch.End(); } void Draw_Scene_12() { spriteBatch.Begin(); spriteBatch.DrawString(sfArial24SpriteFont, "Most soldiers are on foot", new Vector2(180f, 150f), Color.DarkBlue); spriteBatch.DrawString(sfArial24SpriteFont, "and should be trained properly", new Vector2(180f, 200f), Color.DarkBlue); spriteBatch.DrawString(sfArial24SpriteFont, "including skills on throwing spears.", new Vector2(180f, 250f), Color.DarkBlue); spriteBatch.Draw(texTrojanStandLeftSprite, new Vector2(550f, 350f), Color.White); spriteBatch.End(); } void Draw_Scene_13() { spriteBatch.Begin(); spriteBatch.DrawString(sfArial24SpriteFont, "It is true even today that", new Vector2(180f, 150f), Color.DarkBlue); spriteBatch.DrawString(sfArial24SpriteFont, "national defense is the highest", new Vector2(180f, 200f), Color.DarkBlue); spriteBatch.DrawString(sfArial24SpriteFont, "importance to keep the country safe.",

new Vector2(180f, 250f), Color.DarkBlue); spriteBatch.Draw(texMissleSprite, new Vector2(450f, 300f), Color.White); spriteBatch.End(); } void Draw_Scene_14() { spriteBatch.Begin(); spriteBatch.DrawString(sfArial24SpriteFont, "How to play this game?", new Vector2(150f, 150f), Color.DarkBlue); spriteBatch.DrawString(sfArial24SpriteFont, "It uses ballistic trajactory.", new Vector2(150f, 200f), Color.DarkBlue); spriteBatch.DrawString(sfArial24SpriteFont, "Set speed and angle then fire", new Vector2(150f, 250f), Color.DarkBlue); spriteBatch.DrawString(sfArial24SpriteFont, "to hit the target.", new Vector2(150f, 300f), Color.DarkBlue); spriteBatch.End(); }

To make transition of the scene, put the following code in Update() function.

case 11: Update_Scene_11(); break; case 12: Update_Scene_12(); break; case 13: Update_Scene_13(); break; case 14: Update_Scene_14(); break;

The add the following code after the Update_Scene_5() function.

void Update_Scene_11() { if ((timer % 300) == 0) { timer = 1; scene_no = 12; } } void Update_Scene_12() { if ((timer % 300) == 0) { timer = 1; scene_no = 13; } } void Update_Scene_13() { if ((timer % 300) == 0) { timer = 1; scene_no = 14; } }

void Update_Scene_14() { if ((timer % 300) == 0) { timer = 1; scene_no = 15; } }

As you can see, the logic is pretty straight; after 5 seconds reset the timer and move to next scene.

Run the program and you will see the following screens.

Figure 2. Scene 11, Math World


Create a demonstration sceneToday’s game provides demonstration scenes how to play a game since it is one of the easiest ways to explain.

The scene 15 will be served for this purpose.


The above figure shows the demonstration scene that is going to be created.

Add the following code in Draw() function.

case 15: Draw_Scene_15(); break;

Then put the following code after Draw_Scene_14() function.

void Draw_Scene_15(){ spriteBatch.Begin(); spriteBatch.DrawString(sfArial14SpriteFont, "Set the speed and angle then fire ", new Vector2(100f, 100f), Color.Red); spriteBatch.DrawString(sfArial24SpriteFont, "Distance: " + distance.ToString(), new Vector2(100f, 150f), Color.DarkBlue); spriteBatch.DrawString(sfArial14SpriteFont, "Speed:", speed_loc, Color.DarkBlue); spriteBatch.Draw(texMinusSprite, new Vector2(speed_loc.X + 80, speed_loc.Y), Color.White); spriteBatch.DrawString(sfArial14SpriteFont, speed.ToString(), new Vector2(speed_loc.X + 110, speed_loc.Y), Color.DarkBlue); spriteBatch.Draw(texPlusSprite, new Vector2(speed_loc.X + 150, speed_loc.Y), Color.White); spriteBatch.DrawString(sfArial14SpriteFont, "Angle:", angle_loc, Color.DarkBlue); spriteBatch.Draw(texMinusSprite, new Vector2(angle_loc.X + 80, angle_loc.Y), Color.White); spriteBatch.DrawString(sfArial14SpriteFont, angle.ToString(), new Vector2(angle_loc.X + 110, angle_loc.Y), Color.DarkBlue); spriteBatch.Draw(texPlusSprite, new Vector2(angle_loc.X + 150, angle_loc.Y), Color.White); spriteBatch.Draw(texFireSprite, fire_loc, Color.White); spriteBatch.Draw(texTrojanStandSmallSprite, trojan_loc, Color.White); spriteBatch.Draw(texSpearSprite, new Vector2(spear_loc.X + trajectory_loc.X, spear_loc.Y + trajectory_loc.Y), null, Color.White, MathHelper.ToRadians(spear_angle), new Vector2(texSpearSprite.Width / 2, texSpearSprite.Height / 2), 1.0f, SpriteEffects.None, 0f); spriteBatch.Draw(texTargetSprite, new Vector2(trojan_loc.X + distance, trojan_loc.Y + 50), Color.White); spriteBatch.End();}

Most of the codes are the same code we learned, except one “spriteBatch.Draw(texSpearSprite, new Vector2(spear_loc.X + trajectory_loc.X, spear_loc.Y + trajectory_loc.Y), null, Color.White, MathHelper.ToRadians(spear_angle), new Vector2(texSpearSprite.Width / 2, texSpearSprite.Height / 2), 1.0f, SpriteEffects.None, 0f);” It is the same function we used before, spriteBatch.Draw(), but has different number of parameters. The “MathHelper.ToRadians(spear_angle)” indicates what degree the sprite should rotated. The “new Vector2(texSpearSprite.Width / 2, texSpearSprite.Height / 2)” indicates the point to rotate a sprite; in this case the center of the spear sprite.

The exact angle and the spear’s trajectory are calculated using ballistic trajectory formula.

The height of spear at x position is

y= y0+x tan θ− gx2

2( v cosθ )2

.

The angle at x position is calculated by angle = atan(y – old_y).

Since the original spear shape is in 90 degree angle (up position) and the y coordinate in XNA is increased in down direction, adjustment should be made accordingly.

The following code is for the Update_Scene_15() function which need to be put after Update_Scene_14() function.

void Update_Scene_15(){ speed = 69; if ((spear_loc.X + trajectory_loc.X < 800) && (spear_loc.Y + trajectory_loc.Y < trojan_loc.Y + 50)) { float ang = MathHelper.ToRadians(angle); float g = 9.81f; double x = ++trajectory_loc.X; float old_y = trajectory_loc.Y; trajectory_loc.Y = -(float)(x * Math.Tan(ang) - g * Math.Pow(x, 2.0) / (2 * Math.Pow(speed * Math.Cos(ang), 2.0))); spear_angle = 90 - (int)MathHelper.ToDegrees((float)Math.Atan(old_y - trajectory_loc.Y)); } else { fired = false; trajectory_loc.X = 0; trajectory_loc.Y = 0; spear_angle = 45; distance = (int)(rnd.NextDouble() * 300.0) + 300; speed = 0; scene_no = 16; }}

Add the following code in Update() function to make the Update_Scene_15() effective.

Case 15: Update_Scene_15(); break;

Add Scene 16Scene 16 is pretty the same as other narrative scenes.

Add the following code in Update() function.

case 16: Update_Scene_16(); break;

Then put the following code after Update_Scene_15() function.

void Update_Scene_16() { if ((timer % 300) == 0) { timer = 1; scene_no = 17;

} }

The following code is for Draw_Scene_16() which need to be put after the Draw_Scene_15() function.

void Draw_Scene_16() { spriteBatch.Begin(); spriteBatch.DrawString(sfArial24SpriteFont, "Ready?", new Vector2(330f, 250f), Color.DarkBlue); spriteBatch.End(); }

Then add the following code in Draw() function


Adding Math World Game SceneThe math world game scene is very similar to the scene 15.

Add the following code in Draw() function.


Then put the following code after the Draw_Scene_16() function.

void Draw_Scene_17(){ spriteBatch.Begin(); spriteBatch.DrawString(sfArial24SpriteFont, "No. of Hits: " + no_of_hits.ToString(), new Vector2(100f, 100f), Color.Red); spriteBatch.DrawString(sfArial24SpriteFont, "Distance: " + distance.ToString(), new Vector2(100f, 150f), Color.DarkBlue); spriteBatch.DrawString(sfArial14SpriteFont, "Speed:", speed_loc, Color.DarkBlue); spriteBatch.Draw(texMinusSprite, new Vector2(speed_loc.X + 80, speed_loc.Y), Color.White); spriteBatch.DrawString(sfArial14SpriteFont, speed.ToString(), new Vector2(speed_loc.X + 110, speed_loc.Y), Color.DarkBlue); spriteBatch.Draw(texPlusSprite, new Vector2(speed_loc.X + 150, speed_loc.Y), Color.White); spriteBatch.DrawString(sfArial14SpriteFont, "Angle:", angle_loc, Color.DarkBlue); spriteBatch.Draw(texMinusSprite, new Vector2(angle_loc.X + 80, angle_loc.Y), Color.White); spriteBatch.DrawString(sfArial14SpriteFont, angle.ToString(), new Vector2(angle_loc.X + 110, angle_loc.Y), Color.DarkBlue); spriteBatch.Draw(texPlusSprite, new Vector2(angle_loc.X + 150, angle_loc.Y), Color.White); spriteBatch.Draw(texFireSprite, fire_loc, Color.White); spriteBatch.Draw(texTrojanStandSmallSprite, trojan_loc, Color.White); spriteBatch.Draw(texSpearSprite, new Vector2(spear_loc.X + trajectory_loc.X, spear_loc.Y + trajectory_loc.Y), null, Color.White, MathHelper.ToRadians(spear_angle), new Vector2(texSpearSprite.Width / 2, texSpearSprite.Height / 2), 1.0f, SpriteEffects.None, 0f); spriteBatch.Draw(texTargetSprite, new Vector2(trojan_loc.X + distance, trojan_loc.Y + 50),

Color.White); spriteBatch.End();}

The Update_Scene_17() function is also similar to the Update_Scene_15() function since the ballistic trajectory calculation is the same. But the Update_Scene_17() function should include using mouse to change speed and angle of the spear with a fire button.

Add the following code in the Update() function.


Then put the following code after the Update_Scene_16() function.

void Update_Scene_17(){ MouseState ms = Mouse.GetState(); IsMouseVisible = true; if (ms.LeftButton == ButtonState.Pressed) { if ((ms.X >= speed_loc.X + 80) && (ms.X <= speed_loc.X + 80 + texMinusSprite.Width) && (ms.Y >= speed_loc.Y) && (ms.Y <= speed_loc.Y + texMinusSprite.Height)) { if (speed > 0) speed--; } else if ((ms.X >= speed_loc.X + 150) && (ms.X <= speed_loc.X + 150 + texPlusSprite.Width) && (ms.Y >= speed_loc.Y) && (ms.Y <= speed_loc.Y + texPlusSprite.Height)) { if (speed < 500) speed++; } else if ((ms.X >= angle_loc.X + 80) && (ms.X <= angle_loc.X + 80 + texMinusSprite.Width) && (ms.Y >= angle_loc.Y) && (ms.Y <= angle_loc.Y + texMinusSprite.Height)) { if (angle > -359) angle--; } else if ((ms.X >= angle_loc.X + 150) && (ms.X <= angle_loc.X + 150 + texPlusSprite.Width) && (ms.Y >= angle_loc.Y) && (ms.Y <= angle_loc.Y + texPlusSprite.Height)) { if (angle < 359) angle++; } else if ((ms.X >= fire_loc.X) && (ms.X <= fire_loc.X + texFireSprite.Width) && (ms.Y >= fire_loc.Y) && (ms.Y <= fire_loc.Y + texFireSprite.Height)) { if (!fired) fired = true; } }

if (fired) { if ((spear_loc.X + trajectory_loc.X < 800) && (spear_loc.Y + trajectory_loc.Y < trojan_loc.Y + 50)) { float ang = MathHelper.ToRadians(angle); float g = 9.81f; double x = ++trajectory_loc.X; float old_y = trajectory_loc.Y; trajectory_loc.Y = -(float)(x * Math.Tan(ang) - g * Math.Pow(x, 2.0) / (2 * Math.Pow(speed * Math.Cos(ang), 2.0))); spear_angle = 90 - (int)MathHelper.ToDegrees((float)Math.Atan(old_y – trajectory_loc.Y)); } else { if ((spear_loc.X + trajectory_loc.X >= trojan_loc.X + distance) && (spear_loc.X + trajectory_loc.X <= trojan_loc.X + distance + texTargetSprite.Width)) { distance = (int)(rnd.NextDouble() * 300.0) + 300; if (no_of_hits++ >= 2) { timer = 1; scene_no = 18; } } fired = false; trajectory_loc.X = 0; trajectory_loc.Y = 0; spear_angle = 45; } }}

Like we have done in the first scene in Digispired World, get a mouse status especially its location and check whether the clicked location is in one of the buttons. If it is change the speed or the angle value accordingly. When a use clicked on the fire button, set the variable fired to true. The change will initiate changing the location and angle of the spear accordingly, which is the same logic as in the scene 15. If it hits on the target, then use a random generator, rnd, and creates a new distance. Also, some values should be reset properly for the next round of throwing.


The above figure shows the scene 17.

Put the end of mini game sceneThe scene 18 is also similar to other narrative scenes.

Add the following code to the Update() function.


Then put the following code after the Update_Scene_17().

void Update_Scene_18() { if ((timer % 300) == 0) { timer = 1; scene_no = 1; } }

This is end of the Math World game, so change the scene_no to 1 to make the game back to the initial screen of the program.

Add the following code to the Draw() function.


Then put the following code after the Draw_Scene_17() function.

void Draw_Scene_18(){ spriteBatch.Begin(); spriteBatch.DrawString(sfArial24SpriteFont, "Thank you for playing", new Vector2(250f, 150f), Color.DarkBlue); spriteBatch.Draw(texTrojanHelmetSprite, new Vector2(300f, 250f), Color.White); spriteBatch.End();}

The following figure shows the scene 18.


complex project (math world) -...

Documents