Vue Examples

Numbers Game ​

This game is based on the 'numbers game' from the British game show Countdown, which is itself based on the French TV show Des chiffres et des lettres.

The rules of the game are mostly quite intuitive, but explaining them in detail makes it seem a lot more complicated than it actually is.

There is a running version of the game at the link below, which you may want to use to get more familiar with the game:

https://skirtles-code.github.io/vue-numbers-game/

A rough outline of the rules:

  • Players are given 6 starting numbers and a target number. The 6 starting numbers must be manipulated using basic arithmetic to try to reach the target number.
  • The target number is between 100 and 999 inclusive. It is chosen at random and is not necessarily achievable.
  • Only the operators +, -, × and ÷ may be used. An operation is only allowed if it yields a positive, integer result.
  • The 6 start numbers are selected from a set of 24. These consist of the four 'large numbers' 25, 50, 75 and 100, plus two copies of the 'small numbers' 1 to 10.
  • The player may choose how many large numbers they want, from 0 to 4.
  • Each of the start numbers may only be used once in the calculation. Similarly, the output of an operation may only be used once in subsequent steps.
  • Not all of the 6 starting numbers need to be used.

Example game:

Target: 377
Start numbers: 50 8 7 7 5 3

Possible solution:
Step 1: 50 - 3 is 47
Step 2: 47 × 8 is 376
Step 3: 7 ÷ 7 is 1
Step 4: 376 + 1 is 377

The number 5 is not used in this solution

Alternative solution:
Step 1: 50 × 7 is 350
Step 2: 7 × 5 is 35
Step 3: 350 + 35 is 385
Step 4: 385 - 8 is 377

The number 3 is not used in this solution

Example ​

A basic implementation of the game might look something like this:

Live Example
How many large numbers?
Target: 165
Start numbers: 75, 7, 5, 5, 3, 2

View it on the SFC Playground.

For a much more embellished version of the game, see (as linked earlier):

https://skirtles-code.github.io/vue-numbers-game/

That version is also implemented in Vue, and its code can be seen in its GitHub repo.

Features Used ​

It's up to you how far you want to take this exercise. The basic example above only scratches the surface, whereas the more advanced example probably goes too far. Decide for yourself when you're happy to stop adding extra functionality.

For the basic implementation shown above:

  • It 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 conditional rendering.
    • v-for for looping.
    • v-model for two-way binding on the <input> and <select>.
    • v-on/@ for handling events.

The more advanced version uses a lot of other Vue features:

  • v-bind/:.
  • Multiple components, communicating with props, slots, events and v-model.
  • Watchers.
  • <TransitionGroup>.
  • v-bind in CSS.
  • Lifecycle hooks.
  • Template refs.