Skip to content
A simple, not fancy at all, Pokemon Speaks web app. Make the Pokemon speak using your keyboard!
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
sounds
README.md
index.html
style.css
vue.js

README.md

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


App

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

You can’t perform that action at this time.