CP469/669- iPhone Application Programming

For this assignment, we will implement the simplest version of the classic arcade game Frogger. A video demo of the app can be viewed in YouTube. Your app’s functionality should match the video. A detailed description is provided below.

The game starts by presenting a menu scene that has three buttons for Play (the game), Play Music (play background music) and Stop Music.


The menu scene

The Play button

Pressing on the Play button will present the game scene.

• At the bottom of the scene, there are four buttons for moving the frog up, down, left, and right. Tapping on the a button moves the frog a few pixels in the intended direction (you may decide on the distance of the move as you see fit). The frog cannot move beyond the left or right edges of the screen. The frog cannot move into the area of the four button.

The game scene
• The frog is placed in a sidewalk (color brown in the figure above). The frog needs to cross the street to reach the other side walk.
• The street has four lanes: 0, 1, 2, 3. In the even lanes the cars travel from right to left. In the odd lanes, the cars travel from left to right.
• The cars appear at some interval, say 1 second, randomly in the lanes, and then do their travelling. You may decide on the length of the interval.
• When the frog reaches the other side walk, the Win Scene is displayed for three seconds, then the Menu Scene is displayed

• If a car hits the frog, the Lose Scene is displayed for three seconds, then the Menu Scene is displayed.

Win Scene


The lose scene is presented for 3 seconds

The Play Music Button

Pressing on this button will play a background music in a continuous loop

The Stop Music Button

Pressing on this button will stop the background music.

Sound requirements

• When a car hits the frog, a distinct sound should be played, a distinct image (dead frog) should replace the frog’s image. 
• When a car appears, a distinct sound be played
• When the frog moves, a distinct sound should be played

Where to get the sounds

There many websites with royalty-free sounds, some are listed below
https://www.dl-sounds.com/royalty-free/category/game-film/video-game/
https://www.freesoundeffects.com/free-sounds/cars-10069/
http://soundbible.com/tags-frog.html

Where to get the images

Google Images is the best way to get images.

Testing

You app will be tested on iPhones of different sizes. The UI elements should look good for all sizes. Only the portrait orientation will be tested.

Hints

The sample app SK_CollisionDetection-Button-2020 posted in MLS shows how to
• make a button
• detect touches
• detect collision
• transition to new scene
• play a sound (not background sound)
BackGround Music: to play background music, you will probably have to make a
unique instance of the class AVAudioPlayer (you know how to make a singleton class,
right?) Then, you can play the background music as follows (contentsOfURL gives
the path to the sound file).
let url = Bundle.main.url(
forResource:, withExtension: nil)
do {
try backgroundMusicPlayer = AVAudioPlayer(contentsOf: url!)
} catch {
print("Could not create audio player")
}
backgroundMusicPlayer!.numberOfLoops = -1
backgroundMusicPlayer!.prepareToPlay()
if shouldPlay {
backgroundMusicPlayer!.play()
}
From the code above, you can figure out how to stop the background music. For my app, I made a singleton class for the music player.

Other requirements:

• Make the cars move slowly enough that the player can choose to win or lose as he/she desires (and such that your instructor can test your app). You should set some global constants to control the movement speed of the sprites so that to test your app, you can increase or decrease the speeds easily.  For example, you can define: “let car_speed = 5”. This is the medium speed for the cars to move. Then to slow down the cars’ speed, you can change the constant to “let car_speed = 10”. In this way, I can decide when to win or to lose when I test your app.

• Do not hard wire a constant into the code, such as

leftButton!.position = CGPoint(x: 0.0 , y: 20.0);

The positions of the sprites should be relative to the size (height and width) of the view. For our app, the height is probably not very relevant.

One way to do this is to make the width of each button to be 1/4 of the width of the view:

let screenWidth = self.frame.width
let buttonWidth = screenWidth / 4.0
Another way is to use the sScale property. You can compute the value for the xScale property of the buttons.
windowHeight = self.frame.height
windowWidth = self.frame.width

theXScale = windowWidth / (noButtons * buttonWidth)// buttonWidth is the width of your noButtons buttons, assuming they have the same width

With theXScale, you can scale (spread) the four buttons so they cover the whole width of the view. You do that by setting the xScale and yScale of the buttons (and sprites in general).

2020-03-07