Tic-tac-toe

Also known as Noughts and Crosses, or Xs and Os.

Players take it in turns to place their symbol in one of the grid squares. A player wins if they form a straight line of 3 in a row. Horizontal, vertical and diagonal lines all count. The game ends with no winner if all squares are filled without forming a line.

Example

Live Example

X to play

View it on the SFC Playground

Features Used

Your implementation doesn't need to use the same Vue features as the example above, but to give you some idea of the knowledge you might need to attempt this:

• The example above is written using a single component.
• It uses a Single-File Component with <script setup>.
• Reactivity comes from reactive(), ref() and computed().
• The template uses:
  • Text interpolation, {{ ... }}.
  • v-if/v-else conditional rendering.
  • v-for for looping.
  • v-on/@ for handling events.
  • Class bindings with :class.