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 = CGPoint(x: frame.midX, y: frame.midY+100)
           
   	//get a random Bool
   let blue = Bool.random() //for <Swift 4.2 use arc4random_uniform(2) == 0
           
   	//depending on the random number set the text and name to either Blue or Yellow
   	if  blue
   	{
   	    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 didMove(to view:) 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 = SKColor.yellow
   yellowBin.size = CGSize(width: 200, height: 200)
   yellowBin.position = CGPoint(x: 200, y: 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 = CGSize(width: 200, height: 200)
   blueBin.position = CGPoint(x: 440, y: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>, with event: UIEvent?) {
       //get a touch
       let touch = touches.first!
           
       //if it started in the label, move it to the new location
       if label.frame.contains(touch.previousLocation(in: self)){
       label.position = touch.location(in: 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>, with event: UIEvent?) {
       
       //if label is called yellow and its centre is inside the yellow target
       if label.name == "yellow"{
           if yellowBin.frame.contains(label.position){
               //remove it and create a new label
               label.removeFromParent()
               setupDragLabel()
           }
       }
           
       //same process for blue label
       if label.name == "blue"{
           if blueBin.frame.contains(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

• Add scoring and a timer
• Further develop the game to make it more challenging. You could, for example, add a colour to the label node opposite to the description of the text, e.g. showing the word blue in the colour yellow.
• Extend the with additional views - e.g. multiple colours. You will notice that there will be increasing amounts of code which is very similar, e.g. in the touchesEnded method. Refactor the code to avoid repetition where possible - this will require the creation of new functions.

Advanced Task

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