A simple drag and drop game

This task builds a very simple game, whereby the player has to move a label to the appropriately coloured box.

Creating the Game

  1. Create a new sprite kit game for iPhone, ensure you use the Swift language
  2. Open the GameScene.sks file and in the inspector change the size to have a width of 640 and a height of 960. This represents the dimensions of the iPhone 4s in portrait mode
  3. In GameScene.swift, immediately after the line that starts class add the following code:
    let label = SKLabelNode()
    let blueBin = SKSpriteNode()
    let yellowBin = SKSpriteNode()
  4. Add the following function which will setup the label
    func setupDragLabel(){
    	//set the font and position of the label
    	label.fontName = "Chalkduster";
    	label.fontSize = 20
    	label.position = CGPointMake(CGRectGetMidX(frame), CGRectGetMidY(frame)+100)
            
    	//get a random number between 0 and 1
    	let random = arc4random_uniform(2)
            
    	//depending on the random number set the text and name to either Blue or Yellow
    	if  random == 0
    	{
    	    label.text = "blue"
    	    label.name = "blue"
    	}else{
    	    label.text = "yellow"
    	    label.name = "yellow"
    	}
            
    	//add the label to the scene
    	addChild(label)
    }
  5. Remove the existing contents of the didMoveToView method and replace it with the function call below:
    setupDragLabel()
  6. Also delete the entire touchesBegan(touches: event:) method as we will only need to consider touches that have moved or ended
  7. We also need to add code to create the target drop zones (or bins as the code calls them). Add the method shown below to do that:
    func setupTargets(){
            
    //setup the yellow bin with colour, dimensions and add to scene
    yellowBin.color = UIColor.yellowColor()
    yellowBin.size = CGSizeMake(200, 200)
    yellowBin.position = CGPointMake(200, 200)
    addChild(yellowBin)
            
    //note that we can determine property of a fixed type using shorthand, shown here for setting colour
    blueBin.color = .blueColor();
    blueBin.size = CGSizeMake(200, 200)
    blueBin.position = CGPointMake(440, 200)
    addChild(blueBin)
            
        }

    Then call this method by adding the following line inside the didMoveToView method:

    setupTargets()

    Run the game to ensure you can see the label and two drop zones.
  8. We need to handle the movement of the label, add the following function (note that you can get Xcode to add the function declaration by typing touchesMoved and hitting tab:
    override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
        //get a touch
        let touch = touches.first!
            
        //if it started in the label, move it to the new location
        if CGRectContainsPoint(label.frame, touch.previousLocationInNode(self)){
            label.position = touch.locationInNode(self)
        }
    }
    

    It is worth being aware that because iOS devices can detect multiple touches, we have to pick one to use. That is what the touches.anyObject() function call of the code does.

  9. Next add this method to check where the label is when it is released:
    override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
        
        //if label is called yellow and its centre is inside the yellow target
        if label.name == "yellow"{
            if CGRectContainsPoint(yellowBin.frame, label.position){
                //remove it and create a new label
                label.removeFromParent()
                setupDragLabel()
            }
        }
            
        //same process for blue label
        if label.name == "blue"{
            if CGRectContainsPoint(blueBin.frame, label.position){
                //remove it and create a new label
                label.removeFromParent()
                setupDragLabel()
            }
        }
    }
  10. Run the game, and you should be able to drag the button around. If you release it in the incorrect location, it will remain where it is, if you are correct, another one should appear at the top.

Further Tasks

Advanced Task

Use what you have learned to develop a game based on similar principles, for example a jigsaw.