DEV Community

Cover image for It's time to Apple Watch, create a game with WatchOS [Swift] ⌚️
Andres Lopez
Andres Lopez

Posted on • Updated on

It's time to Apple Watch, create a game with WatchOS [Swift] ⌚️

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

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

alt text

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

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

alt text

The graphics interface of the project should be as follows:

alt text

🖐❇️ 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

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

alt text

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

alt text

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

alt text

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:

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

alt text

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

Top comments (8)

Collapse
 
jrtibbetts profile image
Jason R Tibbetts

This was really helpful, since I'm considering adding a Watch version to one of my apps. I also have a few recommendations, which I put together in a pull request against your repo:

  • Use enums for your game moves ("rock", "paper", "scissors") and results ("TIE", "WIN", "LOSE").
  • Use a switch statement to determine the results.

An additional improvement that should be pretty trivial is to localize it for Spanish.

Collapse
 
andreslopezrm profile image
Andres Lopez

Thank you very much for the suggestions, they help me to continue improving the posts

Collapse
 
jrtibbetts profile image
Jason R Tibbetts

Happy to help!

Thread Thread
 
andreslopezrm profile image
Andres Lopez

Thanks for the pull request 😀😄

Collapse
 
michaeltharrington profile image
Michael Tharrington • Edited

Really cool tutorial Andres! Thanks so much for sharing!

I've got two small pointers for you...

  1. This game is more commonly called "rock, paper, scissors" in English (or apparently rock–paper–scissors according to Wikipedia... pretty much the same thing.) Still though, I really like the idea of calling it stone, paper, scissors. That's a really charming translation and sounds great!

  2. I remember reading this post by @sauloco a while back and thinking it was a cool idea. Just wanted to point it out in case you'd like to follow suit with the translated tag.

Collapse
 
andreslopezrm profile image
Andres Lopez

Thank you very much for the points, I will continue to improve the post.

Collapse
 
hasovskii profile image
Hasovskii • Edited

It was a great lesson. I'd want to try it this way. I've already attempted to install a scheduling interface controller that isn't required for survival. However, I've recently gone back to the classic 레플리카시계. Except for the SpO2 blood oxygen saturation, there are no additional functionalities on the smartphone. All precisely cannot ensure the measurement's medical correctness and is not designed to diagnose or treat disease. As a result, I'm looking for a single exceptional attribute that will go well with the outfit.

Collapse
 
calo0012 profile image
ςคгɭ๏ร ɭ๏קєչ

Amazing tutorial :) thanks for spanish version!!