Documents

15puzzle.pdf

Description
15 Puzzle CS 483 Due 11:59 pm, Friday, February 14, 2014 1 Introduction For this project you will create an iOS 7 Fifteen Puzzle app for the iPhone: http://en.wikipedia.org/wiki/Fifteen_puzzle Section 2 describes how to use the Interface Builder (IB) editor to layout your view components. The methods for the internal game logic (which you will need to implement) are specified in Section 3. The details of the Model View
Categories
Published
of 10
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Related Documents
Share
Transcript
  15 Puzzle CS 483Due 11:59 pm, Friday, February 14, 2014 1 Introduction For this project you will create an iOS 7  Fifteen Puzzle   app for the iPhone: http://en.wikipedia.org/wiki/Fifteen_puzzle Section 2 describes how to use the  Interface Builder   (IB) editor to layout your view components. Themethods for the internal game logic (which you will need to implement) are specified in Section 3. Thedetails of the  Model View Controller   (MVC) design and the flow of events is outlined in Section 4. Someideas of extra features you can add to your app is given in Section 5. How to submit your solution is specifiedin Section 6. 1.1 Creating a new project You app will contain a single view that displays the puzzle. To get started, create a new iOS Applicationproject in Xcode 5 that uses the iOS “Emply Application” template.  1 If you use the “Single View Appli-cation” template, then Xcode will create a Storyboard for your project – after this project we will focus onusing Storyboard. Choose “iPhone” for the device family. Name your project  FifteenPuzzle  and enter edu.username  (or something unique) for the “Company Identifier.” Specify  FifteenPuzzle  for the “ClassPrefix;” Xcode will use this to generate class names. Don’t ever begin this string with a digit since Xcode willhave to tweak it since identifiers can’t begin with a digit in C. You can let Xcode generate a git repositoryfor you (or you can create one by hand).  2 Figure 1 shows the supporting files in your project under theProject Navigator tab. 1.2 Adding the view controller Add a view controller class named  FifteenPuzzleViewContoller  with an associated NIB file to your project(see Figure 2). In the App delegate’s  application:didFinishLaunchingWithOptions:  method, create aninstance of your view controller and set it to be the “root view controller” for the App’s window: self.viewController = [[FifteenPuzzleViewController alloc]initWithNibName:@ FifteenPuzzleViewController bundle:nil];self.window.rootViewController = self.viewController; If you happen to be using a StoryBoard instead (no NIB), then the root view controller will automaticallybe set for you.1  } }  Application DelegateView ControllerNIB }  Board ModelApplicationProperty Listmain(don't edit) } Frameworksour app usesimages asset file Figure 1: Content of project.Figure 2: Creating view controller with associate NIB file. 2 Laying out the View Select  FifteenViewController.xib  in the Project Navigator and edit the NIB file as illustrated in Figure 3.The Xcode template will have already created a “main view” for you. First add a  UIToolBar  and another UIView  as illustrated on the figure’s left. Another  UIView  is then added which we will call the “board view”since it will contain the tiles. Use the Size Inspector to set its size at 300 × 300 and center it as illustratedin Figure 4. Change its background to black in the Attributes Inspector. 300 is a nice choice since its amultiple of four and fits snuggly within the 320 pixel wide screen and won’t need to be resized if we allowthe user to rotate the device. Drop a  UIButton  onto the board view, resize to 75 × 75 ,  set the title two atwo-digit number and resize the font to taste. Replicate (copy and paste) this button 14 times and lay themout as shown on the figure’s right. Set the title and the tags (via the Attribute Inspector) of each button to 1 If you are working on a ENCS lab computer you want to make sure your working directory is on the local file system asdescribed in class. 2 Eventually you will push this repository to a “bare git repository” under you home directory if you are working on a ENCSlab machine. 2  4163203003007575 UIToolBarUIViewUIViewUIButton UIBarButtomItem (or 510) Figure 3: Views and control in NIB file. The toolbar and view on the left are subviews of the main view.The 300 × 300 view in the center (we call the “board view”) is a subview of the view on the left which willcontain the tiles. Each of the 15 buttons on the left are subview of the board view. Note: these are iOS 6snapshots. File Inspector tabuncheck todisable Autlolayout centering: no springs nor struts Size Inspector tab Figure 4: Using the “Size Inspector” to force the board view have a fixed size of 300 × 300 and to be centeredin its parent view. To be able to alter the “springs” and “struts” you first need to disable “Autolayout.”one through fifteen; we will use the tags to identify each button in our our code.The views and controls in the NIB file form a hierarchy as illustrated in Figure 5. The application’s viewcontroller is created in the  App Delegate’s   application:didFinishLaunchingWithOptions:  method whichcreates its view when this NIB file is loaded. The “File’s Owner” references the object that loaded the NIBfile, thus it is a “placeholder” which references the App Delegate in this case. 2.1 Adding a  boardView  outlet Create an  outlet   so the controller can access the tiles of our board view: @property(weak,nonatomic) IBOutlet UIView *boardView; Since this view’s superview already “owns” this object and will provide it with the necessary lifetime, wecan safely reference it with a  weak  pointer. We use the  nonatomic  keyword since we won’t be accessing itconcurrently ( i.e.,  with multiple threads). Use the Connections Inspector in IB to connect the  boardView outlet with this instance variable.  3 3 Or you could place Xcode’s editor into “Tuxedo Mode” and create these outlets as described in class. 3  main viewboard viewview controller Figure 5: Hierarchical view of objects in the NIB file. “File’s Owner” is simply a placeholder that referencesthe object that loaded the NIB file which is our view controller in this case. All of our views and controlsare subviews of the “main view” which was created by the Xcode template. 2.2 Adding action methods We need to create the appropriate callback methods that will be invoked when the user selects a tile or wantsa new game. Add the following “action methods” to the  FiftenPuzzleViewController  class: -(IBAction)tileSelected:(UIButton*)sender;-(IBAction)scrambleTiles:(id)sender; I usually add code to log when the methods are invoked for diagnostic purposes: -(IBAction)tileSelected:(UIButton*)sender {const int tag = [sender tag];NSLog(@ tileSelected: %d , tag);...} Use the Connection Inspector in IB to connect these actions with the appropriate buttons on “Touch Up”events. 2.3 Additional Setup Usually there is more work to be done to setup the view after its NIB file is loaded. The  UIViewController class provides a method for its subclasses to override when there is additional setup to be done program-matically. We will use  FifteenPuzzleViewController ’s overloaded version to create a new board (seeSection 4), shuffle the tiles on the board, and arrange the view’s tiles (represented as buttons) to reflect thestate of the board: - (void)viewDidLoad {[super viewDidLoad];self.board = [[FifteenBoard alloc] init]; // create/init board[self.board scramble:NUM_SHUFFLES]; // scramble tiles[self arrangeBoardView]; // sync view with model} 4

Crazy Invents

Jul 23, 2017
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks