Not Fancy Pokemon Speak

A simple, not fancy at all, Pokemon Speak web app. Make the Pokemon speak using your keyboard!

Features include:

Play sound when Pokemon speaks
Display text when Pokemon speaks
Clear text and show welcome message when inactive

Built using:

Vue
Font Awesome
Google Fonts - Comfortaa

Play around with it on CodePen
Or see it live! here

Notes

Here are the general steps to create your own Pokemon Speak

1. Listen to Keyboard Events

Vue doesn't support global key press (at least I couldn't figure it out), so we need to addEventListener to the window.

new Vue({ 
  created () {
    window.addEventListener('keydown', this.selectPokemon)
  },
})

2. Responding to Keyboard Events

methods: {
  selectPokemon(e) {
    // Create an array of all your key codes
    //  ie. [80, 67, 83]
    const keys = this.pokemons.map(pokemon => pokemon.code);
    
    // Retrieve the pressed key code 
    //  ie. 80 is for key "p"
    const code = e.keyCode;
    
    // Loop through your pokemon array and get the selected pokemon
    const selectedPokemon = this.pokemons.find(pokemon => pokemon.code === code)

    // Update the property of the selected pokemon
    selectedPokemon.selected = true;
  },
}

3. Play Sound

methods: {
  selectPokemon(e) {
    
    // Pass in the path of your sound file
    this.playSound(`sounds/${selectedPokemon.file}.mp3`)
  },
  playSound(sound) {
    
    // Create the audio
    var audio = new Audio(sound);
    
    // Play the audio
    audio.play();
  },
}

Resources