The Temperature Converter

CSCE 101 Lab 10 Cocky Football

Academic Honesty  The work you turn in is to be your work, not copied from someone else, from the web, or gene rated by a program.  Never allow anyone access to your files.  Never give anyone your password.  Never share your USB memory or email your files to anyone else.  Never give anyone a printed copy of your file or an electronic copy.  Never allow anyone to copy your work.

Problem Statement In this lab you will be creating an app with a start screen and three other screens, the first of which will contain the Space Invaders game (as you ought to have completed in the pre-lab). The second and third screens will correspond to the Cocky Football game, with the second being the screen which contains the game, and the third being the “Game Over” screen

Part 1: Cocky Football This part is not required to be completed during your lab time. You will not have to take and submit any screenshots for this lab. The completed Lab 9 will be due on the date posted on your lab instructor’s webpage.

1. This lab will build on the project you should already have created by completing the Lab 10 Pre- Lab. Make sure you have opened your Lab10_XY project in App Inventor. 2. Add two additional screens to your project. Name the screens CockyFootball and GameOver. Your project should now contain the following 4 screens:  Screen1  SpaceInvaders (or something similar)  CockyFootball  GameOver 3. Download the following assets for this lab:  https://drive.google.com/file/d/0Bx7jqgf_HyMlLUZ3eG8wLWY5Rzg/view?usp=sharing  https://drive.google.com/file/d/0Bx7jqgf_HyMlelZLVjRlMjNTdUE/view?usp=sharing  https://drive.google.com/file/d/0Bx7jqgf_HyMlbVo0REl3Um8zT3M/view?usp=sharing  https://drive.google.com/file/d/0Bx7jqgf_HyMlWGFoMzUyVUl1Ykk/view?usp=sharing  https://drive.google.com/file/d/0Bx7jqgf_HyMleURjeXBfU0VsU1k/view?usp=sharing  https://drive.google.com/file/d/0Bx7jqgf_HyMlNzJmeDFMZ2VZUlU/view?usp=sharing  https://drive.google.com/file/d/0Bx7jqgf_HyMlSzFzeVFsNC0xQU0/view?usp=sharing The Layout: 1. Ensure you are in Screen1. 2. Add a button below the button which navigates your app to the Space Invaders game. This button will allow the user to navigate to the Cocky Football game you’re about to create. 3. Change the text of the button you’ve added so it is clear to the user what the purpose of the button is. 4. Switch to the CockyFootball screen. Feel free to reference the screenshot on page 5. 5. In this screen, you will need the following items:  A Canvas, with the following property specifications: i. The width set to Fill Parent, ii. The height set to 300 pixels, iii. The background image set to fieldTexture.png (found in the list of images you downloaded above).  4 Image Sprites, with width set to 50 pixels and height set to 30 pixels. i. One image sprite should have its Picture property set to playerTexture.png and have its Y property set to 265. Name this image sprite “PlayerSprite”. ii. Two image sprites should have their Picture properties set to opponentTexture.png and their Y set to 175 and 100. Name these image sprites “Opponent1Sprite” and “Opponent2Sprite”. iii. The last image sprite should have its Picture property set to playerTexture.png and have its Y set to 10. Name this image sprite “ReceiverSprite”.  Another Image Sprite, named “BallSprite”, with the following property specifications: i. The Picture set to footballTexture.png, ii. The width set to 12 pixels, iii. The height set to 20 pixels, iv. Rotates unchecked, v. Enabled unchecked.  Two Clock components, one named “MovePlayerClock” and one named “GameClock”.  A Horizontal Arrangement below the Canvas.  4 Labels inside the Horizontal Arrangement, with the following specifications: i. The first one should have its Text property set to “USC:” and should be named “USCLabel”, ii. The second one should have its Text property set to (the number) “0” and should be named “USCScore”, iii. The third one should have its Text property set to “CLEM:” and should be named “ClemLabel”, and iv. The final one should have its Text property set to (the number) “0” and should be named “ClemScore”.  A Label below the Horizontal Arrangement, named “TimeLeft” and with its Text property set to “00:00”.  A Horizontal Arrangement below the TimeLeft Label.  2 buttons inside the Horizontal Arrangement, with their Text properties set to “Reset” and “Main Menu”. The Coding: 1. Make sure to start the emulator so you’re able to test the code you add to your project! 2. Switch back to Screen1. 3. Program the button you added in the Layout section to be able to open the CockyFootball screen. 4. Switch to the CockyFootball screen. 5. Much of the basic mechanics of the code for Cocky Football will be stolen from the Space Invaders tutorial, so you are expected to know how that code works. If you need a reminder of how to do something, refer back to the prelab.  You are also encouraged to use the backpack built into the Blocks section of App Inventor to be able to transfer large portions of Space Invaders code to the CockyFootball screen. 6. Initialize a global list called “players”. 7. Add a “when CockyFootball.Initialize” block similar to the “when SpaceInvaders.Initialize” block. Within this event-handler, you will  Set the BallSprite’s Visible property to false, just as in SpaceInvaders.  Set the global players list to be the full components of Opponent1Sprite, Opponent2Sprite, and ReceiverSprite. 8. In order to control the PlayerSprite, recreate the code that we used for the rocket in Space Invaders. Use PlayerSprite.Dragged and PlayerSprite.Touched events. (Reminder: You can drag portions of code to the backpack in your SpaceInvaders screen, then open the backpack again in CockyFootball and drag out the code you’ve saved.) 9. In the “when PlayerSprite.Touched” event-handler, we want the BallSprite to become visible, enabled, have a speed of 20, and a heading of 90. In order to move it to a spot just above the player, reference the rocket sprite code in Space Invaders. 10. Recreate the “when Bullet.EdgeReached” code for your BallSprite. Also make sure you disable the bullet within this event-handler. 11. In Space Invaders, if the Bullet collided with anything, it was regarded as a point. In Cocky Football, there are 3 different possible items that the BallSprite could collide with: the receiver, the close opponent, and the far opponent. We want a different reaction for each one. (Hint: use the other variable associated with the BallSprite.CollidedWith event-handler.)  If the item hit is the ReceiverSprite, then we want to increase USC’s score by 7 points.  If the item hit is the close opponent, we want to increase Clemson’s score by 7 points.  If the item hit is the far opponent, we want to increase Clemson’s score by 3 points.  Regardless of which item is hit, the BallSprite must go invisible and disabled. 12. In order to move the list of non-player sprites (Opponent1Sprite, Opponent3Sprite, and ReceiverSprite) randomly across the canvas, we will combine the “random item from a list” block with the Any component blocks and a local variable.  We want to be able to have these sprites move each time the MovePlayerClock fires, so grab the appropriate block for this event.  Inside the event-handler, use an “initialize local name to” block (found in Built-in -> Variables) and use “pick a random item list” along with a getter for your global players list in the “to “ portion of the local variable initialization. i. This sets a local variable to correspond to a random sprite component found in your global players list.  In the “in” portion of the local variable initialization, use a “set ImageSprite.X” block (found in Any component -> Any ImageSprite) to move the randomly selected image sprite randomly about its x-axis. i. The component for which you are trying to change the X property is the component you’ve initialized as your local variable (likely, this variable is still called “name”). ii. The “to” portion of this Any component setter block should follow the pattern seen in similar blocks in the Space Invaders tutorial. E.g., reference the code in the “when Clock1.Timer” event-handler.  Below the local variable initialization block, add a block which will change the MovePlayerClock.TimerInterval to a random integer between 750 and 1500. 13. We want the GameClock to count down from two minutes, so use the following blocks to accomplish this. Additionally, we want to check if our clock has gone below zero, and if it has, then we need to open the GameOver screen and store the value of the difference between the scores as the startValue of that screen.

