The Open Clip Art Library (http://openclipart.org/) offers an archive of free clip art for any use. There are nearly 10,000 public domain clip art files available on this Web site. There are many ways you can look for the right piece of clip art; for example, you can browse the clip art by tag, by date, or by artist. You can, of course, search the clip art, and there is an advanced search option. There is even a "request a clip art" option that you can use to look for a specific piece of clip art. You can download an archive of many of the library's clip art as a large zip file.

Depending on your game's goals, you may be able to find many of the graphics you need on this single site. Some of the library's most popular categories are animals, cartoons, people, plants, and icons. Sometimes a little creativity will take you a long way. Instead of coming up with the perfect game idea and then trying to find the perfect clip art, consider finding some clip art you really like and then coming up with the perfect game in which to use it. This kind of brainstorming can really open up some new opportunities.

The clip art you see in Figures 5.1 and 5.2 is from an RPG Map collection, which includes over 50 drawings created by Nicu Buculei. We really like the look and feel of all the items in the collection. We also like the fact that you get both a colored version of the buildings and a non-colored blueprint version of the buildings. These would be perfect to create many different games.

Figure 5.1. Fantasy RPG buildings, blueprint style

Figure 5.2. Fantasy RPG buildings, standard style

Real-time strategy game

Real-time strategy games have become extremely popular, and it is reasonable to expect that this type of game would do very well on the App Store. Real-time strategy games are very complex and would likely prove challenging for a single developer to accomplish in a short period of time. But having a good library of appropriate graphics could go a long way toward making this possible.

Here's another idea for a creating one possible version of a real-time strategy game and how it might work on the iPhone. The player sees an open area in the center of the screen that is surrounded by a black fog all the way around the edge of the screen. This fog prevents a player from seeing any area that has not been explored. This matches real life, because until you explore an area you do not know what it contains. This area is just a small part of the entire area that the player can explore.

The game world could be much taller and wider than what the player sees. In the top-right corner of the screen there is a mini-map that shows the player the entire playing area. At the bottom of the screen there are command and production controls that the player can use to create new units and buildings. Take a look at Figure 5.4 to see a prototype of this user interface.

Figure 5.3. Fantasy memory mock-up

Figure 5.4. Fantasy real-time strategy mock-up

Tip

Always do a quick prototype of the application user interface, even if it's on the back of a napkin. This helps to weed out bad ideas early in the design process.

The player is in control of a new village of either humans or possibly elves. But the player is not alone in this world. The land is also occupied by tribes of terrible trolls, or possibly some ornery orcs. Either way, the only thing the other occupants of this land want more than to see the humans leave their land is to have them for dinner. The player's goal is to help his people first survive, and then to thrive in their new homeland. To do this he will need to take steps to defend the human's land, explore surrounding lands, and eventually attack enemies and remove their threat to his people once and for all.

We will continue to use the Utility Application template for this application. We will use the Main View for the main game screen, and we will use the information screen for an About Us screen (see Figure 5.6).

Figure 5.5. AmuckRacer prototype

Figure 5.6. The About Us info screen

This About Us screen follows the pattern of previous info screens. Feel free to modify this screen to suit your purposes. We will use this info screen to do the following:

Let's write some code. Launch Xcode and choose File

Figure 5.7. Creating a new utility application

Click the Choose button to create a new utility application. You will want to save the new project to a location on your machine that you will remember. We recommend setting aside a special folder for all of your iPhone applications and giving it a straightforward name such as Apps, Projects, or Code. Once you have picked out your destination folder, save the new project with the name AmuckRacer.

You will now see the Xcode Project Explorer (Figure 5.8). On the left you will see a Groups & Files listing, to the right near the top you will see a file details listing, and to the left near the bottom you will see an editor window. You should first import any graphics that will be needed to create AmuckRacer.

In the Groups & Files listing, click the folder named Resources to expand it. Right-click on the Resources folder and choose Add

Figure 5.8. Xcode Project Explorer

You should now see a small dialog box with options for how to add the selected files to your project (see Figure 5.9). Be sure to click in the top check box labeled Copy items into destination group's folder (if needed) to copy the images to your project's location instead of just making a link to the file. This way if you copy the folder containing the project you will have all the related resource files as well. Choose Default for the Reference Type and Unicode (UTF-8) for the Text Encoding. Below this you should see two options, with Recursively create groups for any added folders selected. Finally, under Add To Targets, you should see the AmuckRacer project listed and selected.

Now that you have the required image files imported into the AmuckRacer project, you can begin laying out the images on the screens. You should still have the Resources folder open in Xcode. Double-click on the MainView.xib file to open this file in Interface Builder. It is here that you will design the AmuckRacer's user interface.

Figure 5.9. Add existing files dialog box

Start by choosing Tools

To do this you need to assign the AmuckRacerBackground.png to your first Image View. Click on the original Image View to select it. From Xcode's Tools menu, choose Inspector. Be sure to select the left-most toolbar item named Image View Attributes. The AmuckRacerBackground.png is 320 pixels wide by 480 pixels tall, which matches the iPhone's screen size. Set the Image combo box to AmuckRacerBackground.png.

Figure 5.10. Adding the road's Image View to AmuckRacer

Next, you will assign the car.png to the second Image View. Click on the second smaller Image View that is located near the bottom of the screen in the center. From Xcode's Tools menu, choose Inspector. On the Image View Attributes toolbar tab, set the Image field to car.png. From the Inspector's Image View Size tab, resize the car's Image View to 48 pixels by 102 pixels. The W field is for width; set this to 48. The H field is for height; set this to 102. You'll probably have to reposition the car's Image View after making these changes. This time you can decide where to place the car; just be sure to have it on the road. If you run the code in Xcode now, you should see something like Figure 5.12.

Figure 5.11. Adding the car's Image View to AmuckRacer

You will now use Interface Builder to wire up the user interface. Drag the road image over a little to the left so you can see the Main View's gray background. Click the Main View's background. Then choose Tools

Right-click on the car image and drag the small circle to the right of the New Referencing Outlet label and release it above the Main View's gray background. You should see a list with the car and road class outlets you created previously; be sure to choose the car option. Now do the same for the road image, and assign it to the road option.

Figure 5.12. The AmuckRacer car on the road

You can now take advantage of Interface Builder's Write Class Files feature. To do this, first move the road image back to where it fills the entire screen. Make sure the Main View window now has the focus by clicking the title bar at the top of the window. Go to the Interface Builder's File menu and choose Write Class Files. You should see a dialog box that states that MainView.m and MainView.h already exist. You are asked whether you want to replace these files. Click Merge to combine the newly generated code for the car and road Image Views with the preexisting code for the Main View form. Click Save to save your changes and then click Close to exit Interface Builder.

You probably noticed that the iPhone Status Bar is still at the top of the screen. While this will not hurt the functionality of the application, many players find this unrelated user interface distracting. For a game to be truly immersive, players must be able to suspend their disbelief. Some will find this difficult if they are being reminded of remaining battery life, current time, and signal strength changes. By removing the iPhone Status Bar you can give the player a full-screen experience without any nongame distractions.

To remove the Status Bar from the top of the screen, you need to add one line of code:

-(void)awakeFromNib {

   [[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];
}

This line of code needs to be added to the MainView.m file, which is located in Xcode's Groups & Files. Choose AmuckRacer

#import "MainView.h"
@implementation MainView
-(void)awakeFromNib {

   [[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];

}

- (id)initWithFrame:(CGRect)frame {
   if (self = [super initWithFrame:frame]) {
      // Initialization code
   }
   return self;
}
(void)drawRect:(CGRect)rect {
   // Drawing code
}
- (void)dealloc {
   [super dealloc];
}
@end

Action games and collision detection go hand-in-hand. It is the rare action game that does not need some form of collision detection, and AmuckRacer is no exception. Collision detection is how games are able to tell when one game sprite makes contact with another game sprite. Many famous action games, from Asteroids to Pac-Man, use this concept.

You will need to add collision detection to AmuckRacer for several important pieces of game functionality:

One of the most basic game patterns is the concept of the game loop. At its simplest, there is a loop that calls an update method and then a draw method until the game ends. Figure 5.13 shows a basic game loop. A more advanced game loop might do much more and look something like the following code:

while( playerHasntExit )
   {
      checkForUserInput();
      runAI();
      moveEnemies();
      resolveCollisions();
      drawGraphics();
      playSounds();
   }

Figure 5.13. A basic game loop

There are two ways you can create a game loop inside your application. The first is to use a looping command like the while keyword used in previous code selection. The other is to create a timer that calls your game methods repeatedly. For this example you will use the timer to create your game loop.

Update your awakeFromNib method so that it matches the following code:

-(void)awakeFromNib {

   [[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];
   // start a timer that will fire every second
   [NSTimer scheduledTimerWithTimeInterval:(1.0) target:self selector:@selector(onTimer) userInfo:nil repeats:YES];
}

Now add the following onTimer method right below the awakeFromNib method. We will update this method as we progress through the creation of AmuckRacer:

- (void)onTimer {
}

You'll notice when you are working with Xcode that it always creates a pair of files for you to write code in. The first is an h file, which is a header file; and the second is the m file, which is the main file. By default, Xcode expects you to implement your code as an interface. This means you will list your methods inside your header file as a contract, and then you will implement your methods fully in your main file. Let's update our header file to list our new functions so Xcode will be able to understand our class:

#import <UIKit/UIKit.h>
@interface MainView : UIView {
    IBOutlet UIImageView *car;
    IBOutlet UIImageView *road;
}
- (void)onTimer;
@end

You use NSTimer objects to create timers in Xcode. In this case we are using the scheduledTimerWithTimeInterval to specify we want the timer to call the onTimer method every 1 second. This will give us an effective frame rate of about one frame per second. That's not very fast by today's gaming standards, but don't worry, we'll decrease our time interval as we move forward.

Note that you cannot simply change the time interval from 1.0 to 0.001 to get 1,000 frames per second unless the hardware is fast enough to allow it. If the hardware is not fast enough to perform 1,000 frames per second, it will either drop requests or potentially cause the system to become unresponsive and possibly unstable. Think about how elevators work. More people pressing the same call elevator button does not necessarily make the elevator come more quickly. The elevator has a hardware-limited maximum speed, and so does the iPhone.

Something else you should be aware of is that all devices are not created equal. The iPhone Simulator on your computer is likely to have access to more powerful hardware overall than an actual iPhone device. This is why it is important to performance test with an actual iPhone device. It's fine to do most of your development on the iPhone Simulator, just be sure to do periodic testing on a real device to ensure both performance and quality. Since the iPhone Simulator is not a true emulator, it is possible to have bugs on a real device that you do not see on the Simulator. Also, be aware that newer devices like the iPhone 3GS can be significantly faster than earlier devices.

You should now update your onTimer method to include calls to new update and draw methods that you will add next. Update your MainView.m file to match Listing 5.2.

#import "MainView.h"
@implementation MainView
-(void)awakeFromNib {

   [[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];

   // start a timer that will fire every second
   [NSTimer scheduledTimerWithTimeInterval:(1.0) target:self selector:@selector(onTimer) userInfo:nil repeats:YES];
}
- (void)onTimer {
   update();
   draw();
}
- (void)update {


}
- (void)draw {


}
- (id)initWithFrame:(CGRect)frame {
   if (self = [super initWithFrame:frame]) {
      // Initialization code
   }
   return self;
}

- (void)drawRect:(CGRect)rect {
   // Drawing code
}

- (void)dealloc {
    [super dealloc];
}

@end

In the update method you will add an updateRoad method. While breaking each part out like this does make the code a little wordier, by keeping things separated we increase organization and decrease complexity, which is basically a win-win situation. Modify your MainView.m to include and call the updateRoad method. When you are done, your update method and updateRoad method should look like the following code listing:

- (void)update {
   updateRoad();
}
- (void)updateRoad {

}

You will also need to update your MainView.h header file so Xcode will be able to match your class interface. Make sure your header file matches the following code listing:

#import <UIKit/UIKit.h>
@interface MainView : UIView {
    IBOutlet UIImageView *car;
    IBOutlet UIImageView *road;
}
- (void)onTimer;
- (void)update;
- (void)updateRoad;
- (void)randomRoadUpdate;
- (void)draw;
@end

We now have the basic scaffolding in place for the application. The code you are going to add now will be the real muscles of the program. This code will move the road image to the left and to the right to create a more realistic winding road effect. There are a lot of ways this effect could work, but let's consider two:

This first pattern could be the random road update pattern. The second pattern could go by the more exciting name of the sidewinder road update pattern. We will cover how to create both of these road update effects and then you can decide which to use in your version of AmuckRacer.

Consider the following method:

- (void)randomRoadUpdate {
   CGPoint oldPosition = road.center;
   road.center = CGPointMake(oldPosition.x, oldPosition.y + 10);
}

The first thing this code does is save the road's center position to a variable named oldPosition. Then it creates a new center position that is 10 pixels further down from the old position. The first line inside the method creates a variable of type CGPoint named oldPosition. A CGPoint object is a structure that contains a point in a two-dimensional coordinate system. It has two fields: One is named x and holds the x-coordinate of the point, and the other is named y and holds the y-coordinate of the point.

Add this method to your version of your AmuckRacer's MainView.m file under the existing updateRoad method. Be sure to update your MainView.h file as well. You will also need to update your updateRoad method to call the new randomRoadUpdate function. You can do this by adding the following line of code to the updateRoad method:

[self randomRoadUpdate];

When you are done making all of these changes, your MainView.m file should match Listing 5.3.

#import "MainView.h"
@implementation MainView
-(void)awakeFromNib {
   [[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];
   // start a timer that will fire every second
   [NSTimer scheduledTimerWithTimeInterval:(1.0) target:self selector:@selector(onTimer) userInfo:nil repeats:YES];
}
- (void)onTimer {
   [self update];
}
- (void)update {
   [self updateRoad];
}
- (void)updateRoad {
   [self randomRoadUpdate];
}
- (void)randomRoadUpdate {
   CGPoint oldPosition = road.center;
   road.center = CGPointMake(oldPosition.x, oldPosition.y + 10);
}
- (void)draw {

}
- (id)initWithFrame:(CGRect)frame {

   if (self = [super initWithFrame:frame]) {
      // Initialization code
   }
   return self;
}

- (void)drawRect:(CGRect)rect {
   // Drawing code
}

- (void)dealloc {
   [super dealloc];
}

@end

Now save and run your changes by clicking the Build and Go button in Xcode. You should see the road image moving down the screen by 10 pixels every second—very nice! You are on your way to creating your first iPhone action game. Instead of moving the road down 10 pixels every second, try moving the road down a pixel every tenth of a second. To do this, you will need to first update the NSTimer code to fire 10 times a second by making the following change:

// start a timer that will fire every tenth of a second
[NSTimer scheduledTimerWithTimeInterval:(0.1) target:self
   selector:@selector(onTimer) userInfo:nil repeats:YES];

Next, update the randomRoadUpdate function to only move 1 pixel instead of 10 by making the following modification:

- (void)randomRoadUpdate {
   CGPoint oldPosition = road.center;
   road.center = CGPointMake(oldPosition.x, oldPosition.y + 1);
}

Save and run your update code. You should experience a much smoother animation now. Feel free to modify the code yourself and experiment with different settings to see what outcome they produce. There is more than one way to do just about anything. If you are always looking for a better way to do something, you will learn so much more and your programs will be all the better for it. Not to mention, it's fun to play the role of the mad scientist and see what happens!

int randomNumber = random() % 10;

int distance = (random() % 11) - 5;

- (void)randomRoadUpdate {
   int distance = (random() % 11) - 5;
   CGPoint oldPosition = road.center;
   road.center = CGPointMake(oldPosition.x + distance, oldPosition.y);
}

Tiling an image

The iPhone SDK has a great method called CGContextDrawTiledImage that will tile an image for you. Its job is to repeatedly draw an image, scaled to the provided rectangle, to fill the current clip region. The CGContextDrawTiledImage method does all the heavy lifting, but it does expect a few parameters from you:

• Context. The graphics context in which to draw the image. Basically this is any object that knows how to display an image.

• Rect. A rectangle that specifies the tile size and offset. You can increase or decrease the image size.

• Image. The image to draw.

You already know the image you want to display. It is the road.png file. And you already know the size you want to display this image. You want it to match the iPhone screen size of 320 pixels wide by 480 pixels high. You want to use the Main View's background to show the road image so you know what the context is.

One thing you may not know is what the offset values are for. They allow you to start reading the image from a location other than the top-left corner. For example, by default Quartz draws an image to the screen by reading from the (0, 0) position in the image file (see Figure 5.14).

But if you tell Quartz to start at another location—say (160, 0)—Quartz will slide the image over 160 pixels to the left, and any pixels that got moved off of the screen to the left will be wrapped around the right of the screen. Consider what Quartz would do if you used an offset of (160, 240). Figure 5.15 shows an example of the output that would be produced.

One way to imagine this would be to take a piece of paper that is 320 mm wide and 480 mm tall and cut it in half at the 160 mm wide mark. Now take the left piece of the paper and move it to the right side of the other piece of paper. You could do a similar action for the top and bottom 240 mm parts of the paper. This would represent a vertical offset of 240 pixels.

The important thing to realize is this creates the effect you want to achieve. When any of the road falls off the bottom of the screen, you want it to reappear at the top of the screen. This way the road could go on forever if you needed it to. You will have to do a little work to get the CGContextDrawTiledImage function to work as needed.

You will need to add a class level variable named currentImage to keep an instance of the road image in memory to avoid reading from the device memory each time. Many developers think of programming as the art of caching data. If you can read an cached image ten times faster than reading it from a file, you can make that part of your application ten times faster simply by taking advantage of caching. Add a variable named tileOffset to keep up with the road's current vertical offset. Then you will need to assign the road.png image to the currentImage inside the awakeFromNib method. It's best if the road has its own timer that can be increased or decreased separately from the main game loop. When this loop fires you will need to increase the tileOffset by 1 pixel and refresh the screen. Last but certainly not least, you will need to update the road image in the Main View's drawRect method. All of these changes have been made in Listing 5.4, with the changes you need to make shown in bold.

Figure 5.14. Tiled image with offset of (0, 0)

Figure 5.15. Tiled image with offset of (160, 240)

Example 5.4. Adding a Timer and the CGContextDrawTiledImage Method

#import "MainView.h"
@implementation MainView
UIImage *currentImage;
int tileOffset = 0;
-(void)awakeFromNib {
   [[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];
   [car setAlpha:0];
   [road setAlpha:0];
   currentImage = [UIImage imageNamed:@"road.png"];
   // start a timer that will fire every second
   [NSTimer scheduledTimerWithTimeInterval:(1.0) target:self selector:@selector(onTimer) userInfo:nil repeats:YES];
   // start a timer that will fire every hundredth of a second
   [NSTimer scheduledTimerWithTimeInterval:(0.01) target:self selector:@selector(onTimerRoad) userInfo:nil repeats:YES];
}
- (void)onTimerRoad
{
   tileIndex += 1;
   [self setNeedsDisplay];
}
- (void)onTimer {
   [self update];
}
- (void)update {
   [self updateRoad];
}
- (void)updateRoad {
   [self  randomRoadUpdate];
}
- (void)randomRoadUpdate {
   int distance = (random() % 11) - 5;
   CGPoint oldPosition = road.center;
   if(oldPosition.x + distance < 96 || oldPosition.x + distance > 224)
      return;
   road.center = CGPointMake(oldPosition.x + distance, oldPosition.y);
}
- (void)draw {

}
- (id)initWithFrame:(CGRect)frame {
   if (self = [super initWithFrame:frame]) {
      // Initialization code
   }
   return self;
}
- (void)drawRect:(CGRect)rect {

   CGImageRef image = CGImageRetain(currentImage.CGImage);
   CGRect imageRect;
   imageRect.origin = CGPointMake(160, 240);
   imageRect.size = CGSizeMake(320.0, 480.0);
   CGContextRef uiContext = UIGraphicsGetCurrentContext();
   CGContextClipToRect(uiContext, CGRectMake(0.0, 0.0, rect.size.width, rect.size.height));
   CGContextDrawTiledImage(uiContext, imageRect, image);
}

- (void)dealloc {
   [super dealloc];
}

@end

You want to reward the player's success by adding points to his score. If the player does well, he gets a bonus; if the player makes a mistake, consider imposing a penalty such as taking away points.

Let's start by creating a very simple scoring system and then allowing you to customize it as you see fit from there. Open the MainView.xib file in Interface Builder. Start in the Groups & Files listing in Xcode. Find the AmuckRacer folder and then locate the Resources folder; inside it you should find the MainView.xib file. Double-click it to have Interface Builder open it. Open the Library that is found inside the Interface Builder's Tools menu. Make sure you have the Options tab selected instead of the Media tab. Expand the Library folder, then the Cocoa Touch Plugin folder, and finally choose the Inputs & Values folder. Drag a Label control onto the Main View window. Set the label's text to Score: 0. Move the label to the location of your liking (consider placing it at the top in the middle of the screen).

We need to create mappings from Interface Builder's user interface to Xcode classes so that the two can talk with each other. From the Interface Builder's Tools menu, choose Inspector. Make sure that the Inspector window is focused on the Main View by click the Main View's window title. Once you have the Main View selected, you will see Main View appear in the title bar of the Inspector window.

Go to the fourth tab in the Inspector window, named Main View Identity. You should see the two class outlets you created earlier named car and road. Add another one called score by clicking the button that has a plus sign on it. Be sure to set its Type to UILabel. Your screen should now look like the one shown in Figure 5.16.

As before, you will now use Interface Builder's Write Class Files feature to update your Main View's class files with the new control. Make sure you have the Main View window selected before running the Write Class Files command. You should see a screen like Figure 5.17.

Figure 5.16. Adding a score counter to AmuckRacer

Figure 5.17. The Save dialog box of the Write Class Files feature

You can find this menu item under Interface Builder's File menu. Next, you will see a merge or replace prompt, as shown in Figure 5.18. Be certain you choose the Merge option; if you choose the Replace option, Interface Builder will replace your edited files with empty new ones. This is a painful lesson to learn!

You have now created the user interface for the player's score. You need to add the code that will update the UI. To do this, you will need a new variable named score that will keep up with the player's score for the duration of the game. By default we will add to the player's score upon updating of the game loop. Here are the code changes needed to update the player's score.

First, you will need to initialize the score variable:

int score = 0;

You will also need to modify the update method as follows:

- (void)update {
   [self updateRoad];
   score += 1;
}

Figure 5.18. Merge or Replace prompt

And finally, you should update the draw method to set the label's text to the player's score:

- (void)draw {
   score.text = [NSString stringWithFormat: @"Score: d%", currentScore];
}

Now when you run AmuckRacer, you should see the player's score at the top of the screen, as shown in Figure 5.19.

Staying alive

It's always important in an action game to decide how the player wins and loses. In this game you will have the player lose if the car ever reaches the bottom of the screen, using a simple form of collision detection. You will make this possible by causing the player's car to slow down if it drives off the road. You can always find the road's position and the player's car position. Using this and what you know about the road, you can calculate whether the player is on the road.

Figure 5.19. AmuckRacer high score

Here is an overview of the math. You know the iPhone screen is 320 pixels wide, and the road is the same size. You know or you can check that the car image width is 42 pixels wide. Even though the road.png image is 320 pixels wide, the road in the image is really only 200 pixels wide. But that is not all you need to determine whether the player is keeping the car on the road. You will need to perform two checks: one to see if the car has driven off the left-hand side of the road, and the other to see if the car has driven off the right-hand side of the road.

To check if the car has driven off the left-hand side of the road, use the road image's center to find the center of the actual road, and subtract 100 to find the road's left-most edge. Compare this to the car's left-most edge to determine if the car remains on the actual road. To calculate the car's left-most edge, you use the car's center and subtract 24. You use the numbers 100 and 21 because these values are half of the widths of the road and car images, respectively. And the center of an image is at the halfway point from the left-most and right-most edges.

Now that you understand the concept, here is the code to make it happen:

- (void)updateCar {
   CGPoint roadPosition = road.center;
   int roadLeftPosition = roadPosition.x - 100;
   int roadRightPosition = roadPosition.x + 100;
   CGPoint carPosition = car.center;
   int carLeftPosition = carPosition.x - 21;
   int carRightPosition = carPosition.x + 21;
   if(carLeftPosition < roadLeftPosition)
      car.center = CGPointMake(carPosition.x, carPosition.y + 1);
   if(carRightPosition > roadRightPosition)
      car.center = CGPointMake(carPosition.x, carPosition.y + 1);
   if(carLeftPosition > roadLeftPosition && carRightPosition < roadRightPosition)
      car.center = CGPointMake(carPosition.x, carPosition.y - 1);
}

Make sure you add this call to your main update method:

- (void)update {
   [self updateRoad];
   [self updateCar];
}

Don't forget to update your MainView.h header file with the new method name:

#import <UIKit/UIKit.h>
@interface MainView : UIView {
    IBOutlet UIImageView *car;
    IBOutlet UIImageView *road;
    IBOutlet UILabel *score;
}
- (void)onTimer;
- (void)update;
- (void)updateRoad;
- (void)updateCar;
- (void)randomRoadUpdate;
- (void)draw;
- (void)drawScore;
@end