Assignment 4: Frogger Solution

Notes:

    • Name your sketch using your name and the assignment number, exactly as in this example:

LastnameFirstnameA4.

    • There is only one question in this assignment, but it is broken into 6 phases. Hand in a working program for the last phase you were able to complete. For example, if you finish phase 4, but phase 5 is not working, do not hand in phase 5. If it doesn't work you may not get all of the marks for phases 1-4.

    • Hand in one pde file only. Do not hand in any other types of files.
    • Your mark will largely depend on how many phases you were able to complete.

    • Please indicate clearly in the comments the highest phase you were able to complete.
    • Assignments must follow the programming standards document published on the course website on UMLearn.

    • After the due date and time assignments may be submitted but will lose 2% of marks per hour late or portion thereof.
    • You may submit the assignment multiple times, but only the most recent version will be marked.

    • These assignments are your chance to learn the material for the exams. Code your assignments independently. We use software to compare all submitted assignments to each other, and pursue academic dishonestly vigorously.



Q1: Frogger

Background:

Frogger was a classic video game (https://en.wikipedia.org/wiki/Frogger). In this assignment you will create a simple game roughly based on Frogger. The idea of the game is to move your "frog" (a green circle) from the bottom of the canvas to the top of the canvas, without being hit by any of the moving hazards in the middle. The frog moves in large jumps, not smoothly.














When the game starts, at Level 1, there should be 3 lines of moving hazards, as shown above. If the frog reaches the top, then the game should move to the next level, add one more line of hazards, and start the frog at the bottom again. So there will be 4 lines of hazards at Level 2, 5 at Level 3, and in general (n+2) at Level n.





1
ASSIGNMENT 4: Frogger

DEPARTMENT AND COURSE NUMBER: COMP 1010


Phase 1: World and Frog

Use a fairly large window. Your program should work with any size window. If you replace the size(w,h) command with the fullScreen() command, your canvas will be the full size of your computer screen. Try it. Your program should work at that size, too.

Write a function void drawWorld() to draw the basic world. Use a global integer variable level to control the game. For now this will always be 1. It will not change until you implement Phase 5. Divide the canvas into level+4 equally sized horizontal bands. The top band and bottom band should be a different colour than the level+2 middle bands, as shown. Use any colours you like, as long as they are contrasting. The height of these bands will be a very important number in the program, and you should store it in a global variable bandHeight.











Write a function void drawFrog(float x, float y, float diam) which will draw a "frog" centred at coordinate (x,y) with the given diameter. You can use a simple green circle, as shown. If you like, use some other shape, or draw a fancier frog.

Write a function void moveFrog(float xChange, float yChange) which will move the frog the given amount in the x and y directions. (It will change the global state variables that keep track of the frog's position.)

Write the special void keyPressed() function to make the frog jump up, down, left, or right using the WASD and IJKL keys on the keyboard. In this program, movement is not continuous. The frog should make one jump each time a key is pressed. The keyPressed() function will be automatically called once each time a key is pressed, and you can use the variable key to tell which key it was. The frog should jump up/left/down/right if either the WASD or IJKL keys are pressed. Also allow for uppercase or lowercase characters to be used (just in case Caps Lock is on).

Complete the program so that the frog jumps around the canvas. The frog should begin in the exact centre of the bottom band. The size of the frog should be controlled by bandHeight. Later in the game, at higher levels, the bands will be smaller, and the frog must be smaller, too. In this Phase, it doesn't matter if the frog jumps out of the canvas. The size of the jump (in any direction) must be bandHeight pixels so the frog always makes one jump per band if it is moving up or down.

Phase 2: Keep the Frog in the canvas

Write a function boolean objectInCanvas(float x, float y, float diam) which will determine whether or not a circle with the given centre and diameter will be within the canvas or not, in whole or in part. It should return true if any part of the object would be inside the canvas, and false if the object would be completely outside the canvas.

Modify your moveFrog function so that it will not allow the frog to jump completely outside the canvas. You must use your objectInCanvas function to check.

2
ASSIGNMENT 4: Frogger

DEPARTMENT AND COURSE NUMBER: COMP 1010




Phase 3: Draw the hazards

Write a function void drawHazard(int type, float x, float y, float size) which will draw one hazard with its centre at the given (x,y) position and with the given size. You should have several different types of hazards, controlled by the type parameter. In the sample screenshot below, red circles are drawn for type=0, black squares for type=1, and white circles for type=2. You can use any shapes or colours that you like for your hazards, or draw fancier objects. You must have at least 3 different types, but you can have more if you like. The size of a circular hazard is its diameter, and the size of a square hazard is the length of its sides.












Write a function void drawHazards() which will use nested loops to draw level+2 lines of hazards in the middle portion of the canvas, with multiple equally-spaced hazards in each line. The sizes of the hazards must depend on bandHeight and no object should ever be taller than bandHeight. Each line should have a different type of hazard than the one below it. Use your types in a repeating pattern (if there are 3 types, use type 0 for bottom line, type 1 for the next one, type 2 for the next one, then back to type 0 again for the next one, etc.) The first hazard in each line should be centred at x=0, as shown above. In the lowest line (the red circles), the hazards should always be spaced bandHeight*3 pixels apart. (This will allow enough space – barely – for the frog to make a horizontal jump between two hazards.) The next higher row should have hazards spaced bandHeight*4 pixels apart, then bandHeight*5 in the row above that, and so on for further levels. In each line, draw as many hazards as will fit in the canvas, even if they're only partially visible.

Phase 4: Moving hazards

Modify drawHazards(), and add a new variable, to make the hazards move. The lowest line should move to the right, and every other line should move in the opposite direction to the line below it. To control the positions of the hazards, use a global offset variable that slowly changes from 0 to bandHeight, and then repeats. (The variable bandHeight is used because it controls the spacing of everything, and the sizes of the jumps, both horizontally and vertically.) (Remember that the % operation works just as well on float values as it does on int values.) Use a global constant to change offset by a very small amount every frame: try a value of 0.75 pixels/frame.

Use a multiple of offset to shift the hazards left or right. Because the spacing of the hazards is different in each line, you will have to multiply offset by the same amounts that you used to get the spacing of the hazards (change the x coordinates by 3*offset in the bottom line, 4*offset in the next line, 5*offset in the line above that, etc.). This will make the higher lines of hazards move faster. Make sure that hazards appear and disappear properly at the edges. To do this, you may have to draw extra ones on the left or right side that may not even be visible. That's OK.

3
ASSIGNMENT 4: Frogger

DEPARTMENT AND COURSE NUMBER: COMP 1010



Phase 5: Add levels

Write a function void displayMessage(String m) which will draw the String m in the top band of the window, as shown below. The size of the text in the message will need to depend on bandHeight to make sure that it always fits. Write the message in the horizontal centre of the canvas, as shown.












Write a function boolean detectWin() which will return true when the frog reaches the top band on the screen (where the message is).

Using these functions, draw a message indicating the level at the top of the canvas. When the frog reaches the top band, increase the level by 1, change the message, and start the new level with the frog in the centre of the bottom band again. There should now be one more line of hazards. Since the frog cannot yet be killed by the hazards, it will be easy to test your program to make sure that high levels will work properly. Everything should get smaller, including the bands, the frog, the hazards, and the message.

Phase 6: Dangerous hazards

Now it's time to make life difficult for the frog, and make it possible to end the game.

Write a function boolean objectsOverlap(float x1, float y1, float x2, float y2, float size1, float size2) which will return true if an object with its centre at (x1,y1) , and diameter size1, would overlap with another object at (x2,y2) with diameter size2. You can just assume that the objects are squares, or occupy a square area of the screen. They may really be circles or more complex shapes, but video games usually treat everything as if it was a square, since it simplifies the calculations.

Modify your drawHazard method to return a boolean result. It should return true if it drew a hazard that overlapped with the frog. Use the objectsOverlap function to detect when this happens. Modify your drawHazards method to also return a boolean result. It should return true if any hazard overlapped with the frog.

Modify your game so that if any hazard overlaps with the frog, then the game ends. It should change the message at the top of the canvas to indicate that the game is over. When the game ends, all movement should stop. (The frog should no longer be able to move, and the hazards should stop moving.) You should be able to see the overlap between the frog and one of the hazards. Test it by letting a hazard in each line touch the frog. The game should end as soon as a hazard touches the frog.

Happy hopping!


4