Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Playing Space Invaders With Your Own Voice

DZone 's Guide to

Playing Space Invaders With Your Own Voice

We look into how to get a machine to recognize your voice by using JavaScript.

· AI Zone ·
Free Resource

Natural Language Processing and Games

After some time testing voice games in my Alexa device, one question came to my mind...

Why not try to convert a classic game control system to a Voice User Inteface?

So let's do a simple experiment with a Space Invaders written in JavaScript.

Final Result (Kind of)

\After some walkarounds I made a requirement list in order to reach my target:

Well, once I was more or less clear on what I was looking for, I use the second most important engineering lesson: don't reinvent the wheel. So, once again I did some research with Google and it led me to something called Woice.

Once I went through the tutorial for creating a new application, I charged the SDK script on my HTML and drew a few lines of code over the space invaders control system.

These lines can be explained in three concepts: Handler, Instance, and Speech Recognition Trigger.

The first concept is the Handler which is composed of two functions: canHandle, which dictates if the code of the second function, handle, should be executed or not.

I know, it's easier if we have some tangible code to look at:

var moveRightAction = {
  canHandle: (handlerInput) => {
    if (handlerInput.isIntent('moveRight')) {
      handlerInput.allow();
    }
  },
  handle: (handlerInput) => {
    GlobalActionState.RIGHT = true;
  }
}

The code above is as simple as this: when we match the intent (moveRight) in the Dialogflow agent (this is Woice's supported NLU), we trigger GlobalActionState.RIGHT = true.

The second concept is the instance — once we have defined our handlers we are going to build a Woice instance with these.

var Woice = window.woice.DriverBuilders.config()
  .lang('en-US')
  .addActionHandlers(moveRightAction, moveLeftAction, FireAction, PrintTransciption)
  .withSpeechRecognition()
  .connect('f608ceeabb8237e83019cefc47a41b65', 'woice-invaders')
  .start();

And the last one, we are going to attach a Speech Recognition Trigger.In this case, we associate this event to the control+B keyboard combination.

document.addEventListener("keydown", function (zEvent) {
  if (zEvent.ctrlKey && zEvent.code === "KeyE" || zEvent.ctrlKey && zEvent.code === "KeyB") {
    // active speech recognition
    Woice.startSpeechRecognition();
  }
});

And the final and editable results are:

https://woice-invaders.glitch.me/

It's definitely not the best use case (gaming requires real-time action, so it's not really suited for voice) but, on the other hand, I played more times tham I would like to admit.

If you have any questions, reviews, or simply a project you want to share with me I'd be happy to hear from you!

Topics:
ai ,voice assistant ,games ,javascript tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}