14. Program the Reset button to do what it’s supposed to. Make sure to catch all the labels and variables involved. 15. Program the Main Menu button to take you back to Screen1. Part 2: Game Over 1. You will now complete your Cocky Football game by preparing the user interface and code for the Game Over screen.

The Layout, continued: 1. Switch to the GameOver screen, Designer view. 2. Upload two more images from the files you downloaded in Part 1 of this lab. The two images are winner.png and lost.png. 3. Add a Canvas and set its background image property to gameOverTexture.png and set its height and width properties to 300 pixels each. 4. Add an Image Sprite to the Canvas and set its width to 100 pixels and its height to 50 pixels. Position this sprite at (100, 180). 5. Add a button to return to the main menu (Screen1).

The Coding, continued:

1. Switch to Blocks view. 2. As soon as the screen initializes, we want the sprite to take on one of two possible images. The images will be either winner.png or lost.png. 3. Use the “get start value” block located under Built-in -> Control within the screen initialization event-handler to set the appropriate image for the image sprite. (Think! What should the start value—passed in from the CockyFootball screen—be if you’ve won? What should it be if you’ve lost?) 4. Test your code! Ask your instructor if you get errors or if the output is incorrect.

Submitting Your Code (Generic Instructions) 1. Open "My Projects" in upper right of the App Inventor Webpage

2. Put a check next to the project you want to download (you can only download one at a time). Download the modified version, if you have multiple copies.

3. Project->"Export selected project (.aia) to my computer"

4. The file will download so go, in Chrome, to the download location by clicking the arrow next to the file name at the bottom of the screen and selecting "Show in folder".

5. Move the ______.aia file to your X:\101Labs directory for grading.