It's time to Apple Watch, create a game with WatchOS [Swift] ⌚️
Tags: swift, ios, watchos
Published: 2019-02-05 03:32:45

---
title: It's time to Apple Watch, create a game with WatchOS [Swift] ⌚️
published: true
description: Rock Paper Scissors simple game
tags: #swift,#ios,#watchos
cover_image: https://cdn-images-1.medium.com/max/2600/1*nN1QGFkxyASASPU84MCY-w.jpeg
---



In this tutorial, you will create a small game 👾 for the **Apple Watch** based on the game of rock, paper, and scissors 👊✂ 📃.

# Requirements

* Mac OS Mojave or higher.
* Xcode 10 or higher.
* iPhone simulator.
* Apple Watch simulator.

To start, we created a new project in Xcode of the **WatchOS** type.

![alt text](https://cdn-images-1.medium.com/max/1600/1*SxE6RlXihptafGFCkJBvsg.png)


Fill the Product Name input with the value "RockPaperScissorsSwift" and then uncheck the option **Include Notification Scene**.

![alt text](https://cdn-images-1.medium.com/max/1600/1*BeKaYkZumg_4Q0AeKV3uNw.png)

🖥 A normal iOS solution is created with two additional projects.

* **WatchKit App** (where the storyboard goes)
* **WatchKit Extension** (code of the controllers)

![alt text](https://cdn-images-1.medium.com/max/1600/1*pSxW4fvZQeBl8QlZkyICxg.png)

The graphics interface of the project should be as follows:

![alt text](https://cdn-images-1.medium.com/max/1600/1*ncWez831PVhfc-BGpx9mzA.png)

🖐❇️ The construction of the interface is the same as in iOS dragging controls and should be as follows:

* **Label** to see who chose the watch (stone, paper or scissors)
* **Label** to see the result (win, lose, draw)
* **White** thin line separator
* **GroupView** with three buttons
* **GroupView** with a label on the left and a timer on the right

The Label to see the result must have a height proportional to the size of the clock, to assign these values in the **Size** section.

* **Width**, is assigned Relative to Container with a value of 1, which will take 100% of the width
* **Height**, Relative to the Container is assigned with a value of 0.4, which will take 40% of the clock's height.

![alt text](https://cdn-images-1.medium.com/max/1600/1*7ay78OwcCX4PtApDfdPNqQ.png)

A **GroupView** is a view that accommodates each control side by side horizontally.

![alt text](https://cdn-images-1.medium.com/max/1600/1*1jKEs28DoZBKWea47qn3Tw.png)

To **align** a control within a GroupView to the right in the toolbox within the Aligment section with right value.

![alt text](https://cdn-images-1.medium.com/max/1600/1*z3UizrF5_ITbeUNppXrA7w.png)

The **timer** is a control that shows a type of clock in the form of Label.

![alt text](https://cdn-images-1.medium.com/max/1600/1*O-quZgQ5bWW6Wi0CyQcaTg.png)

# Code 🛠

* Declares an array options with the 3 elements and a variable counter to bring the number of games won.
* When initializing we place the images to the buttons and the timer starts to show the elapsed time.
* A function is created with the logic of how to determine the winner.

The complete code of the controller is as follows:

{% gist https://gist.github.com/andreslopezrm/622ce4e19d9e8a960c7df10f74f116b2 %}

The project is executed and the application is executed as follows:

![alt text](https://cdn-images-1.medium.com/max/1600/1*X4O6h4kfT_Z5dpmcKklLmA.png)


# Conclusion

Creating an application for the Apple Watch is very similar to building an iOS application, in this example we saw that with basic controls you can create great things.

🌎 You can check the application code on [Github](https://github.com/andreslopezrm/SwiftWatchOSRockPaperScissors)