Day twenty eight: simon says

October 23, 2015

As a dutch resident I had never played the world famous game “simon says”. Being intrigued by the game mechanics. I remade the game for everyone to enjoy!

live demo

Simon says is a game where the user is asked to repeat a sequence. The sequence exists of colors. When the user enters the entire sequence. The game appends a new color to the sequence. Asking the user to repeat it again.

preview

generating the sequence

Using Polymer made it possible to create a loop which encapsulates the entire game mechanics. Let me walk you through this loop and introduce the magic of web components that is being used along the way!

When the user clicks on the start button. The mediator calls the simon-generator element to get a color. If that sounds confusing. Don’t worry. It will get more clear with an example of the actual code.

Polymer({
  is: 'simon-generator',
  getRandomColor: function() {
    // get a random color
    return window._.sample(['green', 'red', 'yellow', 'blue']);
  }
})

Now that we can use simon-generator let’s look at what the mediator does with it!

<simon-generator id="generator"></simon-generator>
<script>
  Polymer({
    is: 'simon-app',
    properties: {
      // define the sequence that the user has to guess
      sequence: {
        type: Array,
        // make it an empty array by default
        value: []
      }
    },
    // this function gets called when the start button is clicked
    start: function() {
       this.addToSequence();
    },
    addToSequence: function() {
      // this.$.generator refers to the <simon-generator> which implementation is mentioned earlier
      // gets a random color and adds it to the sequence for the user to guess
      this.push('sequence', this.$.generator.getRandomColor());
    }
  });
</script>

We click on start. The game shows the sequence it wants us to repeat. However, when we repeat it. Nothing happens. No funny remark or boring message that shows us that we solved it, that sucks. Time to introduce a game validator which serves as the referee we need!

the validator

The validator is simple. It checks whether the user input is equal to the game’s sequence mentioned above. Again we create a new element. For simplicity sakes I will only show the basic skeleton of the implementation.

Polymer({
  is: 'simon-validator',
  validate: function() {
    if (this.isCorrect()) {
      // fire a correct event so the mediator knows the user is awesome
      this.fire('correct');
    } else {
      // fire a wrong event so the mediator knows that the game is over
      this.fire('wrong');
    }
  },
  isCorrect: function() {
    ...
  }
})

Whenever the user clicks on one of the colored tiles. The validation should take place. All right simple enough!

<simon-validator id="validator"></simon-validator>
<simon-tile color="red" on-tap="validate"></simon-tile>
<script>
Polymer({
  ...
  is: 'simon-app',
  // this function is called when the user "taps" the <simon-tile>
  validate: function() {
    // call the validate function on the validator mentioned above
    this.$.validator.validate();
  }
  ...
})
</script>

Awesome! The user can now receive feedback on how awesome they are! One problem though. There isn’t much of a loop yet. When the user is on a roll. The game won’t append new values to the sequence yet. What a bummer.

Oh wait! Remember the success event? We can listen to that and add a color to the sequence. This will trigger the app to display the entire sequence again and thus. Create a loop with the condition that the user is correct! This sounds like a lot of work … It isn’t! We only have to make one little adjustment!

<simon-validator on-correct="addToSequence"></simon-validator>

Yup, that’s right! We didn’t even need to add code! This is the power of Polymer.

Thank you for reading and don’t forget to leave a star on the repo.

Comments